Finish improving effects component

# Conflicts:
#	src/components/game/map/Effects.vue

.eslintrc.cjs

@@ -1,13 +0,0 @@
-/* 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'
-  }
-}

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "Vue.volar",
-    "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]
 }

package.json

@@ -11,7 +11,6 @@
     "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": {
@@ -28,18 +27,13 @@
   },
   "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",

src/App.vue

@@ -18,7 +18,7 @@ import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
@@ -41,9 +41,7 @@ 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
@@ -57,7 +55,9 @@ addEventListener('keydown', (event) => {
   if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm
 
   // Check if no input is active or focus is on an input
-  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') return
+  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
+    return
+  }
 
   if (event.key === 'G') {
     gameStore.toggleGmPanel()

src/application/types.ts

@@ -242,15 +242,11 @@ export type Chat = {
 
 export type WorldSettings = {
   date: Date
-  isRainEnabled: boolean
-  isFogEnabled: boolean
-  fogDensity: number
+  weatherState: WeatherState
 }
 
 export type WeatherState = {
-  isRainEnabled: boolean
   rainPercentage: number
-  isFogEnabled: boolean
   fogDensity: number
 }
 

src/application/utilities.ts

@@ -1,3 +1,7 @@
+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))
 }
@@ -23,3 +27,26 @@ 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)
+  }
+}

src/components/Effects.vue

@@ -1,179 +0,0 @@
-<template>
-  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
-</template>
-
-<script setup lang="ts">
-import type { WeatherState } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
-import { useMapStore } from '@/stores/mapStore'
-import { Scene } from 'phavuer'
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-// Constants
-const LIGHT_CONFIG = {
-  SUNRISE_HOUR: 6,
-  SUNSET_HOUR: 20,
-  DAY_STRENGTH: 100,
-  NIGHT_STRENGTH: 30
-}
-
-// Stores and refs
-const gameStore = useGameStore()
-const mapStore = useMapStore()
-const sceneRef = ref<Phaser.Scene | null>(null)
-const mapEffectsReady = ref(false)
-
-// 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
-})
-
-// 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) => {
-  sceneRef.value = scene
-  initializeEffects(scene)
-  setupSocketListeners()
-}
-
-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 = mapStore.map?.mapEffects?.reduce(
-    (acc, curr) => ({
-      ...acc,
-      [curr.effect]: curr.strength
-    }),
-    {}
-  ) as { [key: string]: number }
-
-  // Only update effects once mapEffects are loaded
-  if (!mapEffectsReady.value) {
-    if (mapEffects && Object.keys(mapEffects).length) {
-      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()
-  })
-
-  gameStore.connection?.on('weather', (data: WeatherState) => {
-    weatherState.value = data
-    updateScene()
-  })
-
-  gameStore.connection?.on('date', 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(
-  () => mapStore.map,
-  () => {
-    mapEffectsReady.value = false
-    updateScene()
-  },
-  { deep: true }
-)
-
-onMounted(() => window.addEventListener('resize', handleResize))
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
-  if (sceneRef.value) sceneRef.value.scene.remove('effects')
-  gameStore.connection?.off('weather')
-})
-</script>

src/components/game/character/Character.vue

@@ -2,16 +2,13 @@
   <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
   <Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
   <Container ref="charContainer" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY">
-    <!--    <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
-    <!--    <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
     <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
 
 <script lang="ts" setup>
 import config from '@/application/config'
-import { type MapCharacter, type Sprite as SpriteT } from '@/application/types'
-import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
+import { type MapCharacter } from '@/application/types'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
 import Healthbar from '@/components/game/character/partials/Healthbar.vue'
 import { loadSpriteTextures } from '@/composables/gameComposable'
@@ -22,8 +19,6 @@ import { useMapStore } from '@/stores/mapStore'
 import { Container, refObj, Sprite, useScene } from 'phavuer'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-// import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
-
 enum Direction {
   POSITIVE,
   NEGATIVE,
@@ -151,21 +146,19 @@ watch(
   }
 )
 
-const characterTypeStorage = new CharacterTypeStorage()
-characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => {
-  console.log(spriteId)
-  charSpriteId.value = spriteId
-  loadSpriteTextures(scene, spriteId)
-    .then(() => {
-      charSprite.value!.setTexture(charTexture.value)
-      charSprite.value!.setFlipX(isFlippedX.value)
-    })
-    .catch((error) => {
-      console.error('Error loading texture:', error)
-    })
-})
+onMounted(async () => {
+  const characterTypeStorage = new CharacterTypeStorage()
+
+  const spriteId = await characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!)
+  if (!spriteId) return
+
+  charSpriteId.value = spriteId
+
+  await loadSpriteTextures(scene, spriteId)
+
+  charSprite.value!.setTexture(charTexture.value)
+  charSprite.value!.setFlipX(isFlippedX.value)
 
-onMounted(() => {
   charContainer.value!.setName(props.mapCharacter.character!.name)
 
   if (props.mapCharacter.character.id === gameStore.character!.id) {

src/components/game/gui/UserPanel.vue

@@ -30,10 +30,10 @@
 </template>
 
 <script setup lang="ts">
-import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'
-import Equipment from '@/components/gui/partials/Equipment.vue'
-import Inventory from '@/components/gui/partials/Inventory.vue'
-import Settings from '@/components/gui/partials/Settings.vue'
+import CharacterScreen from '@/components/game/gui/partials/CharacterScreen.vue'
+import Equipment from '@/components/game/gui/partials/Equipment.vue'
+import Inventory from '@/components/game/gui/partials/Inventory.vue'
+import Settings from '@/components/game/gui/partials/Settings.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
 

src/components/game/gui/partials/Settings.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
+import CharacterSettings from '@/components/game/gui/partials/settings/CharacterSettings.vue'
 import { ref } from 'vue'
 
 let settingCategory = ref('character')

src/components/game/map/Effects.vue

@@ -0,0 +1,220 @@
+<template>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
+</template>
+
+<script setup lang="ts">
+import type { Map, WeatherState } from '@/application/types'
+import { MapStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
+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 = {
+  SUNRISE_HOUR: 6,
+  SUNSET_HOUR: 20,
+  DAY_STRENGTH: 100,
+  NIGHT_STRENGTH: 30,
+  TRANSITION_HOURS: 3
+}
+
+// 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
+const gameStore = useGameStore()
+const mapStore = useMapStore()
+const mapStorage = new MapStorage()
+
+// State
+const sceneRef = ref<Phaser.Scene | null>(null)
+const mapObject = ref<Map | null>(null)
+const weatherState = ref<WeatherState>({
+  rainPercentage: 0,
+  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.load.image('raindrop', 'assets/raindrop.png')
+  scene.load.image('fog', 'assets/fog.png')
+}
+
+const createScene = (scene: Phaser.Scene): void => {
+  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> => {
+  if (!mapStore.mapId) return
+  mapObject.value = await mapStorage.get(mapStore.mapId)
+}
+
+// Socket handlers
+const setupSocketListeners = (): void => {
+  gameStore.connection?.emit('weather', (response: WeatherState) => {
+    weatherState.value = response
+    updateScene()
+  })
+
+  gameStore.connection?.on('weather', (data: WeatherState) => {
+    weatherState.value = data
+    updateScene()
+  })
+
+  gameStore.connection?.on('date', updateScene)
+}
+
+// Watchers
+watch(
+  () => mapStore.mapId,
+  async (newMapId) => {
+    if (newMapId) {
+      await loadMap()
+      updateScene()
+    }
+  }
+)
+
+watch(
+  () => mapObject.value,
+  () => {
+    updateScene()
+  }
+)
+
+// Lifecycle hooks
+onMounted(() => window.addEventListener('resize', handleResize))
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (sceneRef.value) sceneRef.value.scene.remove('effects')
+  gameStore.connection?.off('weather')
+})
+</script>

src/components/game/map/Map.vue

@@ -1,14 +1,14 @@
 <template>
   <MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
-  <!--  <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />-->
-  <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <PlacedMapObjects v-if="tileMap" :key="mapStore.mapId" :tilemap="tileMap" />
+  <Characters v-if="tileMap && mapStore.characters" :tilemap="tileMap" />
 </template>
 
 <script setup lang="ts">
 import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
-import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
+import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { onUnmounted, shallowRef } from 'vue'
@@ -18,14 +18,6 @@ const mapStore = useMapStore()
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 
-onUnmounted(() => {
-  mapStore.reset()
-  gameStore.connection?.off('map:character:teleport')
-  gameStore.connection?.off('map:character:join')
-  gameStore.connection?.off('map:character:leave')
-  gameStore.connection?.off('map:character:move')
-})
-
 // Event listeners
 gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
   mapStore.setMapId(data.mapId)
@@ -43,4 +35,12 @@ gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
 gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
   mapStore.updateCharacterPosition(data)
 })
+
+onUnmounted(() => {
+  mapStore.reset()
+  gameStore.connection?.off('map:character:teleport')
+  gameStore.connection?.off('map:character:join')
+  gameStore.connection?.off('map:character:leave')
+  gameStore.connection?.off('map:character:move')
+})
 </script>

src/components/game/map/MapTiles.vue

@@ -11,7 +11,7 @@ import { FlattenMapArray, loadMapTilesIntoScene, setLayerTiles } from '@/composa
 import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
-import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import { onBeforeUnmount, shallowRef } from 'vue'
 
 import Tileset = Phaser.Tilemaps.Tileset
 
@@ -41,7 +41,7 @@ function createTileMap(mapData: any) {
 function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
   const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
 
-  const tilesetImages = tilesArray.map((tile: any, index: number) => {
+  const tilesetImages = tilesArray.map((tile: string, index: number) => {
     return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
   })
 
@@ -55,16 +55,14 @@ function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any)
   return layer
 }
 
-onMounted(() => {
-  loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
-    .then(() => mapStorage.get(mapStore.mapId))
-    .then((mapData) => {
-      tileMap.value = createTileMap(mapData)
-      tileLayer.value = createTileLayer(tileMap.value, mapData)
-      setLayerTiles(tileMap.value, tileLayer.value, mapData?.tiles)
-    })
-    .catch((error) => console.error('Failed to initialize map:', error))
-})
+loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
+  .then(() => mapStorage.get(mapStore.mapId))
+  .then((mapData) => {
+    tileMap.value = createTileMap(mapData)
+    tileLayer.value = createTileLayer(tileMap.value, mapData)
+    setLayerTiles(tileMap.value, tileLayer.value, mapData?.tiles)
+  })
+  .catch((error) => console.error('Failed to initialize map:', error))
 
 onBeforeUnmount(() => {
   if (!tileMap.value) return

src/components/game/map/PlacedMapObjects.vue

@@ -1,14 +1,28 @@
 <template>
-  <PlacedMapObject v-for="placedMapObject in mapStore.map?.placedMapObjects" :tilemap="tilemap" :placedMapObject />
+  <PlacedMapObject v-for="placedMapObject in items" :tilemap="tilemap" :placedMapObject />
 </template>
 
 <script setup lang="ts">
+import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
 import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
+import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
-
-const mapStore = useMapStore()
+import { onMounted, ref } from 'vue'
 
 defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
 }>()
+
+const mapStore = useMapStore()
+const mapStorage = new MapStorage()
+const items = ref<PlacedMapObjectT[]>([])
+
+onMounted(async () => {
+  if (!mapStore.mapId) return
+
+  const map = await mapStorage.get(mapStore.mapId)
+  if (!map) return
+
+  items.value = map.placedMapObjects
+})
 </script>

src/components/game/map/partials/PlacedMapObject.vue

@@ -1,5 +1,5 @@
 <template>
-  <Image v-if="gameStore.isAssetLoaded(props.placedMapObject.mapObject)" v-bind="imageProps" />
+  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">
@@ -8,7 +8,7 @@ import { loadTexture } from '@/composables/gameComposable'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
@@ -38,4 +38,6 @@ loadTexture(scene, {
 } as TextureData).catch((error) => {
   console.error('Error loading texture:', error)
 })
+
+onMounted(async () => {})
 </script>

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue

@@ -9,7 +9,7 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a
         v-for="{ data: characterHair } in list"
@@ -93,7 +93,6 @@ function toTop() {
 
 onMounted(() => {
   gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
-    console.log(response)
     assetManagerStore.setCharacterHairList(response)
   })
 })

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue

@@ -9,7 +9,7 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a
         v-for="{ data: characterType } in list"
@@ -93,7 +93,6 @@ function toTop() {
 
 onMounted(() => {
   gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
-    console.log(response)
     assetManagerStore.setCharacterTypeList(response)
   })
 })

src/components/gameMaster/assetManager/partials/item/itemList.vue

@@ -9,7 +9,7 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue

@@ -55,12 +55,10 @@ 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)
 
@@ -105,10 +103,6 @@ function refreshObjectList(unsetSelectedMapObject = true) {
     if (unsetSelectedMapObject) {
       assetManagerStore.setSelectedMapObject(null)
     }
-
-    if (mapEditorStore.active) {
-      mapEditorStore.setMapObjectList(response)
-    }
   })
 }
 

src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue

@@ -8,7 +8,7 @@
       </svg>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: mapObject } in list" :key="mapObject.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedMapObject?.id === mapObject.id }" @click="assetManagerStore.setSelectedMapObject(mapObject as MapObject)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue

@@ -7,7 +7,7 @@
       </svg>
     </button>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/assetManager/partials/tile/TileDetails.vue

@@ -26,6 +26,7 @@
 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'
@@ -33,7 +34,7 @@ import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
-const mapEditorStore = useMapEditorStore()
+const tileStorage = new TileStorage()
 
 const selectedTile = computed(() => assetManagerStore.selectedTile)
 
@@ -55,12 +56,13 @@ watch(selectedTile, (tile: Tile | null) => {
   tileTags.value = tile.tags
 })
 
-function deleteTile() {
-  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, (response: boolean) => {
+async function deleteTile() {
+  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, async (response: boolean) => {
     if (!response) {
       console.error('Failed to delete tile')
       return
     }
+    await tileStorage.delete(selectedTile.value!.id)
     refreshTileList()
   })
 }
@@ -72,10 +74,6 @@ function refreshTileList(unsetSelectedTile = true) {
     if (unsetSelectedTile) {
       assetManagerStore.setSelectedTile(null)
     }
-
-    if (mapEditorStore.active) {
-      mapEditorStore.setTileList(response)
-    }
   })
 }
 

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -8,7 +8,7 @@
       </svg>
     </label>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
         <div class="flex items-center gap-2.5">

src/components/gameMaster/mapEditor/Map.vue

@@ -0,0 +1,20 @@
+<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>

src/components/gameMaster/mapEditor/MapEditor.vue

@@ -1,75 +0,0 @@
-<template>
-  <MapTiles @tileMap:create="tileMap = $event" />
-  <MapObjects 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 MapObjects 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'
-// Components
-import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
-import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { onUnmounted, ref, 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 })) ?? []
-  }
-
-  console.log(data.mapEventTiles)
-
-  if (mapEditorStore.isSettingsModalShown) {
-    mapEditorStore.toggleSettingsModal()
-  }
-
-  gameStore.connection?.emit('gm:map:update', data, (response: Map) => {
-    mapEditorStore.setMap(response)
-  })
-}
-
-onUnmounted(() => {
-  mapEditorStore.reset()
-})
-</script>

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -1,34 +1,33 @@
 <template>
-  <Controls :layer="tileLayer" :depth="0" />
+  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
 import config from '@/application/config'
-import type { TextureData } from '@/application/types'
 import Controls from '@/components/utilities/Controls.vue'
 import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
-import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { TileStorage } from '@/storage/storages'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, watch } from 'vue'
+import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
+
+import Tileset = Phaser.Tilemaps.Tileset
 
 const emit = defineEmits(['tileMap:create'])
 
 const scene = useScene()
-const gameStore = useGameStore()
+const mapEditor = useMapEditorComposable()
 const mapEditorStore = useMapEditorStore()
-const tileMap = createTileMap()
-const tileLayer = createTileLayer()
+const tileStorage = new TileStorage()
+
+const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
-/**
- * A Tilemap is a container for Tilemap data.
- * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
- * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
- */
 function createTileMap() {
   const mapData = new Phaser.Tilemaps.MapData({
-    width: mapEditorStore.map?.width,
-    height: mapEditorStore.map?.height,
+    width: mapEditor.currentMap.value?.width,
+    height: mapEditor.currentMap.value?.height,
     tileWidth: config.tile_size.width,
     tileHeight: config.tile_size.height,
     orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
@@ -37,33 +36,32 @@ function createTileMap() {
 
   const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
   emit('tileMap:create', newTileMap)
-
   return newTileMap
 }
 
-/**
- * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
- */
-function createTileLayer() {
-  const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
+async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
+  const tiles = await tileStorage.getAll()
+  const tilesetImages = []
 
-  const tilesetImages = Array.from(tilesArray).map((tile: TextureData, index: number) => {
-    return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
-  }) as any
+  for (const tile of tiles) {
+    tilesetImages.push(currentTileMap.addTilesetImage(tile.id, tile.id, config.tile_size.width, config.tile_size.height, 1, 2, tilesetImages.length + 1, { x: 0, y: -config.tile_size.height }))
+  }
 
   // Add blank tile
-  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
-  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
+  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
+
+  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
 
   layer.setDepth(0)
   layer.setCullPadding(2, 2)
-
   return layer
 }
 
 function pencil(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if map is set
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'pencil') return
@@ -81,19 +79,21 @@ function pencil(pointer: Phaser.Input.Pointer) {
   if (pointer.event.shiftKey) return
 
   // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Place tile
-  placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile)
+  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)
 
   // Adjust mapEditorStore.map.tiles
-  mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
+  mapEditor.currentMap.value.tiles[tile.y][tile.x] = mapEditor.currentMap.value.tiles[tile.y][tile.x]
 }
 
 function eraser(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if map is set
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'eraser') return
@@ -111,19 +111,21 @@ function eraser(pointer: Phaser.Input.Pointer) {
   if (pointer.event.altKey) return
 
   // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Place tile
-  placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
+  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
 
   // Adjust mapEditorStore.map.tiles
-  mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
+  mapEditor.currentMap.value.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 (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'paint') return
@@ -141,16 +143,18 @@ function paint(pointer: Phaser.Input.Pointer) {
   if (pointer.event.altKey) return
 
   // Set new tileArray with selected tile
-  setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile))
+  setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))
 
   // Adjust mapEditorStore.map.tiles
