#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>