Load map data inside a composable instead of Pinia store

src/components/screens/Loading.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script setup lang="ts" async>
+import { downloadCache } from '@/application/utilities'
 import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
-import { downloadCache } from '@/application/utilities'
 
 const gameStore = useGameStore()
 

src/components/screens/MapEditor.vue

@@ -4,7 +4,7 @@
       <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="mapEditorStore.mapId" />
+          <Map :key="mapEditor.currentMap.value?.id" />
           <Toolbar @save="save" @clear="clear" />
           <MapList />
           <TileList />
@@ -29,16 +29,19 @@ import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportMo
 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 { Game, Scene } from 'phavuer'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
+const mapStorage = new MapStorage()
+const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
 
 const isLoaded = ref(false)
-const currentMap = ref<MapT | null>(null)
 
 const gameConfig = {
   name: config.name,
@@ -75,18 +78,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
 }
 
 function save() {
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) 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 })) ?? []
+    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) {
@@ -94,16 +97,15 @@ function save() {
   }
 
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
-    mapEditorStore.setMap(response)
+    mapStorage.update(response.id, response)
   })
 }
 
 function clear() {
-  if (!mapEditorStore.map) return
+  if (!mapEditor.currentMap.value) return
 
-  // Clear objects, event tiles and tiles
-  mapEditorStore.map.placedMapObjects = []
-  mapEditorStore.map.mapEventTiles = []
+  // Clear placed objects, event tiles and tiles
+  mapEditor.clearMap()
   mapEditorStore.triggerClearTiles()
 }
 </script>