-  mapEditorStore.map.tiles = createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile)
+  mapEditor.currentMap.value.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.currentMap.value.tiles)
 }
 
 // When alt is pressed, and the pointer is down, select the tile that the pointer is over
 function tilePicker(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if map is set
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'pencil') return
@@ -168,45 +172,46 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   if (!pointer.event.altKey) return
 
   // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Select the tile
-  mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
+  mapEditorStore.setSelectedMapObject(mapEditor.currentMap.value.tiles[tile.y][tile.x])
 }
 
 watch(
   () => mapEditorStore.shouldClearTiles,
   (shouldClear) => {
-    if (shouldClear && mapEditorStore.map) {
-      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
-      setLayerTiles(tileMap, tileLayer, blankTiles)
-      mapEditorStore.map.tiles = blankTiles
+    if (shouldClear && mapEditor.currentMap.value && 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.resetClearTilesFlag()
     }
   }
 )
 
-onMounted(() => {
-  if (!mapEditorStore.map?.tiles) {
-    return
-  }
+onMounted(async () => {
+  if (!mapEditor.currentMap.value?.tiles) return
+  console.log(mapEditor.currentMap.value)
+
+  tileMap.value = createTileMap()
+  tileLayer.value = await createTileLayer(tileMap.value)
 
   // First fill the entire map with blank tiles using current map dimensions
-  const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')
+  const blankTiles = createTileArray(mapEditor.currentMap.value.width, mapEditor.currentMap.value.height, 'blank_tile')
 
   // Then overlay the map tiles, but only within the current map dimensions
-  const mapTiles = mapEditorStore.map.tiles
-  for (let y = 0; y < mapEditorStore.map.height; y++) {
-    for (let x = 0; x < mapEditorStore.map.width; x++) {
-      // Only copy if the source tiles array has this position
+  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++) {
       if (mapTiles[y] && mapTiles[y][x] !== undefined) {
         blankTiles[y][x] = mapTiles[y][x]
       }
     }
   }
 
-  setLayerTiles(tileMap, tileLayer, blankTiles)
+  setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
 
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
@@ -220,8 +225,10 @@ onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
 
-  tileMap.destroyLayer('tiles')
-  tileMap.removeAllLayers()
-  tileMap.destroy()
+  if (tileMap.value) {
+    tileMap.value.destroyLayer('tiles')
+    tileMap.value.removeAllLayers()
+    tileMap.value.destroy()
+  }
 })
 </script>

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue

@@ -1,5 +1,5 @@
 <template>
-  <Image v-if="gameStore.getLoadedAsset(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
+  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import type { MapObject, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
+import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
 import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
@@ -56,7 +56,6 @@ function pencil(pointer: Phaser.Input.Pointer) {
     id: uuidv4(),
     map: mapEditorStore.map,
     mapObject: mapEditorStore.selectedMapObject,
-    depth: 0,
     isRotated: false,
     positionX: tile.x,
     positionY: tile.y

src/components/gameMaster/mapEditor/partials/CreateMap.vue

@@ -1,9 +1,8 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => mapEditorStore.toggleCreateMapModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
+  <Modal :isModalOpen="mapEditorStore.isCreateMapModalShown" @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">
@@ -22,7 +21,7 @@
             </div>
             <div class="form-field-full">
               <label for="name">PVP enabled</label>
-              <select class="input-field" name="pvp" id="pvp">
+              <select class="input-field" v-model="pvp" name="pvp" id="pvp">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
               </select>
@@ -38,21 +37,48 @@
 <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)
 
-function submit() {
-  gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
-    mapEditorStore.setMapList(response)
+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')
   })
+
+  // Close modal
   mapEditorStore.toggleCreateMapModal()
 }
 </script>

src/components/gameMaster/mapEditor/partials/MapList.vue

@@ -1,61 +1,77 @@
 <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">
+      <div class="my-4 mx-auto h-full">
         <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="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 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>
-          <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 } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
 
+const mapEditor = useMapEditorComposable()
+const mapStorage = new MapStorage()
+const mapList = ref<Map[]>([])
+
 onMounted(async () => {
-  fetchMaps()
+  await fetchMaps()
 })
 
-function fetchMaps() {
-  gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
-    mapEditorStore.setMapList(response)
-  })
+async function fetchMaps() {
+  mapList.value = await mapStorage.getAll()
 }
 
 function loadMap(id: UUID) {
   gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
-    mapEditorStore.setMap(response)
+    mapEditor.loadMap(response)
   })
   mapEditorStore.toggleMapListModal()
 }
 
