Refactoring of modalShown booleans

src/components/screens/MapEditor.vue

@@ -4,13 +4,16 @@
       <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 />
+          <Map :key="currentMap?.id" />
+          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open()" @open-settings="mapSettingsModal?.open()"
+                   @close-editor="$emit('close-editor')"
+                   @open-tile-list="tileModal?.open()"
+                   @open-map-object-list="objectModal?.open()"/>
+          <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open()"/>
+          <TileList ref="tileModal"/>
+          <ObjectList ref="objectModal"/>
+          <MapSettings ref="mapSettingsModal" />
+          <TeleportModal ref="teleportModal" />
         </div>
       </Scene>
     </Game>
@@ -33,11 +36,20 @@ import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
-import { ref } from 'vue'
+import { provide, ref, useTemplateRef, watch } from 'vue'
 
 const mapStorage = new MapStorage()
 const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
+const mapEditorStore = useMapEditorStore()
+const currentMap = ref<MapT | null>(null)
+
+const toolbar = useTemplateRef("toolbar")
+const mapModal = useTemplateRef("mapModal")
+const tileModal = useTemplateRef("tileModal")
+const objectModal = useTemplateRef("objectModal")
+const mapSettingsModal = useTemplateRef("mapSettingsModal")
+const teleportModal = useTemplateRef("teleportModal")
 
 const isLoaded = ref(false)
 
@@ -76,22 +88,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
 }
 
 function save() {
-  if (!mapEditor.currentMap.value) return
+  if (!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 (mapEditor.isSettingsModalShown.value) {
-    mapEditor.toggleSettingsModal()
+    mapId: currentMap.value.id,
+    name: currentMap.value.name,
+    width: currentMap.value.width,
+    height: currentMap.value.height,
+    tiles: currentMap.value.tiles,
+    pvp: currentMap.value.pvp,
+    mapEffects: currentMap.value.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
+    mapEventTiles: currentMap.value.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
+    placedMapObjects: currentMap.value.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
   }
 
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
@@ -99,8 +107,10 @@ function save() {
   })
 }
 
+watch(() => mapEditor.currentMap, (value) => { currentMap.value = value.value })
+
 function clear() {
-  if (!mapEditor.currentMap.value) return
+  if (!currentMap.value) return
 
   // Clear placed objects, event tiles and tiles
   mapEditor.clearMap()