Removed placedMapObject depth field, cleaned package.json, creating & deleting maps now works with mapStorage

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.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,75 @@
 <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%-4.4rem)]">
+          <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 { 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 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)
+  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: UUID) => {
+    mapEditorStore.setMapId(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/screens/MapEditor.vue

@@ -5,13 +5,10 @@
         <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" />
-
           <Toolbar @save="save" @clear="clear" />
-
           <MapList />
           <TileList />
           <ObjectList />
-
           <MapSettings />
           <TeleportModal />
         </div>
@@ -23,6 +20,7 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
+import type { Map as MapT } from '@/application/types'
 import Map from '@/components/gameMaster/mapEditor/Map.vue'
 import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
 import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
@@ -35,7 +33,6 @@ import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { Game, Scene } from 'phavuer'
 import { ref } from 'vue'
-import type { Map as MapT } from '@/application/types'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
@@ -65,8 +62,10 @@ const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('blank_tile', '/assets/map/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 
+  // Get all tiles from IndexedDB and load them into the scene
   await loadAllTilesIntoScene(scene)
 
+  // Wait for all assets to be loaded before continuing
   await new Promise<void>((resolve) => {
     scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
       resolve()