-function deleteMap(id: UUID) {
-  gameStore.connection?.emit('gm:map:delete', { mapId: id }, () => {
-    fetchMaps()
+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()
   })
 }
 </script>

src/components/gameMaster/mapEditor/partials/MapObjectList.vue

@@ -44,23 +44,26 @@
 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 { computed, onMounted, ref } from 'vue'
+import { liveQuery } from 'dexie'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const gameStore = useGameStore()
+const mapObjectStorage = new MapObjectStorage()
 const isModalOpen = ref(false)
 const mapEditorStore = useMapEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
+const mapObjectList = ref<MapObject[]>([])
 
 const uniqueTags = computed(() => {
-  const allTags = mapEditorStore.mapObjectList.flatMap((obj) => obj.tags || [])
+  const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
 })
 
 const filteredMapObjects = computed(() => {
-  return mapEditorStore.mapObjectList.filter((object) => {
+  return mapObjectList.value.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
@@ -75,10 +78,23 @@ const toggleTag = (tag: string) => {
   }
 }
 
-onMounted(async () => {
+let subscription: any = null
+
+onMounted(() => {
   isModalOpen.value = true
-  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
-    mapEditorStore.setMapObjectList(response)
+  subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
+    next: (result) => {
+      mapObjectList.value = result
+    },
+    error: (error) => {
+      console.error('Failed to fetch tiles:', error)
+    }
   })
 })
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+  }
+})
 </script>

