Load all tiles in zone editor

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,5 +1,7 @@
 <template>
-  <ZoneTiles @tilemap:create="tileMap = $event" />
+  <div v-if="isLoaded">
+    <ZoneTiles @tilemap:create="tileMap = $event" />
+  </div>
   <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 
@@ -14,10 +16,11 @@
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref } from 'vue'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { type Zone } from '@/types'
+import { type AssetT, type Zone } from '@/types'
 
 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
@@ -29,11 +32,14 @@ import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportM
 import ZoneTiles from '@/components/gameMaster/zoneEditor/ZoneTiles.vue'
 import ZoneObjects from '@/components/gameMaster/zoneEditor/ZoneObjects.vue'
 import ZoneEventTiles from '@/components/gameMaster/zoneEditor/ZoneEventTiles.vue'
+import config from '@/config'
+import { loadZoneTileTexture } from '@/composables/zoneComposable'
 
+const scene = useScene()
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
+const isLoaded = ref(false)
 
 function save() {
   if (!zoneEditorStore.zone) return
@@ -59,6 +65,14 @@ function save() {
   })
 }
 
+onMounted(async () => {
+  const tiles: AssetT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
+  for (const tile of tiles) {
+    await loadZoneTileTexture(scene, tile.key, tile.updatedAt)
+  }
+  isLoaded.value = true
+})
+
 onUnmounted(() => {
   zoneEditorStore.reset()
 })

src/components/gui/ResetPassword.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :is-modal-open="gameStore.uiSettings.isPasswordResetOpen" @modal:close="() => gameStore.togglePasswordReset()" :modal-width="400" :modal-height="300" :is-resizable="false">
+  <Modal :is-modal-open="gameStore.uiSettings.isPasswordResetOpen" @modal:close="() => gameStore.togglePasswordReset()" :modal-width="400" :modal-height="300" :is-resizable="false">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Reset Password</h3>
     </template>
@@ -47,4 +47,4 @@ async function resetPasswordFunc() {
     return
   }
 }
-</script>
+</script>

src/components/utilities/Modal.vue

@@ -223,23 +223,23 @@ watch(
 )
 
 onMounted(() => {
-  window.addEventListener('mousemove', drag)
-  window.addEventListener('mouseup', stopDrag)
-  window.addEventListener('mousemove', resizeModal)
-  window.addEventListener('mouseup', stopResize)
+  addEventListener('mousemove', drag)
+  addEventListener('mouseup', stopDrag)
+  addEventListener('mousemove', resizeModal)
+  addEventListener('mouseup', stopResize)
   if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.addEventListener('resize', handleResize)
+    addEventListener('resize', handleResize)
   }
   initializePosition()
 })
 
 onUnmounted(() => {
-  window.removeEventListener('mousemove', drag)
-  window.removeEventListener('mouseup', stopDrag)
-  window.removeEventListener('mousemove', resizeModal)
-  window.removeEventListener('mouseup', stopResize)
+  removeEventListener('mousemove', drag)
+  removeEventListener('mouseup', stopDrag)
+  removeEventListener('mousemove', resizeModal)
+  removeEventListener('mouseup', stopResize)
   if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.removeEventListener('resize', handleResize)
+    removeEventListener('resize', handleResize)
   }
 })
 </script>