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
 

src/composables/zoneComposable.ts

@@ -3,7 +3,7 @@ import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
-import { useAssetManager } from '@/utilities/assetManager'
+import { useAssetManager } from '@/managers/assetManager'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
   const tile = layer.getTileAtWorldXY(x, y)
@@ -73,6 +73,16 @@ export const calculateIsometricDepth = (x: number, y: number, width: number = 0,
   return baseDepth + (width + height) / (2 * config.tile_size.x)
 }
 
+export function FlattenZoneArray(tiles: string[][]) {
+  const normalArray = []
+
+  for (const row of tiles) {
+    normalArray.push(...row)
+  }
+
+  return normalArray
+}
+
 export async function loadZoneTileTexture(scene: Phaser.Scene, textureId: string, updatedAt: Date): Promise<boolean> {
   const assetManager = useAssetManager
 

src/screens/Game.vue

@@ -32,7 +32,7 @@ import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Effects from '@/components/Effects.vue'
 import Minimap from '@/components/gui/Minimap.vue'
 import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
-import { useAssetManager } from '@/utilities/assetManager'
+import { useAssetManager } from '@/managers/assetManager'
 
 const gameStore = useGameStore()
 const assetManager = useAssetManager

src/screens/Loading.vue

@@ -17,7 +17,7 @@
 import { onMounted, ref } from 'vue'
 import config from '@/config'
 import type { AssetT as ServerAsset } from '@/types'
-import { useAssetManager } from '@/utilities/assetManager'
+import { useAssetManager } from '@/managers/assetManager'
 import { useGameStore } from '@/stores/gameStore'
 
 /**

src/utilities.ts

@@ -1,3 +1,7 @@
 export function uuidv4() {
   return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
 }
+
+export function unduplicateArray(array: any[]) {
+  return [...new Set(array.flat())]
+}