src/components/gameMaster/mapEditor/partials/MapSettings.vue

@@ -46,61 +46,54 @@
   </Modal>
 </template>
 
-<script setup>
+<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')
 
-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 || [])
+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 || [])
 
 watch(name, (value) => {
-  mapEditorStore.setMapName(value)
+  mapEditor.updateProperty('name', value!)
 })
 
 watch(width, (value) => {
-  mapEditorStore.setMapWidth(value)
+  mapEditor.updateProperty('width', value!)
 })
 
 watch(height, (value) => {
-  mapEditorStore.setMapHeight(value)
+  mapEditor.updateProperty('height', value!)
 })
 
 watch(pvp, (value) => {
-  mapEditorStore.setMapPvp(value)
+  mapEditor.updateProperty('pvp', value!)
 })
 
-watch(
-  mapEffects,
-  (value) => {
-    mapEditorStore.setMapEffects(value)
-  },
-  { deep: true }
-)
+watch(mapEffects, (value) => {
+  mapEditor.updateProperty('mapEffects', value!)
+})
 
 const addEffect = () => {
   mapEffects.value.push({
-    id: Date.now().toString(), // Simple unique id generation
-    mapId: mapEditorStore.map?.id,
-    map: mapEditorStore.map,
+    id: uuidv4() as UUID, // Simple unique id generation
+    map: mapEditor.currentMap.value!,
     effect: '',
     strength: 1
   })
 }
 
