CharHair work

src/components/game/character/partials/CharacterHair.vue

@@ -1,13 +1,14 @@
 <template>
-  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
+  <Image v-bind="imageProps" v-if="gameStore.isTextureLoaded(texture)" />
 </template>
 
 <script lang="ts" setup>
 import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
+import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
   mapCharacter: MapCharacter
@@ -17,21 +18,21 @@ const props = defineProps<{
 
 const gameStore = useGameStore()
 const scene = useScene()
+const hairSpriteId = ref('')
+const sprite = ref<SpriteT | null>(null)
 
 const texture = computed(() => {
-  const { rotation, characterHair } = props.mapCharacter.character
-  const spriteId = characterHair?.sprite?.id
+  const { rotation } = props.mapCharacter.character
   const direction = [0, 6].includes(rotation) ? 'back' : 'front'
 
-  return `${spriteId}-${direction}`
+  return `${hairSpriteId.value}-${direction}`
 })
 
 const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
 const imageProps = computed(() => {
-  // Get the current sprite action based on direction
   const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
-  const spriteAction = props.mapCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
+  const spriteAction = sprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
 
   return {
     depth: 1,
@@ -39,13 +40,19 @@ const imageProps = computed(() => {
     originY: Number(spriteAction?.originY) ?? 0,
     flipX: isFlippedX.value,
     texture: texture.value,
-    y: props.mapCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
+    y: props.currentY,
+    x: props.currentX
   }
 })
 
-loadSpriteTextures(scene, props.mapCharacter.character.characterHair?.sprite as SpriteT)
-  .then(() => {})
-  .catch((error) => {
-    console.error('Error loading texture:', error)
-  })
+onMounted(async () => {
+  const characterHairStorage = new CharacterHairStorage()
+  const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair!)
+  if (!spriteId) return
+
+  hairSpriteId.value = spriteId
+  const spriteStorage = new SpriteStorage()
+  sprite.value = await spriteStorage.get(spriteId)
+  await loadSpriteTextures(scene, spriteId)
+})
 </script>