Added overlay on portrait screens to force switching to landscape

(Needs better styling/design)
2025-01-22 22:36:08 +01:00
30 changed files with 2157 additions and 724 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,13 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting'],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,6 +1,7 @@
 {
  "recommendations": [
    "Vue.volar",
+    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
@ -27,13 +28,18 @@
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
+    "@rushstack/eslint-patch": "^1.10.3",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^20.14.11",
    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
    "jsdom": "^24.1.1",
    "npm-run-all2": "^6.2.3",
    "phaser3-rex-plugins": "^1.80.8",
--- a/src/App.vue
+++ b/src/App.vue
@ -41,7 +41,9 @@ watch(
 )

 // #209: Play sound when a button is pressed
-// @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
+/**
+ * @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
+ */
 addEventListener('click', (event) => {
  if (!(event.target instanceof HTMLButtonElement)) {
    return
--- a/src/application/types.ts
+++ b/src/application/types.ts
@ -242,11 +242,15 @@ export type Chat = {

 export type WorldSettings = {
  date: Date
-  weatherState: WeatherState
+  isRainEnabled: boolean
+  isFogEnabled: boolean
+  fogDensity: number
 }

 export type WeatherState = {
+  isRainEnabled: boolean
  rainPercentage: number
+  isFogEnabled: boolean
  fogDensity: number
 }

--- a/src/application/utilities.ts
+++ b/src/application/utilities.ts
@ -1,7 +1,3 @@
-import config from '@/application/config'
-import type { HttpResponse } from '@/application/types'
-import type { BaseStorage } from '@/storage/baseStorage'
-
 export function uuidv4() {
  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
 }
@ -27,26 +23,3 @@ export function getDomain() {

  return window.location.hostname.split('.').slice(-2).join('.')
 }
-
-export async function downloadCache<T extends { id: string; updatedAt: Date }>(endpoint: string, storage: BaseStorage<T>) {
-  const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
-  const response = (await request.json()) as HttpResponse<T[]>
-
-  if (!response.success) {
-    console.error(`Failed to download ${endpoint}:`, response.message)
-    return
-  }
-
-  const items = response.data ?? []
-
-  for (const item of items) {
-    let overwrite = false
-    const existingItem = await storage.get(item.id)
-
-    if (!existingItem || item.updatedAt > existingItem.updatedAt) {
-      overwrite = true
-    }
-
-    await storage.add(item, overwrite)
-  }
-}
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@ -31,6 +31,12 @@ body {
    @apply outline-offset-2;
    @apply rounded-sm;
  }
+
+  @media only screen and (orientation:portrait) and (max-width: 768px) {
+    .portrait-mode-notice {
+      @apply block;
+    }
+  }
 }

 h1,
--- a/src/components/game/map/Effects.vue
+++ b/src/components/game/map/Effects.vue
@ -10,174 +10,157 @@ import { useMapStore } from '@/stores/mapStore'
 import { Scene } from 'phavuer'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'

-// Types
-interface LightConfig {
-  SUNRISE_HOUR: number
-  SUNSET_HOUR: number
-  DAY_STRENGTH: number
-  NIGHT_STRENGTH: number
-  TRANSITION_HOURS: number
-}
-
-interface EffectObjects {
-  light: Phaser.GameObjects.Graphics | null
-  rain: Phaser.GameObjects.Particles.ParticleEmitter | null
-  fog: Phaser.GameObjects.Sprite | null
-}
-
-interface EffectValues {
-  light?: number
-  rain?: number
-  fog?: number
-  [key: string]: number | undefined
-}
-
 // Constants
-const LIGHT_CONFIG: LightConfig = {
+const LIGHT_CONFIG = {
  SUNRISE_HOUR: 6,
  SUNSET_HOUR: 20,
  DAY_STRENGTH: 100,
-  NIGHT_STRENGTH: 30,
-  TRANSITION_HOURS: 3
+  NIGHT_STRENGTH: 30
 }

-// Composables
-const useEffects = () => {
-  const effects = ref<EffectObjects>({
-    light: null,
-    rain: null,
-    fog: null
-  })
-
-  const initializeEffects = (scene: Phaser.Scene) => {
-    effects.value.light = scene.add.graphics().setDepth(1000)
-
-    effects.value.rain = scene.add
-      .particles(0, 0, 'raindrop', {
-        x: { min: 0, max: window.innerWidth },
-        y: -50,
-        quantity: 5,
-        lifespan: 2000,
-        speedY: { min: 300, max: 500 },
-        scale: { start: 0.005, end: 0.005 },
-        alpha: { start: 0.5, end: 0 },
-        blendMode: 'ADD'
-      })
-      .setDepth(900)
-    effects.value.rain.stop()
-
-    effects.value.fog = scene.add
-      .sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
-      .setScale(2)
-      .setAlpha(0)
-      .setDepth(950)
-  }
-
-  const applyEffects = (effectValues: EffectValues) => {
-    if (effects.value.light) {
-      const darkness = 1 - (effectValues.light ?? 0) / 100
-      effects.value.light.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
-    }
-
-    if (effects.value.rain) {
-      if (effectValues.rain) {
-        effects.value.rain.start().setQuantity(effectValues.rain / 10)
-      } else {
-        effects.value.rain.stop()
-      }
-    }
-
-    if (effects.value.fog && effectValues.fog !== undefined) {
-      effects.value.fog.setAlpha(effectValues.fog / 100)
-    }
-  }
-
-  const handleResize = () => {
-    if (effects.value.rain) {
-      effects.value.rain.updateConfig({ x: { min: 0, max: window.innerWidth } })
-    }
-    if (effects.value.fog) {
-      effects.value.fog.setPosition(window.innerWidth / 2, window.innerHeight / 2)
-    }
-  }
-
-  return { effects, initializeEffects, applyEffects, handleResize }
-}
-
-// Store instances
+// Stores and refs
 const gameStore = useGameStore()
 const mapStore = useMapStore()
 const mapStorage = new MapStorage()
-
-// State
 const sceneRef = ref<Phaser.Scene | null>(null)
+const mapEffectsReady = ref(false)
 const mapObject = ref<Map | null>(null)
+
+// Effect objects
+const effects = {
+  light: ref<Phaser.GameObjects.Graphics | null>(null),
+  rain: ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null),
+  fog: ref<Phaser.GameObjects.Sprite | null>(null)
+}
+
+// Weather state
 const weatherState = ref<WeatherState>({
+  isRainEnabled: false,
  rainPercentage: 0,
+  isFogEnabled: false,
  fogDensity: 0
 })

-// Effects management
-const { effects, initializeEffects, applyEffects, handleResize } = useEffects()
-
-// Utility functions
-const lerp = (x: number, y: number, a: number): number => x * (1 - a) + y * a
-
-const calculateLightStrength = (time: Date): number => {
-  const hour = time.getHours()
-  const minute = time.getMinutes()
-
-  if (hour >= LIGHT_CONFIG.SUNSET_HOUR - LIGHT_CONFIG.TRANSITION_HOURS && hour < LIGHT_CONFIG.SUNSET_HOUR) {
-    return lerp(LIGHT_CONFIG.DAY_STRENGTH, LIGHT_CONFIG.NIGHT_STRENGTH, (hour + minute / 60 - (LIGHT_CONFIG.SUNSET_HOUR - LIGHT_CONFIG.TRANSITION_HOURS)) / LIGHT_CONFIG.TRANSITION_HOURS)
-  } else if (hour >= LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNRISE_HOUR + LIGHT_CONFIG.TRANSITION_HOURS) {
-    return lerp(LIGHT_CONFIG.NIGHT_STRENGTH, LIGHT_CONFIG.DAY_STRENGTH, (hour + minute / 60 - LIGHT_CONFIG.SUNRISE_HOUR) / LIGHT_CONFIG.TRANSITION_HOURS)
-  } else if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR) {
-    return LIGHT_CONFIG.DAY_STRENGTH
-  }
-  return LIGHT_CONFIG.NIGHT_STRENGTH
-}
-
-// Scene handlers
-const preloadScene = (scene: Phaser.Scene): void => {
+// Scene setup
+const preloadScene = (scene: Phaser.Scene) => {
  scene.load.image('raindrop', 'assets/raindrop.png')
  scene.load.image('fog', 'assets/fog.png')
 }

-const createScene = (scene: Phaser.Scene): void => {
+const createScene = (scene: Phaser.Scene) => {
  sceneRef.value = scene
  initializeEffects(scene)
  setupSocketListeners()
 }

-const updateScene = (): void => {
-  const timeBasedLight = calculateLightStrength(gameStore.world.date)
-  const mapEffects =
-    mapObject.value?.mapEffects?.reduce<Record<string, number>>(
-      (acc, curr) => ({
-        ...acc,
-        [curr.effect]: curr.strength
-      }),
-      {}
-    ) ?? {}
-
-  const finalEffects: EffectValues = {
-    ...mapEffects,
-    light: timeBasedLight,
-    rain: weatherState.value.rainPercentage,
-    fog: weatherState.value.fogDensity
-  }
-
-  applyEffects(finalEffects)
-}
-
-// Map management
-const loadMap = async (): Promise<void> => {
+const loadMap = async () => {
  if (!mapStore.mapId) return
  mapObject.value = await mapStorage.get(mapStore.mapId)
 }

-// Socket handlers
-const setupSocketListeners = (): void => {
+// Watch for mapId changes and load map when it's available
+watch(
+  () => mapStore.mapId,
+  async (newMapId) => {
+    if (newMapId) {
+      mapEffectsReady.value = false
+      await loadMap()
+      updateScene()
+    }
+  },
+  { immediate: true }
+)
+
+const initializeEffects = (scene: Phaser.Scene) => {
+  // Light
+  effects.light.value = scene.add.graphics().setDepth(1000)
+
+  // Rain
+  effects.rain.value = scene.add
+    .particles(0, 0, 'raindrop', {
+      x: { min: 0, max: window.innerWidth },
+      y: -50,
+      quantity: 5,
+      lifespan: 2000,
+      speedY: { min: 300, max: 500 },
+      scale: { start: 0.005, end: 0.005 },
+      alpha: { start: 0.5, end: 0 },
+      blendMode: 'ADD'
+    })
+    .setDepth(900)
+  effects.rain.value.stop()
+
+  // Fog
+  effects.fog.value = scene.add
+    .sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
+    .setScale(2)
+    .setAlpha(0)
+    .setDepth(950)
+}
+
+// Effect updates
+const updateScene = () => {
+  const timeBasedLight = calculateLightStrength(gameStore.world.date)
+  const mapEffects = mapObject.value?.mapEffects?.reduce(
+    (acc, curr) => ({
+      ...acc,
+      [curr.effect]: curr.strength
+    }),
+    {}
+  ) as { [key: string]: number }
+
+  // Only update effects once mapEffects are loaded
+  if (!mapEffectsReady.value) {
+    if (mapObject.value) {
+      mapEffectsReady.value = true
+    } else {
+      return
+    }
+  }
+
+  const finalEffects =
+    mapEffects && Object.keys(mapEffects).length
+      ? mapEffects
+      : {
+          light: timeBasedLight,
+          rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
+          fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
+        }
+  applyEffects(finalEffects)
+}
+
+const applyEffects = (effectValues: any) => {
+  if (effects.light.value) {
+    const darkness = 1 - (effectValues.light ?? 100) / 100
+    effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
+  }
+
+  if (effects.rain.value) {
+    const strength = effectValues.rain ?? 0
+    strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
+  }
+
+  if (effects.fog.value) {
+    effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
+  }
+}
+
+const calculateLightStrength = (time: Date): number => {
+  const hour = time.getHours()
+  const minute = time.getMinutes()
+
+  if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
+
+  if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
+
+  if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
+
+  const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
+  return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
+}
+
+// Socket and window handlers
+const setupSocketListeners = () => {
  gameStore.connection?.emit('weather', (response: WeatherState) => {
    weatherState.value = response
    updateScene()
@ -191,25 +174,21 @@ const setupSocketListeners = (): void => {
  gameStore.connection?.on('date', updateScene)
 }

-// Watchers
-watch(
-  () => mapStore.mapId,
-  async (newMapId) => {
-    if (newMapId) {
-      await loadMap()
-      updateScene()
-    }
-  }
-)
+const handleResize = () => {
+  if (effects.rain.value) effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
+  if (effects.fog.value) effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
+}

+// Lifecycle
 watch(
  () => mapObject.value,
  () => {
+    mapEffectsReady.value = false
    updateScene()
-  }
+  },
+  { deep: true }
 )

-// Lifecycle hooks
 onMounted(() => window.addEventListener('resize', handleResize))

 onBeforeUnmount(() => {
--- a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue
@ -55,10 +55,12 @@ import type { MapObject } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'

 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
+const mapEditorStore = useMapEditorStore()

 const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)

@ -103,6 +105,10 @@ function refreshObjectList(unsetSelectedMapObject = true) {
    if (unsetSelectedMapObject) {
      assetManagerStore.setSelectedMapObject(null)
    }
+
+    if (mapEditorStore.active) {
+      mapEditorStore.setMapObjectList(response)
+    }
  })
 }

--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@ -26,7 +26,6 @@
 import config from '@/application/config'
 import type { Tile } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
-import { TileStorage } from '@/storage/storages'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
@ -34,7 +33,7 @@ import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'

 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
-const tileStorage = new TileStorage()
+const mapEditorStore = useMapEditorStore()

 const selectedTile = computed(() => assetManagerStore.selectedTile)

@ -56,13 +55,12 @@ watch(selectedTile, (tile: Tile | null) => {
  tileTags.value = tile.tags
 })

-async function deleteTile() {
-  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, async (response: boolean) => {
+function deleteTile() {
+  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, (response: boolean) => {
    if (!response) {
      console.error('Failed to delete tile')
      return
    }
-    await tileStorage.delete(selectedTile.value!.id)
    refreshTileList()
  })
 }
@ -74,6 +72,10 @@ function refreshTileList(unsetSelectedTile = true) {
    if (unsetSelectedTile) {
      assetManagerStore.setSelectedTile(null)
    }
+
+    if (mapEditorStore.active) {
+      mapEditorStore.setTileList(response)
+    }
  })
 }

--- a/src/components/gameMaster/mapEditor/Map.vue
+++ b/src/components/gameMaster/mapEditor/Map.vue
@ -1,20 +0,0 @@
-<template>
-  <MapTiles @tileMap:create="tileMap = $event" />
-  <PlacedMapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
-  <MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
-</template>
-
-<script setup lang="ts">
-import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
-import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
-import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { onMounted, onUnmounted, shallowRef } from 'vue'
-
-const mapEditorStore = useMapEditorStore()
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-
-onUnmounted(() => {
-  mapEditorStore.reset()
-})
-</script>
--- a/src/components/gameMaster/mapEditor/MapEditor.vue
+++ b/src/components/gameMaster/mapEditor/MapEditor.vue
@ -0,0 +1,72 @@
+<template>
+  <MapTiles @tileMap:create="tileMap = $event" />
+  <PlacedMapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+
+  <Toolbar @save="save" @clear="clear" />
+
+  <MapList />
+  <TileList />
+  <ObjectList />
+
+  <MapSettings />
+  <TeleportModal />
+</template>
+
+<script setup lang="ts">
+import { type Map } from '@/application/types'
+import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
+import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
+import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
+import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
+import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
+import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
+import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
+import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
+import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { onUnmounted, shallowRef } from 'vue'
+
+const gameStore = useGameStore()
+const mapEditorStore = useMapEditorStore()
+
+const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+
+function clear() {
+  if (!mapEditorStore.map) return
+
+  // Clear objects, event tiles and tiles
+  mapEditorStore.map.placedMapObjects = []
+  mapEditorStore.map.mapEventTiles = []
+  mapEditorStore.triggerClearTiles()
+}
+
+function save() {
+  if (!mapEditorStore.map) return
+
+  const data = {
+    mapId: mapEditorStore.map.id,
+    name: mapEditorStore.mapSettings.name,
+    width: mapEditorStore.mapSettings.width,
+    height: mapEditorStore.mapSettings.height,
+    tiles: mapEditorStore.map.tiles,
+    pvp: mapEditorStore.map.pvp,
+    mapEffects: mapEditorStore.map.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
+    mapEventTiles: mapEditorStore.map.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
+    placedMapObjects: mapEditorStore.map.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
+  }
+
+  if (mapEditorStore.isSettingsModalShown) {
+    mapEditorStore.toggleSettingsModal()
+  }
+
+  gameStore.connection?.emit('gm:map:update', data, (response: Map) => {
+    mapEditorStore.setMap(response)
+  })
+}
+
+onUnmounted(() => {
+  mapEditorStore.reset()
+})
+</script>
--- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
@ -5,19 +5,17 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { createTileArray, getTile, loadAllTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable'
 import { TileStorage } from '@/storage/storages'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
+import { onBeforeMount, onMounted, onUnmounted, shallowRef, watch } from 'vue'

 import Tileset = Phaser.Tilemaps.Tileset

 const emit = defineEmits(['tileMap:create'])

 const scene = useScene()
-const mapEditor = useMapEditorComposable()
 const mapEditorStore = useMapEditorStore()
 const tileStorage = new TileStorage()

@ -26,8 +24,8 @@ const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()

 function createTileMap() {
  const mapData = new Phaser.Tilemaps.MapData({
-    width: mapEditor.currentMap.value?.width,
-    height: mapEditor.currentMap.value?.height,
+    width: mapEditorStore.map?.width,
+    height: mapEditorStore.map?.height,
    tileWidth: config.tile_size.width,
    tileHeight: config.tile_size.height,
    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
@ -61,7 +59,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
  if (!tileMap.value || !tileLayer.value) return

  // Check if map is set
-  if (!mapEditor.currentMap.value) return
+  if (!mapEditorStore.map) return

  // Check if tool is pencil
  if (mapEditorStore.tool !== 'pencil') return
@ -86,14 +84,14 @@ function pencil(pointer: Phaser.Input.Pointer) {
  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)

  // Adjust mapEditorStore.map.tiles
-  mapEditor.currentMap.value.tiles[tile.y][tile.x] = mapEditor.currentMap.value.tiles[tile.y][tile.x]
+  mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
 }

 function eraser(pointer: Phaser.Input.Pointer) {
  if (!tileMap.value || !tileLayer.value) return

  // Check if map is set
-  if (!mapEditor.currentMap.value) return
+  if (!mapEditorStore.map) return

  // Check if tool is pencil
  if (mapEditorStore.tool !== 'eraser') return
@ -118,14 +116,14 @@ function eraser(pointer: Phaser.Input.Pointer) {
  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')

  // Adjust mapEditorStore.map.tiles
-  mapEditor.currentMap.value.tiles[tile.y][tile.x] = 'blank_tile'
+  mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
 }

 function paint(pointer: Phaser.Input.Pointer) {
  if (!tileMap.value || !tileLayer.value) return

  // Check if map is set
-  if (!mapEditor.currentMap.value) return
+  if (!mapEditorStore.map) return

  // Check if tool is pencil
  if (mapEditorStore.tool !== 'paint') return
@ -146,7 +144,7 @@ function paint(pointer: Phaser.Input.Pointer) {
  setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))

  // Adjust mapEditorStore.map.tiles
-  mapEditor.currentMap.value.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.currentMap.value.tiles)
+  mapEditorStore.map.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile)
 }

 // When alt is pressed, and the pointer is down, select the tile that the pointer is over
@ -154,7 +152,7 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
  if (!tileMap.value || !tileLayer.value) return

  // Check if map is set
-  if (!mapEditor.currentMap.value) return
+  if (!mapEditorStore.map) return

  // Check if tool is pencil
  if (mapEditorStore.tool !== 'pencil') return
@ -176,35 +174,34 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
  if (!tile) return

  // Select the tile
-  mapEditorStore.setSelectedMapObject(mapEditor.currentMap.value.tiles[tile.y][tile.x])
+  mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
 }

 watch(
  () => mapEditorStore.shouldClearTiles,
  (shouldClear) => {
-    if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
+    if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
      const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-      mapEditor.currentMap.value.tiles = blankTiles
+      mapEditorStore.map.tiles = blankTiles
      mapEditorStore.resetClearTilesFlag()
    }
  }
 )

 onMounted(async () => {
-  if (!mapEditor.currentMap.value?.tiles) return
-  console.log(mapEditor.currentMap.value)
+  if (!mapEditorStore.map?.tiles) return

  tileMap.value = createTileMap()
  tileLayer.value = await createTileLayer(tileMap.value)

  // First fill the entire map with blank tiles using current map dimensions
-  const blankTiles = createTileArray(mapEditor.currentMap.value.width, mapEditor.currentMap.value.height, 'blank_tile')
+  const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')

  // Then overlay the map tiles, but only within the current map dimensions
-  const mapTiles = mapEditor.currentMap.value.tiles
-  for (let y = 0; y < mapEditor.currentMap.value.height; y++) {
-    for (let x = 0; x < mapEditor.currentMap.value.width; x++) {
+  const mapTiles = mapEditorStore.map.tiles
+  for (let y = 0; y < mapEditorStore.map.height; y++) {
+    for (let x = 0; x < mapEditorStore.map.width; x++) {
      if (mapTiles[y] && mapTiles[y][x] !== undefined) {
        blankTiles[y][x] = mapTiles[y][x]
      }
--- a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
@ -56,6 +56,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
    id: uuidv4(),
    map: mapEditorStore.map,
    mapObject: mapEditorStore.selectedMapObject,
+    depth: 0,
    isRotated: false,
    positionX: tile.x,
    positionY: tile.y
--- a/src/components/gameMaster/mapEditor/partials/CreateMap.vue
+++ b/src/components/gameMaster/mapEditor/partials/CreateMap.vue
@ -1,8 +1,9 @@
 <template>
-  <Modal :isModalOpen="mapEditorStore.isCreateMapModalShown" @modal:close="() => mapEditorStore.toggleCreateMapModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
+  <Modal :isModalOpen="true" @modal:close="() => mapEditorStore.toggleCreateMapModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
    </template>
+
    <template #modalBody>
      <div class="m-4">
        <form method="post" @submit.prevent="submit" class="inline">
@ -21,7 +22,7 @@
            </div>
            <div class="form-field-full">
              <label for="name">PVP enabled</label>
-              <select class="input-field" v-model="pvp" name="pvp" id="pvp">
+              <select class="input-field" name="pvp" id="pvp">
                <option :value="false">No</option>
                <option :value="true">Yes</option>
              </select>
@ -37,48 +38,21 @@
 <script setup lang="ts">
 import type { Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { ref } from 'vue'

-const emit = defineEmits(['create'])
-
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
-const mapStorage = new MapStorage()

 const name = ref('')
 const width = ref(0)
 const height = ref(0)
-const pvp = ref(false)

-async function submit() {
-  gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
-    if (!response) {
-      gameStore.addNotification({
-        title: 'Error',
-        message: 'Failed to create map.'
-      })
-      return
-    }
-
-    // Reset form
-    name.value = ''
-    width.value = 0
-    height.value = 0
-    pvp.value = false
-
-    // Add map to storage
-
-    console.log(response)
-    await mapStorage.add(response)
-
-    // Let list know to fetch new maps
-    emit('create')
+function submit() {
+  gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
+    mapEditorStore.setMapList(response)
  })
-
-  // Close modal
  mapEditorStore.toggleCreateMapModal()
 }
 </script>
--- a/src/components/gameMaster/mapEditor/partials/MapList.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapList.vue
@ -1,77 +1,61 @@
 <template>
+  <CreateMap v-if="mapEditorStore.isCreateMapModalShown" />
  <Modal :is-modal-open="mapEditorStore.isMapListModalShown" @modal:close="() => mapEditorStore.toggleMapListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="text-lg text-white">Maps</h3>
    </template>
    <template #modalBody>
-      <div class="my-4 mx-auto h-full">
+      <div class="my-4 mx-auto">
        <div class="text-center mb-4 px-2 flex gap-2.5">
          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => mapEditorStore.toggleCreateMapModal()">New</button>
        </div>
-        <div class="overflow-y-auto h-[calc(100%-20px)]">
-          <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
-            <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
-            <div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
-              <span>{{ map.name }}</span>
-              <span class="ml-auto gap-1 flex">
-                <button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteMap(map.id)">x</button>
-              </span>
-            </div>
-            <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+        <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapEditorStore.mapList" :key="map.id">
+          <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
+          <div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
+            <span>{{ map.name }}</span>
+            <span class="ml-auto gap-1 flex">
+              <button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteMap(map.id)">x</button>
+            </span>
          </div>
+          <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
        </div>
      </div>
    </template>
  </Modal>
-
-  <CreateMap @create="fetchMaps" v-if="mapEditorStore.isMapListModalShown" />
 </template>

 <script setup lang="ts">
 import type { Map, UUID } from '@/application/types'
 import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'

 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()

-const mapEditor = useMapEditorComposable()
-const mapStorage = new MapStorage()
-const mapList = ref<Map[]>([])
-
 onMounted(async () => {
-  await fetchMaps()
+  fetchMaps()
 })

-async function fetchMaps() {
-  mapList.value = await mapStorage.getAll()
+function fetchMaps() {
+  gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
+    mapEditorStore.setMapList(response)
+  })
 }

 function loadMap(id: UUID) {
  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
-    mapEditor.loadMap(response)
+    mapEditorStore.setMap(response)
  })
  mapEditorStore.toggleMapListModal()
 }

-async function deleteMap(id: UUID) {
-  gameStore.connection?.emit('gm:map:delete', { mapId: id }, async (response: boolean) => {
-    if (!response) {
-      gameStore.addNotification({
-        title: 'Error',
-        message: 'Failed to delete map.'
-      })
-      return
-    }
-
-    await mapStorage.delete(id)
-    await fetchMaps()
+function deleteMap(id: UUID) {
+  gameStore.connection?.emit('gm:map:delete', { mapId: id }, () => {
+    fetchMaps()
  })
 }
 </script>
--- a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue
@ -44,26 +44,23 @@
 import config from '@/application/config'
 import type { MapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { liveQuery } from 'dexie'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'

-const mapObjectStorage = new MapObjectStorage()
+const gameStore = useGameStore()
 const isModalOpen = ref(false)
 const mapEditorStore = useMapEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
-const mapObjectList = ref<MapObject[]>([])

 const uniqueTags = computed(() => {
-  const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
+  const allTags = mapEditorStore.mapObjectList.flatMap((obj) => obj.tags || [])
  return Array.from(new Set(allTags))
 })

 const filteredMapObjects = computed(() => {
-  return mapObjectList.value.filter((object) => {
+  return mapEditorStore.mapObjectList.filter((object) => {
    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
    return matchesSearch && matchesTags
@ -78,23 +75,10 @@ const toggleTag = (tag: string) => {
  }
 }

-let subscription: any = null
-
-onMounted(() => {
+onMounted(async () => {
  isModalOpen.value = true
-  subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
-    next: (result) => {
-      mapObjectList.value = result
-    },
-    error: (error) => {
-      console.error('Failed to fetch tiles:', error)
-    }
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
+    mapEditorStore.setMapObjectList(response)
  })
 })
-
-onUnmounted(() => {
-  if (subscription) {
-    subscription.unsubscribe()
-  }
-})
 </script>
--- a/src/components/gameMaster/mapEditor/partials/MapSettings.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapSettings.vue
@ -47,53 +47,60 @@
 </template>

 <script setup lang="ts">
-import type { UUID } from '@/application/types'
-import { uuidv4 } from '@/application/utilities'
 import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { ref, watch } from 'vue'

-const mapEditor = useMapEditorComposable()
 const mapEditorStore = useMapEditorStore()
 const screen = ref('settings')

-const name = ref(mapEditor.currentMap.value?.name)
-const width = ref(mapEditor.currentMap.value?.width)
-const height = ref(mapEditor.currentMap.value?.height)
-const pvp = ref(mapEditor.currentMap.value?.pvp)
-const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
+mapEditorStore.setMapName(mapEditorStore.map?.name)
+mapEditorStore.setMapWidth(mapEditorStore.map?.width)
+mapEditorStore.setMapHeight(mapEditorStore.map?.height)
+mapEditorStore.setMapPvp(mapEditorStore.map?.pvp)
+mapEditorStore.setMapEffects(mapEditorStore.map?.mapEffects)
+
+const name = ref(mapEditorStore.mapSettings?.name)
+const width = ref(mapEditorStore.mapSettings?.width)
+const height = ref(mapEditorStore.mapSettings?.height)
+const pvp = ref(mapEditorStore.mapSettings?.pvp)
+const mapEffects = ref(mapEditorStore.mapSettings?.mapEffects || [])

 watch(name, (value) => {
-  mapEditor.updateProperty('name', value!)
+  mapEditorStore.setMapName(value)
 })

 watch(width, (value) => {
-  mapEditor.updateProperty('width', value!)
+  mapEditorStore.setMapWidth(value)
 })

 watch(height, (value) => {
-  mapEditor.updateProperty('height', value!)
+  mapEditorStore.setMapHeight(value)
 })

 watch(pvp, (value) => {
-  mapEditor.updateProperty('pvp', value!)
+  mapEditorStore.setMapPvp(value)
 })

-watch(mapEffects, (value) => {
-  mapEditor.updateProperty('mapEffects', value!)
-})
+watch(
+  mapEffects,
+  (value) => {
+    mapEditorStore.setMapEffects(value)
+  },
+  { deep: true }
+)

 const addEffect = () => {
  mapEffects.value.push({
-    id: uuidv4() as UUID, // Simple unique id generation
-    map: mapEditor.currentMap.value!,
+    id: Date.now().toString(), // Simple unique id generation
+    mapId: mapEditorStore.map?.id,
+    map: mapEditorStore.map,
    effect: '',
    strength: 1
  })
 }

-const removeEffect = (index: number) => {
+const removeEffect = (index) => {
  mapEffects.value.splice(index, 1)
 }
 </script>
--- a/src/components/gameMaster/mapEditor/partials/TileList.vue
+++ b/src/components/gameMaster/mapEditor/partials/TileList.vue
@ -84,27 +84,26 @@
 import config from '@/application/config'
 import type { Tile } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { TileStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { liveQuery } from 'dexie'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'

-const tileStorage = new TileStorage()
+const gameStore = useGameStore()
+const isModalOpen = ref(false)
 const mapEditorStore = useMapEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
 const tileCategories = ref<Map<string, string>>(new Map())
 const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
-const tiles = ref<Tile[]>([])

 const uniqueTags = computed(() => {
-  const allTags = tiles.value.flatMap((tile) => tile.tags || [])
+  const allTags = mapEditorStore.tileList.flatMap((tile) => tile.tags || [])
  return Array.from(new Set(allTags))
 })

 const groupedTiles = computed(() => {
  const groups: { parent: Tile; children: Tile[] }[] = []
-  const filteredTiles = tiles.value.filter((tile) => {
+  const filteredTiles = mapEditorStore.tileList.filter((tile) => {
    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
    return matchesSearch && matchesTags
@ -178,7 +177,6 @@ function getDominantColor(imageData: ImageData) {
    g = 0,
    b = 0,
    total = 0
-
  for (let i = 0; i < imageData.data.length; i += 4) {
    if (imageData.data[i + 3] > 0) {
      // Only consider non-transparent pixels
@ -188,7 +186,6 @@ function getDominantColor(imageData: ImageData) {
      total++
    }
  }
-
  return {
    r: Math.round(r / total),
    g: Math.round(g / total),
@ -229,22 +226,11 @@ function isActiveTile(tile: Tile): boolean {
  return mapEditorStore.selectedTile === tile.id
 }

-let subscription: any = null
-
-onMounted(() => {
-  subscription = liveQuery(() => tileStorage.liveQuery()).subscribe({
-    next: (result) => {
-      tiles.value = result
-    },
-    error: (error) => {
-      console.error('Failed to fetch tiles:', error)
-    }
+onMounted(async () => {
+  isModalOpen.value = true
+  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
+    mapEditorStore.setTileList(response)
+    response.forEach((tile) => processTile(tile))
  })
 })
-
-onUnmounted(() => {
-  if (subscription) {
-    subscription.unsubscribe()
-  }
-})
 </script>
--- a/src/components/gameMaster/mapEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
@ -1,7 +1,7 @@
 <template>
  <div class="flex justify-center p-5">
    <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
-      <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
+      <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditorStore.map">
        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'move' }" @click="handleClick('move')">
          <img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'move' }">(M)</span>
        </button>
@ -68,13 +68,13 @@

        <div class="w-px bg-cyan"></div>

-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="mapEditorStore.map"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
      </div>

      <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
        <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleMapListModal()">Load</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditorStore.map">Save</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditorStore.map">Clear</button>
        <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button>
      </div>
    </div>
@ -82,12 +82,10 @@
 </template>

 <script setup lang="ts">
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { onClickOutside } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, ref } from 'vue'

-const mapEditor = useMapEditorComposable()
 const mapEditorStore = useMapEditorStore()

 const emit = defineEmits(['save', 'clear'])
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@ -1,5 +1,8 @@
 <template>
  <div class="relative max-lg:h-dvh flex flex-row-reverse">
+    <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
+      <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
+    </div>
    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
    <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>
--- a/src/components/screens/Game.vue
+++ b/src/components/screens/Game.vue
@ -1,5 +1,8 @@
 <template>
  <div class="flex justify-center items-center h-dvh relative">
+    <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
+      <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
+    </div>
    <Game :config="gameConfig" @create="createGame">
      <Scene name="main" @preload="preloadScene" @create="createScene">
        <Menu />
--- a/src/components/screens/Loading.vue
+++ b/src/components/screens/Loading.vue
@ -15,8 +15,11 @@
 </template>

 <script setup lang="ts" async>
-import { downloadCache } from '@/application/utilities'
+import config from '@/application/config'
+import type { HttpResponse, MapObject } from '@/application/types'
+import type { BaseStorage } from '@/storage/baseStorage'
 import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
+// import type { Map } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'

@ -25,13 +28,32 @@ const gameStore = useGameStore()
 const totalItems = ref(0)
 const currentItem = ref(0)

+async function downloadAndStore<T extends { id: string }>(endpoint: string, storage: BaseStorage<T>) {
+  const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
+  const response = (await request.json()) as HttpResponse<T[]>
+
+  if (!response.success) {
+    console.error(`Failed to download ${endpoint}:`, response.message)
+    return
+  }
+
+  const items = response.data ?? []
+  for (const item of items) {
+    await storage.add(item)
+  }
+}
+
+const tileStorage = new TileStorage()
+const mapStorage = new MapStorage()
+const mapObjectStorage = new MapObjectStorage()
+
 Promise.all([
-  downloadCache('tiles', new TileStorage()),
-  downloadCache('maps', new MapStorage()),
-  downloadCache('map_objects', new MapObjectStorage()),
-  downloadCache('sprites', new SpriteStorage()),
-  downloadCache('character_types', new CharacterTypeStorage()),
-  downloadCache('character_hair', new CharacterHairStorage())
+  downloadAndStore('tiles', tileStorage),
+  downloadAndStore('maps', mapStorage),
+  downloadAndStore('map_objects', mapObjectStorage),
+  downloadAndStore('sprites', new SpriteStorage()),
+  downloadAndStore('character_types', new CharacterTypeStorage()),
+  downloadAndStore('character_hair', new CharacterHairStorage())
 ]).then(() => {
  gameStore.game.isLoaded = true
 })
--- a/src/components/screens/MapEditor.vue
+++ b/src/components/screens/MapEditor.vue
@ -1,17 +1,9 @@
 <template>
  <div class="flex justify-center items-center h-dvh relative">
    <Game :config="gameConfig" @create="createGame">
-      <Scene name="main" @preload="preloadScene">
-        <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
-        <div v-else>
-          <Map :key="mapEditor.currentMap.value?.id" />
-          <Toolbar @save="save" @clear="clear" />
-          <MapList />
-          <TileList />
-          <ObjectList />
-          <MapSettings />
-          <TeleportModal />
-        </div>
+      <Scene name="main" @preload="preloadScene" @create="createScene">
+        <MapEditor :key="JSON.stringify(`${mapEditorStore.map?.id}_${mapEditorStore.map?.createdAt}_${mapEditorStore.map?.updatedAt}`)" v-if="isLoaded" />
+        <div v-else class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
      </Scene>
    </Game>
  </div>
@ -20,24 +12,13 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import type { Map as MapT } from '@/application/types'
-import Map from '@/components/gameMaster/mapEditor/Map.vue'
-import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
-import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
-import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
-import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
-import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
-import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
+import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
 import { loadAllTilesIntoScene } from '@/composables/mapComposable'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { Game, Scene } from 'phavuer'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'

-const mapStorage = new MapStorage()
-const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()

@ -56,6 +37,15 @@ const createGame = (game: Phaser.Game) => {
  addEventListener('resize', () => {
    game.scale.resize(window.innerWidth, window.innerHeight)
  })
+
+  // We don't support canvas mode, only WebGL
+  if (game.renderer.type === Phaser.CANVAS) {
+    gameStore.addNotification({
+      title: 'Warning',
+      message: 'Your browser does not support WebGL. Please use a modern browser like Chrome, Firefox, or Edge.'
+    })
+    gameStore.disconnectSocket()
+  }
 }

 const preloadScene = async (scene: Phaser.Scene) => {
@ -65,10 +55,8 @@ const preloadScene = async (scene: Phaser.Scene) => {
  scene.load.image('blank_tile', '/assets/map/blank_tile.png')
  scene.load.image('waypoint', '/assets/waypoint.png')

-  // Get all tiles from IndexedDB and load them into the scene
  await loadAllTilesIntoScene(scene)

-  // Wait for all assets to be loaded before continuing
  await new Promise<void>((resolve) => {
    scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
      resolve()
@ -77,35 +65,5 @@ const preloadScene = async (scene: Phaser.Scene) => {
  })
 }

-function save() {
-  if (!mapEditor.currentMap.value) return
-
-  const data = {
-    mapId: mapEditor.currentMap.value.id,
-    name: mapEditor.currentMap.value.name,
-    width: mapEditor.currentMap.value.width,
-    height: mapEditor.currentMap.value.height,
-    tiles: mapEditor.currentMap.value.tiles,
-    pvp: mapEditor.currentMap.value.pvp,
-    mapEffects: mapEditor.currentMap.value.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
-    mapEventTiles: mapEditor.currentMap.value.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
-    placedMapObjects: mapEditor.currentMap.value.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
-  }
-
-  if (mapEditorStore.isSettingsModalShown) {
-    mapEditorStore.toggleSettingsModal()
-  }
-
-  gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
-    mapStorage.update(response.id, response)
-  })
-}
-
-function clear() {
-  if (!mapEditor.currentMap.value) return
-
-  // Clear placed objects, event tiles and tiles
-  mapEditor.clearMap()
-  mapEditorStore.triggerClearTiles()
-}
+const createScene = async (scene: Phaser.Scene) => {}
 </script>
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@ -1,5 +1,5 @@
 <template>
-  <Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification!.id as string)">
+  <Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
    <template #modalHeader v-if="notification.title">
      <h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
    </template>
--- a/src/composables/useMapEditorComposable.ts
+++ b/src/composables/useMapEditorComposable.ts
@ -1,31 +0,0 @@
-import type { Map } from '@/application/types'
-import { ref } from 'vue'
-
-const currentMap = ref<Map | null>(null)
-
-export function useMapEditorComposable() {
-  const loadMap = (map: Map) => {
-    currentMap.value = map
-  }
-
-  const updateProperty = <K extends keyof Map>(property: K, value: Map[K]) => {
-    if (currentMap.value) {
-      currentMap.value[property] = value
-    }
-  }
-
-  const clearMap = () => {
-    if (!currentMap.value) return
-
-    currentMap.value.placedMapObjects = []
-    currentMap.value.mapEventTiles = []
-    currentMap.value.tiles = []
-  }
-
-  return {
-    currentMap,
-    loadMap,
-    updateProperty,
-    clearMap
-  }
-}
--- a/src/storage/baseStorage.ts
+++ b/src/storage/baseStorage.ts
@ -23,22 +23,6 @@ export class BaseStorage<T extends { id: string }> {
    }
  }

-  async update(id: string, item: Partial<T>) {
-    try {
-      await this.dexie.table(this.tableName).update(id, item)
-    } catch (error) {
-      console.error(`Failed to update ${this.tableName} ${id}:`, error)
-    }
-  }
-
-  async delete(id: string) {
-    try {
-      await this.dexie.table(this.tableName).delete(id)
-    } catch (error) {
-      console.error(`Failed to delete ${this.tableName} ${id}:`, error)
-    }
-  }
-
  async get(id: string): Promise<T | null> {
    try {
      const item = await this.dexie.table(this.tableName).get(id)
@ -68,10 +52,6 @@ export class BaseStorage<T extends { id: string }> {
    }
  }

-  liveQuery() {
-    return this.dexie.table(this.tableName).toArray()
-  }
-
  async reset() {
    try {
      await this.dexie.table(this.tableName).clear()
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@ -15,10 +15,9 @@ export const useGameStore = defineStore('game', {
      character: null as Character | null,
      world: {
        date: new Date(),
-        weatherState: {
-          rainPercentage: 0,
-          fogDensity: 0
-        }
+        isRainEnabled: false,
+        isFogEnabled: false,
+        fogDensity: 0
      } as WorldSettings,
      game: {
        isLoading: false,
@ -120,8 +119,9 @@ export const useGameStore = defineStore('game', {
      this.uiSettings.isGmPanelOpen = false

      this.world.date = new Date()
-      this.world.weatherState.rainPercentage = 0
-      this.world.weatherState.fogDensity = 0
+      this.world.isRainEnabled = false
+      this.world.isFogEnabled = false
+      this.world.fogDensity = 0
    }
  }
 })
--- a/src/stores/mapEditorStore.ts
+++ b/src/stores/mapEditorStore.ts
@ -1,8 +1,9 @@
-import type { MapObject } from '@/application/types'
+import type { Map, MapEffect, MapObject, PlacedMapObject, Tile } from '@/application/types'
+import { useGameStore } from '@/stores/gameStore'
 import { defineStore } from 'pinia'

 export type TeleportSettings = {
-  toMapId: string
+  toMap: Map | null
  toPositionX: number
  toPositionY: number
  toRotation: number
@ -12,9 +13,13 @@ export const useMapEditorStore = defineStore('mapEditor', {
  state: () => {
    return {
      active: false,
+      map: null as Map | null,
      tool: 'move',
      drawMode: 'tile',
      eraserMode: 'tile',
+      mapList: [] as Map[],
+      tileList: [] as Tile[],
+      mapObjectList: [] as MapObject[],
      selectedTile: '',
      selectedMapObject: null as MapObject | null,
      isTileListModalShown: false,
@ -23,8 +28,15 @@ export const useMapEditorStore = defineStore('mapEditor', {
      isCreateMapModalShown: false,
      isSettingsModalShown: false,
      shouldClearTiles: false,
+      mapSettings: {
+        name: '',
+        width: 0,
+        height: 0,
+        pvp: false,
+        mapEffects: [] as MapEffect[]
+      },
      teleportSettings: {
-        toMapId: '',
+        toMap: null,
        toPositionX: 0,
        toPositionY: 0,
        toRotation: 0
@ -33,9 +45,31 @@ export const useMapEditorStore = defineStore('mapEditor', {
  },
  actions: {
    toggleActive() {
+      const gameStore = useGameStore()
+      if (!this.active) gameStore.connection?.emit('map:character:leave')
      if (this.active) this.reset()
      this.active = !this.active
    },
+    setMap(map: Map | null) {
+      this.map = map
+    },
+    setMapName(name: string) {
+      this.mapSettings.name = name
+    },
+    setMapWidth(width: number) {
+      this.mapSettings.width = width
+    },
+    setMapHeight(height: number) {
+      this.mapSettings.height = height
+    },
+    setMapPvp(pvp: boolean) {
+      if (!this.map) return
+      this.map.pvp = pvp
+    },
+    setMapEffects(mapEffects: MapEffect[]) {
+      if (!this.map) return
+      this.mapSettings.mapEffects = mapEffects
+    },
    setTool(tool: string) {
      this.tool = tool
    },
@ -45,6 +79,15 @@ export const useMapEditorStore = defineStore('mapEditor', {
    setEraserMode(mode: string) {
      this.eraserMode = mode
    },
+    setMapList(maps: Map[]) {
+      this.mapList = maps
+    },
+    setTileList(tiles: Tile[]) {
+      this.tileList = tiles
+    },
+    setMapObjectList(objects: MapObject[]) {
+      this.mapObjectList = objects
+    },
    setSelectedTile(tile: string) {
      this.selectedTile = tile
    },
@ -70,7 +113,11 @@ export const useMapEditorStore = defineStore('mapEditor', {
    resetClearTilesFlag() {
      this.shouldClearTiles = false
    },
-    reset() {
+    reset(resetMap = false) {
+      if (resetMap) this.map = null
+      this.mapList = []
+      this.tileList = []
+      this.mapObjectList = []
      this.tool = 'move'
      this.drawMode = 'tile'
      this.selectedTile = ''