-const removeEffect = (index) => {
+const removeEffect = (index: number) => {
   mapEffects.value.splice(index, 1)
 }
 </script>

src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue

@@ -17,8 +17,6 @@ const props = defineProps<{
   placedMapObject: PlacedMapObject
 }>()
 
-console.log(props.placedMapObject)
-
 const emit = defineEmits(['move', 'rotate', 'delete'])
 
 const handleMove = () => {

src/components/gameMaster/mapEditor/partials/TileList.vue

@@ -84,26 +84,27 @@
 import config from '@/application/config'
 import type { Tile } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { useGameStore } from '@/stores/gameStore'
+import { TileStorage } from '@/storage/storages'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, onMounted, ref } from 'vue'
+import { liveQuery } from 'dexie'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const gameStore = useGameStore()
-const isModalOpen = ref(false)
+const tileStorage = new TileStorage()
 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 = mapEditorStore.tileList.flatMap((tile) => tile.tags || [])
+  const allTags = tiles.value.flatMap((tile) => tile.tags || [])
   return Array.from(new Set(allTags))
 })
 
 const groupedTiles = computed(() => {
   const groups: { parent: Tile; children: Tile[] }[] = []
-  const filteredTiles = mapEditorStore.tileList.filter((tile) => {
+  const filteredTiles = tiles.value.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
@@ -177,6 +178,7 @@ 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
@@ -186,6 +188,7 @@ function getDominantColor(imageData: ImageData) {
       total++
     }
   }
+
   return {
     r: Math.round(r / total),
     g: Math.round(g / total),
@@ -226,11 +229,22 @@ function isActiveTile(tile: Tile): boolean {
   return mapEditorStore.selectedTile === tile.id
 }
 
-onMounted(async () => {
-  isModalOpen.value = true
-  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
-    mapEditorStore.setTileList(response)
-    response.forEach((tile) => processTile(tile))
+let subscription: any = null
+
+onMounted(() => {
+  subscription = liveQuery(() => tileStorage.liveQuery()).subscribe({
+    next: (result) => {
+      tiles.value = result
+    },
+    error: (error) => {
+      console.error('Failed to fetch tiles:', error)
+    }
   })
 })
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+  }
+})
 </script>

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="mapEditorStore.map">
+      <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
         <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')" 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>
+        <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>
       </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="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="() => 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="() => mapEditorStore.toggleActive()">Exit</button>
       </div>
     </div>
@@ -82,10 +82,12 @@
 </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'])

src/components/screens/Game.vue

@@ -20,18 +20,16 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import Effects from '@/components/Effects.vue'
+import CharacterProfile from '@/components/game/gui/CharacterProfile.vue'
+import Chat from '@/components/game/gui/Chat.vue'
+import Clock from '@/components/game/gui/Clock.vue'
+import ExpBar from '@/components/game/gui/ExpBar.vue'
+import Hotkeys from '@/components/game/gui/Hotkeys.vue'
+import Hud from '@/components/game/gui/Hud.vue'
+import Menu from '@/components/game/gui/Menu.vue'
+import Effects from '@/components/game/map/Effects.vue'
 import Map from '@/components/game/map/Map.vue'
-import CharacterProfile from '@/components/gui/CharacterProfile.vue'
-import Chat from '@/components/gui/Chat.vue'
-// import Minimap from '@/components/gui/Minimap.vue'
-import Clock from '@/components/gui/Clock.vue'
-import ExpBar from '@/components/gui/ExpBar.vue'
-import Hotkeys from '@/components/gui/Hotkeys.vue'
-import Hud from '@/components/gui/Hud.vue'
-import Menu from '@/components/gui/Menu.vue'
 import { useGameStore } from '@/stores/gameStore'
-import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
 import { Game, Scene } from 'phavuer'
 import { onBeforeUnmount } from 'vue'
 
@@ -42,22 +40,11 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5,
-  plugins: {
-    global: [
-      {
-        key: 'rexAwaitLoader',
-        plugin: AwaitLoaderPlugin,
-        start: true
-      }
-    ]
-  }
+  resolution: 5
 }
 
 const createGame = (game: Phaser.Game) => {
-  /**
-   * Resize the game when the window is resized
-   */
+  // Resize the game when the window is resized
   addEventListener('resize', () => {
     game.scale.resize(window.innerWidth, window.innerHeight)
   })
@@ -73,9 +60,7 @@ const createGame = (game: Phaser.Game) => {
 }
 
 function preloadScene(scene: Phaser.Scene) {
-  /**
-   * Load the base assets into the Phaser scene
-   */
+  // Load the base assets into the Phaser scene
   scene.load.image('blank_tile', '/assets/map/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 }

src/components/screens/Loading.vue

@@ -15,11 +15,8 @@
 </template>
 
 <script setup lang="ts" async>
-import config from '@/application/config'
-import type { HttpResponse, MapObject } from '@/application/types'
-import type { BaseStorage } from '@/storage/baseStorage'
+import { downloadCache } from '@/application/utilities'
 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'
 
@@ -28,32 +25,13 @@ 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([
-  downloadAndStore('tiles', tileStorage),
-  downloadAndStore('maps', mapStorage),
-  downloadAndStore('map_objects', mapObjectStorage),
-  downloadAndStore('sprites', new SpriteStorage()),
-  downloadAndStore('character_types', new CharacterTypeStorage()),
-  downloadAndStore('character_hair', new CharacterHairStorage())
+  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())
 ]).then(() => {
   gameStore.game.isLoaded = true
 })

src/components/screens/Login.vue

@@ -9,7 +9,7 @@
         <!--        <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious logo" />-->
         <div class="relative">
           <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
-          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
+          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" alt="UI box inner" />
 
           <!-- Login Form -->
           <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />

src/components/screens/MapEditor.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="flex justify-center items-center h-dvh relative">
     <Game :config="gameConfig" @create="createGame">
-      <Scene name="main" @preload="preloadScene" @create="createScene">
-        <MapEditor :key="JSON.stringify(`${mapEditorStore.map?.id}_${mapEditorStore.map?.createdAt}_${mapEditorStore.map?.updatedAt ?? ''}`)" />
+      <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>
     </Game>
   </div>
@@ -11,76 +20,92 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import type { TextureData } from '@/application/types'
-import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
-import { loadTexture } from '@/composables/gameComposable'
+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 { 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 AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
 import { Game, Scene } from 'phavuer'
+import { ref, watch } from 'vue'
 
+const mapStorage = new MapStorage()
+const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
 
+const isLoaded = ref(false)
+
 const gameConfig = {
   name: config.name,
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5,
-  plugins: {
-    global: [
-      {
-        key: 'rexAwaitLoader',
-        plugin: AwaitLoaderPlugin,
-        start: true
-      }
-    ]
-  }
+  resolution: 5
 }
 
 const createGame = (game: Phaser.Game) => {
-  /**
-   * Resize the game when the window is resized
-   */
+  // Resize the game when the window is resized
   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) => {
-  /**
-   * Load the base assets into the Phaser scene
-   */
+  // Load the base assets into the Phaser scene
   scene.load.image('BLOCK', '/assets/map/bt_tile.png')
   scene.load.image('TELEPORT', '/assets/map/tp_tile.png')
   scene.load.image('blank_tile', '/assets/map/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 
-  /**
-   * Because Phaser can't load tiles after the scene with map in it is created,
-   * we need to load and cache all the tiles first.
-   * Then load them into the scene.
-   */
-  scene.load.rexAwait(async function (successCallback: any) {
-    const tiles: { data: TextureData[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
+  // Get all tiles from IndexedDB and load them into the scene
+  await loadAllTilesIntoScene(scene)
 
-    for await (const tile of tiles?.data ?? []) {
-      await loadTexture(scene, tile)
-    }
-
-    successCallback()
+  // Wait for all assets to be loaded before continuing
+  await new Promise<void>((resolve) => {
+    scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
+      resolve()
+    })
+    isLoaded.value = true
   })
 }
 
-const createScene = 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()
+}
 </script>

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)">
+  <Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification!.id as string)">
     <template #modalHeader v-if="notification.title">
       <h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
     </template>

src/composables/game/scene/loaderComposable.ts

@@ -1,34 +0,0 @@
-export function createSceneLoader(scene: Phaser.Scene) {
-  const width = scene.cameras.main.width
-  const height = scene.cameras.main.height
-
-  const progressBox = scene.add.graphics()
-  const progressBar = scene.add.graphics()
-  progressBox.fillStyle(0x222222, 0.8)
-  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
-
-  const loadingText = scene.make.text({
-    x: width / 2,
-    y: height / 2 - 50,
-    text: 'Loading...',
-    style: {
-      font: '20px monospace',
-      // @ts-ignore
-      fill: '#ffffff'
-    }
-  })
-  loadingText.setOrigin(0.5, 0.5)
-
-  scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
-    progressBar.clear()
-    progressBar.fillStyle(0x368f8b, 1)
-    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
-  })
-
-  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
-    progressBar.destroy()
-    progressBox.destroy()
-    loadingText.destroy()
-    return true
-  })
-}

src/composables/gameComposable.ts

@@ -26,7 +26,6 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
 
     // If asset is not found, download it
     if (!texture) {
-      console.log('Downloading texture:', textureData.key)
       await textureStorage.download(textureData)
       texture = await textureStorage.get(textureData.key)
     }
@@ -58,20 +57,18 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
 }
 
 export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
