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

src/components/zone/ZoneTiles.vue

@@ -14,18 +14,6 @@ const emit = defineEmits(['tilemap:create'])
 
 const zoneStore = useZoneStore()
 const scene = useScene()
-
-const tilesFromZone = zoneStore.zone?.tiles
-const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
-
-/**
- * @TODO fix this
- */
-for (const tile of uniqueTiles) {
-  console.log(tile)
-  await loadZoneTileTexture(scene, tile, new Date())
-}
-
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 
@@ -55,7 +43,7 @@ function createTileLayer() {
   const tilesFromZone = zoneStore.zone?.tiles || []
   const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
 
-  const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
+  const tilesetImages = Array.from(uniqueTiles).map((tile: any, index: number) => {
     return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
   }) as any