#217: Solved duplicate texture loading issue, #215: Finished Dexie implementation.

src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue

@@ -38,11 +38,7 @@ loadTexture(scene, {
   updatedAt: props.zoneObject.object.updatedAt,
   frameWidth: props.zoneObject.object.frameWidth,
   frameHeight: props.zoneObject.object.frameHeight
-} as AssetDataT)
-  .then((loaded) => {
-    isTextureLoaded.value = loaded
-  })
-  .catch((error) => {
-    console.error('Error loading texture:', error)
-  })
-</script>
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

src/components/sprites/Character.vue

@@ -37,7 +37,6 @@ const props = defineProps<{
   character: ExtendedCharacter
 }>()
 
-const isTextureLoaded = ref(false)
 const charChatContainer = refObj<Phaser.GameObjects.Container>()
 const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
@@ -183,13 +182,14 @@ watch(
 watch(() => props.character.isMoving, updateSprite)
 watch(() => props.character.rotation, updateSprite)
 
-loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT).then((loaded) => {
-  isTextureLoaded.value = loaded
-  charSprite.value!.setTexture(charTexture.value)
-  charSprite.value!.setFlipX(isFlippedX.value)
-}).catch((error) => {
-  console.error('Error loading texture:', error)
-})
+loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT)
+  .then(() => {
+    charSprite.value!.setTexture(charTexture.value)
+    charSprite.value!.setFlipX(isFlippedX.value)
+  })
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
 
 onMounted(() => {
   charChatContainer.value!.setName(`${props.character!.name}_chatContainer`)

src/components/zone/partials/ZoneObject.vue

@@ -1,21 +1,22 @@
 <template>
-  <Image v-if="isTextureLoaded" v-bind="imageProps" />
+  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { Image, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { loadTexture } from '@/composables/gameComposable'
 import type { AssetDataT, ZoneObject } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
   zoneObject: ZoneObject
 }>()
 
+const gameStore = useGameStore()
 const scene = useScene()
-const isTextureLoaded = ref(false)
 
 const imageProps = computed(() => ({
   depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
@@ -34,11 +35,7 @@ loadTexture(scene, {
   updatedAt: props.zoneObject.object.updatedAt,
   frameWidth: props.zoneObject.object.frameWidth,
   frameHeight: props.zoneObject.object.frameHeight
-} as AssetDataT)
-  .then((loaded) => {
-    isTextureLoaded.value = loaded
-  })
-  .catch((error) => {
-    console.error('Error loading texture:', error)
-  })
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
 </script>

src/composables/gameComposable.ts

@@ -3,42 +3,62 @@ import { useGameStore } from '@/stores/gameStore'
 import { AssetStorage } from '@/storage/assetStorage'
 import config from '@/config'
 
+const textureLoadingPromises = new Map<string, Promise<boolean>>()
+
 export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): Promise<boolean> {
   const gameStore = useGameStore()
   const assetStorage = new AssetStorage()
 
   // Check if the texture is already loaded in Phaser
-  if (scene.textures.exists(assetData.key)) {
-    return true
+  if (gameStore.game.loadedAssets.find((asset) => asset.key === assetData.key)) {
+    return Promise.resolve(true)
   }
 
-  // Check if the asset is already cached
-  let asset = await assetStorage.get(assetData.key)
-
-  // If asset is not found, download it
-  if (!asset) {
-    await assetStorage.download(assetData)
-    asset = await assetStorage.get(assetData.key)
+  // If there's already a loading promise for this texture, return it
+  if (textureLoadingPromises.has(assetData.key)) {
+    return await textureLoadingPromises.get(assetData.key)!
   }
 
-  // If asset is found, add it to the scene
-  if (asset) {
-    return new Promise<boolean>((resolve) => {
-      scene.textures.addBase64(asset.key, asset.data)
-      scene.textures.once(`addtexture-${asset.key}`, () => {
-        gameStore.game.loadedAssets.push(asset)
-        resolve(true)
+  // Create new loading promise
+  const loadingPromise = (async () => {
+    // Check if the asset is already cached
+    let asset = await assetStorage.get(assetData.key)
+
+    // If asset is not found, download it
+    if (!asset) {
+      await assetStorage.download(assetData)
+      asset = await assetStorage.get(assetData.key)
+    }
+
+    // If asset is found, add it to the scene
+    if (asset) {
+      return new Promise<boolean>((resolve) => {
+        // Remove existing texture if it exists
+        if (scene.textures.exists(asset.key)) {
+          scene.textures.remove(asset.key)
+        }
+
+        scene.textures.addBase64(asset.key, asset.data)
+        scene.textures.once(`addtexture-${asset.key}`, () => {
+          gameStore.game.loadedAssets.push(assetData)
+          textureLoadingPromises.delete(assetData.key) // Clean up the promise
+          resolve(true)
+        })
       })
-    })
-  }
+    }
 
-  return false
+    textureLoadingPromises.delete(assetData.key) // Clean up the promise
+    return Promise.resolve(false)
+  })()
+
+  // Store the loading promise
+  textureLoadingPromises.set(assetData.key, loadingPromise)
+  return loadingPromise
 }
 
 export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
   const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
   for await (const sprite_action of sprite_actions) {
-
     await loadTexture(scene, {
       key: sprite_action.key,
       data: sprite_action.data,
@@ -62,5 +82,5 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
       repeat: -1
     })
   }
-  return true
-}
+  return Promise.resolve(true)
+}