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

.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,12 @@
   },
   "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

@@ -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

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() {
+async function submit() {
-  gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
+  gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
-    mapEditorStore.setMapList(response)
+    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="overflow-y-auto h-[calc(100%-4.4rem)]">
-          <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
+          <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="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
+            <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
-            <span>{{ map.name }}</span>
+            <div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
-            <span class="ml-auto gap-1 flex">
+              <span>{{ map.name }}</span>
-              <button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteMap(map.id)">x</button>
+              <span class="ml-auto gap-1 flex">
-            </span>
+                <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() {
+async function fetchMaps() {
-  gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
+  mapList.value = await mapStorage.getAll()
-    mapEditorStore.setMapList(response)
-  })
 }
 
 function loadMap(id: UUID) {
-  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
+  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: UUID) => {
-    mapEditorStore.setMap(response)
+    mapEditorStore.setMapId(response)
   })
   mapEditorStore.toggleMapListModal()
 }
 
-function deleteMap(id: UUID) {
+async function deleteMap(id: UUID) {
-  gameStore.connection?.emit('gm:map:delete', { mapId: id }, () => {
+  gameStore.connection?.emit('gm:map:delete', { mapId: id }, async (response: boolean) => {
-    fetchMaps()
+    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()

src/storage/baseStorage.ts

@@ -23,6 +23,14 @@ export class BaseStorage<T extends { id: string }> {
     }
   }
 
+  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)

src/stores/mapEditorStore.ts

@@ -16,7 +16,6 @@ export const useMapEditorStore = defineStore('mapEditor', {
       tool: 'move',
       drawMode: 'tile',
       eraserMode: 'tile',
-      mapList: [] as Map[],
       tileList: [] as Tile[],
       mapObjectList: [] as MapObject[],
       selectedTile: '',