From 4f8517a50c27d2bf7e82222093c62cb5fb6a5bb4 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 27 Oct 2024 18:48:19 +0100
Subject: [PATCH] Proof of concept dynamic tile loading 2

---
 src/components/zone/Zone.vue                | 12 ++++++++++++
 src/components/zone/ZoneTiles.vue           | 14 +-------------
 src/composables/zoneComposable.ts           | 12 +++++++++++-
 src/{utilities => managers}/assetManager.ts |  0
 src/screens/Game.vue                        |  2 +-
 src/screens/Loading.vue                     |  2 +-
 src/utilities.ts                            |  4 ++++
 7 files changed, 30 insertions(+), 16 deletions(-)
 rename src/{utilities => managers}/assetManager.ts (100%)

diff --git a/src/components/zone/Zone.vue b/src/components/zone/Zone.vue
index 093eab3..317c279 100644
--- a/src/components/zone/Zone.vue
+++ b/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)
   })
diff --git a/src/components/zone/ZoneTiles.vue b/src/components/zone/ZoneTiles.vue
index 008a64e..ff64a7b 100644
--- a/src/components/zone/ZoneTiles.vue
+++ b/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
 
diff --git a/src/composables/zoneComposable.ts b/src/composables/zoneComposable.ts
index b8161a4..dd51ec6 100644
--- a/src/composables/zoneComposable.ts
+++ b/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
 
diff --git a/src/utilities/assetManager.ts b/src/managers/assetManager.ts
similarity index 100%
rename from src/utilities/assetManager.ts
rename to src/managers/assetManager.ts
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index c9cf98d..f142ed7 100644
--- a/src/screens/Game.vue
+++ b/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
diff --git a/src/screens/Loading.vue b/src/screens/Loading.vue
index 6caa30e..67f472c 100644
--- a/src/screens/Loading.vue
+++ b/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'
 
 /**
diff --git a/src/utilities.ts b/src/utilities.ts
index f584d74..0567050 100644
--- a/src/utilities.ts
+++ b/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())]
+}
\ No newline at end of file