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

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