-  if (!sprite_id) return
+  if (!sprite_id) return false
 
-  console.log(sprite_id)
   // @TODO: Fix this
   const spriteStorage = new SpriteStorage()
   const sprite = await spriteStorage.get(sprite_id)
 
   if (!sprite) {
     console.error('Failed to load sprite:', sprite_id)
-    return
+    return false
   }
 
   for await (const sprite_action of sprite.spriteActions) {
-    console.log('Loading sprite action:', sprite.id + '-' + sprite_action.action)
     const key = sprite.id + '-' + sprite_action.action
     await loadTexture(scene, {
       key,
@@ -102,5 +99,5 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string)
       repeat: -1
     })
   }
-  return Promise.resolve(true)
+  return true
 }

src/composables/mapComposable.ts

@@ -2,22 +2,22 @@ import config from '@/application/config'
 import type { HttpResponse, TextureData, UUID } from '@/application/types'
 import { unduplicateArray } from '@/application/utilities'
 import { loadTexture } from '@/composables/gameComposable'
-import { MapStorage } from '@/storage/storages'
+import { MapStorage, TileStorage } from '@/storage/storages'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
 
-export function getTile(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): Tile | undefined {
-  const tile = layer.getTileAtWorldXY(positionX, positionY)
-  if (!tile) return undefined
+export function getTile(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): Tile | null {
+  const tile = layer?.getTileAtWorldXY(positionX, positionY)
+  if (!tile) return null
   return tile
 }
 
 export function tileToWorldXY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number) {
   const worldPoint = layer.tileToWorldXY(positionX, positionY)
-  if (!worldPoint) return { positionX: 0, positionY: 0 }
+  if (!worldPoint) return { worldPositionX: 0, worldPositionY: 0 }
 
   const worldPositionX = worldPoint.x + config.tile_size.height
   const worldPositionY = worldPoint.y
@@ -88,19 +88,54 @@ export function FlattenMapArray(tiles: string[][]) {
 }
 
 export async function loadMapTilesIntoScene(map_id: UUID, scene: Phaser.Scene) {
+  const tileStorage = new TileStorage()
   const mapStorage = new MapStorage()
   const map = await mapStorage.get(map_id)
   if (!map) return
 
   const tileArray = unduplicateArray(FlattenMapArray(map.tiles))
+  const tiles = await tileStorage.getByIds(tileArray)
 
   // Load each tile into the scene
-  for (const tile of tileArray) {
+  for (const tile of tiles) {
     const textureData = {
-      key: tile,
-      data: '/textures/tiles/' + tile + '.png',
+      key: tile.id,
+      data: '/textures/tiles/' + tile.id + '.png',
       group: 'tiles',
-      updatedAt: map.updatedAt // @TODO: Fix this
+      updatedAt: tile.updatedAt
+    } as TextureData
+    await loadTexture(scene, textureData)
+  }
+}
+
+export async function loadTilesIntoScene(tileIds: string[], scene: Phaser.Scene) {
+  const tileStorage = new TileStorage()
+
+  const tiles = await tileStorage.getByIds(tileIds)
+
+  // Load each tile into the scene
+  for (const tile of tiles) {
+    const textureData = {
+      key: tile.id,
+      data: '/textures/tiles/' + tile.id + '.png',
+      group: 'tiles',
+      updatedAt: tile.updatedAt
+    } as TextureData
+    await loadTexture(scene, textureData)
+  }
+}
+
+export async function loadAllTilesIntoScene(scene: Phaser.Scene) {
+  const tileStorage = new TileStorage()
+  const tiles = await tileStorage.getAll()
+
+  // Load each tile into the scene
+  for (const tile of tiles) {
+    const textureData = {
+      key: tile.id,
+      data: '/textures/tiles/' + tile.id + '.png',
+      group: 'tiles',
+      updatedAt: tile.updatedAt
     } as TextureData
     await loadTexture(scene, textureData)
   }

src/composables/pointerHandlers/useMapEditorPointerHandlers.ts

@@ -2,41 +2,57 @@ import config from '@/application/config'
 import { getTile, tileToWorldXY } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, type Ref } from 'vue'
+import { computed, ref, type Ref } from 'vue'
 
 export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
   const gameStore = useGameStore()
   const mapEditorStore = useMapEditorStore()
   const isMoveTool = computed(() => mapEditorStore.tool === 'move')
+  const pointerStartPosition = ref({ x: 0, y: 0 })
+  const dragThreshold = 5 // pixels
 
-  function updateWaypoint(pointer: Phaser.Input.Pointer) {
-    const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
-    const pointerTile = getTile(layer, px, py)
-
-    if (pointerTile) {
-      const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
-      if (!worldPoint.positionX || !worldPoint.positionY) return
-
-      waypoint.value = {
-        visible: true,
-        x: worldPoint.positionX,
-        y: worldPoint.positionY + config.tile_size.height + 15
-      }
-    } else {
+  function updateWaypoint(worldX: number, worldY: number) {
+    const pointerTile = getTile(layer, worldX, worldY)
+    if (!pointerTile) {
       waypoint.value.visible = false
+      return
+    }
+    const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+    if (!worldPoint.worldPositionX || !worldPoint.worldPositionX) return
+
+    waypoint.value = {
+      visible: true,
+      x: worldPoint.worldPositionX,
+      y: worldPoint.worldPositionY + config.tile_size.height + 15
+    }
+  }
+
+  function handlePointerDown(pointer: Phaser.Input.Pointer) {
+    pointerStartPosition.value = { x: pointer.x, y: pointer.y }
+    if (isMoveTool.value || pointer.event.shiftKey) {
+      gameStore.setPlayerDraggingCamera(true)
     }
   }
 
   function dragMap(pointer: Phaser.Input.Pointer) {
     if (!gameStore.game.isPlayerDraggingCamera) return
-    camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
+
+    const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
+
+    if (distance <= dragThreshold) return
+
+    camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
   }
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
     if (isMoveTool.value || pointer.event.shiftKey) {
       dragMap(pointer)
     }
-    updateWaypoint(pointer)
+    updateWaypoint(pointer.worldX, pointer.worldY)
+  }
+
+  function handlePointerUp(pointer: Phaser.Input.Pointer) {
+    gameStore.setPlayerDraggingCamera(false)
   }
 
   function handleZoom(pointer: Phaser.Input.Pointer) {
@@ -50,12 +66,16 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
   }
 
   const setupPointerHandlers = () => {
+    scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
     scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
     scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
   }
 
   const cleanupPointerHandlers = () => {
+    scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
     scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
     scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
   }
 

src/composables/useMapEditorComposable.ts

@@ -0,0 +1,31 @@
+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
+  }
+}

src/storage/baseStorage.ts

@@ -4,10 +4,10 @@ export class BaseStorage<T extends { id: string }> {
   protected dexie: Dexie
   protected tableName: string
 
-  constructor(tableName: string, schema: string) {
+  constructor(tableName: string, schema: string, version = 1) {
     this.tableName = tableName
     this.dexie = new Dexie(tableName)
-    this.dexie.version(1).stores({
+    this.dexie.version(version).stores({
       [tableName]: schema
     })
   }
@@ -23,6 +23,22 @@ 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)
@@ -33,6 +49,16 @@ export class BaseStorage<T extends { id: string }> {
     }
   }
 
+  async getByIds(ids: string[]): Promise<T[]> {
+    try {
+      const items = await this.dexie.table(this.tableName).bulkGet(ids)
+      return items.filter((item) => item !== null)
+    } catch (error) {
+      console.error(`Failed to retrieve ${this.tableName} by ids:`, error)
+      return []
+    }
+  }
+
   async getAll(): Promise<T[]> {
     try {
       return await this.dexie.table(this.tableName).toArray()
@@ -42,6 +68,10 @@ 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()

src/stores/gameStore.ts

@@ -15,9 +15,10 @@ export const useGameStore = defineStore('game', {
       character: null as Character | null,
       world: {
         date: new Date(),
-        isRainEnabled: false,
-        isFogEnabled: false,
-        fogDensity: 0
+        weatherState: {
+          rainPercentage: 0,
+          fogDensity: 0
+        }
       } as WorldSettings,
       game: {
         isLoading: false,
@@ -34,10 +35,7 @@ export const useGameStore = defineStore('game', {
     }
   },
   getters: {
-    getLoadedAssets: (state) => {
-      return state.game.loadedTextures
-    },
-    isAssetLoaded: (state) => {
+    isTextureLoaded: (state) => {
       return (key: string) => {
         return state.game.loadedTextures.includes(key)
       }
@@ -122,9 +120,8 @@ export const useGameStore = defineStore('game', {
       this.uiSettings.isGmPanelOpen = false
 
       this.world.date = new Date()
-      this.world.isRainEnabled = false
-      this.world.isFogEnabled = false
-      this.world.fogDensity = 0
+      this.world.weatherState.rainPercentage = 0
+      this.world.weatherState.fogDensity = 0
     }
   }
 })

src/stores/mapEditorStore.ts

@@ -1,9 +1,8 @@
-import type { Map, MapEffect, MapObject, PlacedMapObject, Tile } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
+import type { MapObject } from '@/application/types'
 import { defineStore } from 'pinia'
 
 export type TeleportSettings = {
-  toMap: Map | null
+  toMapId: string
   toPositionX: number
   toPositionY: number
   toRotation: number
@@ -13,13 +12,9 @@ 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,
@@ -28,15 +23,8 @@ export const useMapEditorStore = defineStore('mapEditor', {
       isCreateMapModalShown: false,
       isSettingsModalShown: false,
       shouldClearTiles: false,
-      mapSettings: {
-        name: '',
-        width: 0,
-        height: 0,
-        pvp: false,
-        mapEffects: [] as MapEffect[]
-      },
       teleportSettings: {
-        toMap: null,
+        toMapId: '',
         toPositionX: 0,
         toPositionY: 0,
         toRotation: 0
@@ -45,31 +33,9 @@ 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
     },
@@ -79,15 +45,6 @@ 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
     },
@@ -113,11 +70,7 @@ export const useMapEditorStore = defineStore('mapEditor', {
     resetClearTilesFlag() {
       this.shouldClearTiles = false
     },
-    reset(resetMap = false) {
-      if (resetMap) this.map = null
-      this.mapList = []
-      this.tileList = []
-      this.mapObjectList = []
+    reset() {
       this.tool = 'move'
       this.drawMode = 'tile'
       this.selectedTile = ''