CharHair work

src/components/game/character/Character.vue

@@ -1,12 +1,14 @@
 <template>
   <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
   <Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
+  <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
   <Sprite ref="charSprite" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY" :origin-y="1" :flipX="isFlippedX" />
 </template>
 
 <script lang="ts" setup>
 import config from '@/application/config'
 import { type MapCharacter } from '@/application/types'
+import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
 import Healthbar from '@/components/game/character/partials/Healthbar.vue'
 import { loadSpriteTextures } from '@/composables/gameComposable'
@@ -103,21 +105,41 @@ const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX:
 
 const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
+const currentDirection = computed(() => {
+  return [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'left_up' : 'right_down'
+})
+
+const currentAction = computed(() => {
+  return props.mapCharacter.isMoving ? 'walk' : 'idle'
+})
+
 const charTexture = computed(() => {
   const spriteId = charSpriteId.value ?? 'idle_right_down'
-  const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
-  const direction = [0, 6].includes(props.mapCharacter.character.rotation) ? 'left_up' : 'right_down'
-
-  return `${spriteId}-${action}_${direction}`
+  return `${spriteId}-${currentAction.value}_${currentDirection.value}`
 })
 
 const updateSprite = () => {
+  if (!charSprite.value) return
+
   if (props.mapCharacter.isMoving) {
-    charSprite.value!.anims.play(charTexture.value, true)
+    charSprite.value.anims.play(charTexture.value, true)
   } else {
-    charSprite.value!.anims.stop()
-    charSprite.value!.setFrame(0)
-    charSprite.value!.setTexture(charTexture.value)
+    charSprite.value.anims.stop()
+    charSprite.value.setFrame(0)
+    charSprite.value.setTexture(charTexture.value)
+  }
+}
+
+const handlePositionUpdate = (newValues: any, oldValues: any) => {
+  if (!newValues) return
+
+  if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
+    const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
+    updatePosition(newValues.positionX, newValues.positionY, direction)
+  }
+
+  if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
+    updateSprite()
   }
 }
 
@@ -128,19 +150,7 @@ watch(
     isMoving: props.mapCharacter.isMoving,
     rotation: props.mapCharacter.character.rotation
   }),
-  (newValues, oldValues) => {
-    if (!newValues) return
-
-    if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
-      const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
-      updatePosition(newValues.positionX, newValues.positionY, direction)
-    }
-
-    // Handle animation updates
-    if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
-      updateSprite()
-    }
-  }
+  handlePositionUpdate
 )
 
 onMounted(async () => {
@@ -155,10 +165,11 @@ onMounted(async () => {
 
   await loadSpriteTextures(scene, spriteId)
 
-  charSprite.value!.setTexture(charTexture.value)
-  charSprite.value!.setFlipX(isFlippedX.value)
-
-  charSprite.value!.setName(props.mapCharacter.character!.name)
+  if (charSprite.value) {
+    charSprite.value.setTexture(charTexture.value)
+    charSprite.value.setFlipX(isFlippedX.value)
+    charSprite.value.setName(props.mapCharacter.character.name)
+  }
 
   if (character.id === gameStore.character!.id) {
     mapStore.setCharacterLoaded(true)

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>

src/storage/storages.ts

@@ -40,4 +40,9 @@ export class CharacterHairStorage extends BaseStorage<any> {
   constructor() {
     super('characterHairs', 'id, name, createdAt, updatedAt')
   }
+
+  async getSpriteId(characterTypeId: string) {
+    const characterType = await this.get(characterTypeId)
+    return characterType?.sprite
+  }
 }