Worked on dynamic texture loading

src/components/zone/Objects.vue

@@ -1,28 +0,0 @@
-<template>
-  <Image v-for="object in zoneStore.zone?.zoneObjects" v-bind="getImageProps(object)" />
-</template>
-
-<script setup lang="ts">
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { Image, Text } from 'phavuer'
-import { useZoneStore } from '@/stores/zoneStore'
-import type { ZoneObject } from '@/types'
-
-const zoneStore = useZoneStore()
-
-const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
-}>()
-
-const getImageProps = (object: ZoneObject) => {
-  return {
-    depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
-    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
-    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
-    flipX: object.isRotated,
-    texture: object.object.id,
-    originY: Number(object.object.originX),
-    originX: Number(object.object.originY)
-  }
-}
-</script>

src/components/zone/Zone.vue

@@ -1,16 +1,16 @@
 <template>
-  <Tiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
-  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
+  <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount, ref } from 'vue'
+import { onBeforeUnmount, ref, onBeforeMount } from 'vue'
 import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
-import Tiles from '@/components/zone/Tiles.vue'
-import Objects from '@/components/zone/Objects.vue'
+import ZoneTiles from '@/components/zone/ZoneTiles.vue'
+import ZoneObjects from '@/components/zone/ZoneObjects.vue'
 import Characters from '@/components/zone/Characters.vue'
 
 const gameStore = useGameStore()
@@ -51,9 +51,12 @@ gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
-gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
-  zoneStore.setZone(response.zone)
-  zoneStore.setCharacters(response.characters)
+onBeforeMount(async () => {
+  gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
+    // Set zone and characters
+    zoneStore.setZone(response.zone)
+    zoneStore.setCharacters(response.characters)
+  })
 })
 
 onBeforeUnmount(() => {

src/components/zone/ZoneObjects.vue

@@ -0,0 +1,14 @@
+<template>
+  <ZoneObject v-for="zoneObject in zoneStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject />
+</template>
+
+<script setup lang="ts">
+import { useZoneStore } from '@/stores/zoneStore'
+import ZoneObject from '@/components/zone/partials/ZoneObject.vue'
+
+const zoneStore = useZoneStore()
+
+defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+</script>

src/components/zone/ZoneTiles.vue

@@ -7,14 +7,13 @@ import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
 import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { placeTile, setAllTiles } from '@/composables/zoneComposable'
+import { setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 
 const emit = defineEmits(['tilemap:create'])
 
 const zoneStore = useZoneStore()
 const scene = useScene()
-
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 
@@ -54,7 +53,7 @@ onBeforeMount(() => {
   if (!zoneStore.zone?.tiles) {
     return
   }
-  setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
+  setLayerTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
 })
 
 onBeforeUnmount(() => {

src/components/zone/partials/ZoneObject.vue

@@ -0,0 +1,63 @@
+<template>
+  <Image v-if="isTextureLoaded" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { Image, useScene } from 'phavuer'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { useAssetManager } from '@/utilities/assetManager'
+import type { ZoneObject } from '@/types'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  zoneObject: ZoneObject
+}>()
+
+const scene = useScene()
+const assetManager = useAssetManager
+const isTextureLoaded = ref(false)
+
+const imageProps = computed(() => ({
+  depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  flipX: props.zoneObject.isRotated,
+  texture: props.zoneObject.object.id,
+  originY: Number(props.zoneObject.object.originX),
+  originX: Number(props.zoneObject.object.originY)
+}))
+
+const loadTexture = async () => {
+  const textureId = props.zoneObject.object.id
+
+  // Check if the texture is already loaded in Phaser
+  if (scene.textures.exists(textureId)) {
+    isTextureLoaded.value = true
+    return
+  }
+
+  let assetData = await assetManager.getAsset(textureId)
+
+  if (!assetData) {
+    await assetManager.downloadAsset(textureId, `/assets/objects/${textureId}.png`, 'objects', props.zoneObject.object.updatedAt)
+    assetData = await assetManager.getAsset(textureId)
+  }
+
+  if (assetData) {
+    return new Promise<void>((resolve) => {
+      scene.textures.addBase64(textureId, assetData.data)
+      scene.textures.once(`addtexture-${textureId}`, () => {
+        isTextureLoaded.value = true
+        resolve()
+      })
+    })
+  }
+}
+
+onMounted(() => {
+  loadTexture().catch((error) => {
+    console.error('Error loading texture:', error)
+  })
+})
+</script>