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()
 })