Proof of concept dynamic tile loading 2

src/components/zone/Zone.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { ref, onUnmounted, onMounted } from 'vue'
@@ -12,7 +13,10 @@ import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as Exten
 import ZoneTiles from '@/components/zone/ZoneTiles.vue'
 import ZoneObjects from '@/components/zone/ZoneObjects.vue'
 import Characters from '@/components/zone/Characters.vue'
+import { unduplicateArray } from '@/utilities'
+import { FlattenZoneArray, loadZoneTileTexture } from '@/composables/zoneComposable'
 
+const scene = useScene()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
@@ -51,9 +55,17 @@ gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
+async function loadZoneTiles(zone: ZoneT, scene: Phaser.Scene) {
+  const tileArray = unduplicateArray(FlattenZoneArray(zone.tiles))
+  for (const tile of tileArray) {
+    await loadZoneTileTexture(scene, tile, new Date())
+  }
+}
+
 onMounted(async () => {
   // Emit zone:character:join event to server and wait for response, then set zone and characters
   gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
+    await loadZoneTiles(response.zone, scene)
     zoneStore.setZone(response.zone)
     zoneStore.setCharacters(response.characters)
   })