Character hair refactor, enhancements

src/components/game/character/Character.vue

@@ -2,7 +2,7 @@
   <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
     <ChatBubble :mapCharacter="props.mapCharacter" />
     <HealthBar :mapCharacter="props.mapCharacter" />
-    <CharacterHair :mapCharacter="props.mapCharacter" />
+    <CharacterHair :mapCharacter="props.mapCharacter" :flipX="isFlippedX" />
     <Sprite ref="characterSprite" :flipX="isFlippedX" />
   </Container>
 </template>

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

@@ -1,49 +1,39 @@
 <template>
-  <Image v-bind="imageProps" v-if="hairSpriteId && gameStore.isTextureLoaded(texture)" />
+  <Image ref="image" v-if="hairSpriteId" />
 </template>
 
 <script lang="ts" setup>
 import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
 import { loadSpriteTextures } from '@/services/textureService'
 import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
-import { useGameStore } from '@/stores/gameStore'
-import { Image, useScene } from 'phavuer'
-import { computed, onMounted, ref } from 'vue'
+import { Image, refObj, useScene } from 'phavuer'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   mapCharacter: MapCharacter
 }>()
 
-const gameStore = useGameStore()
 const scene = useScene()
 const hairSpriteId = ref('')
 const hairSprite = ref<SpriteT | null>(null)
 const characterSpriteHeight = ref(0)
+const image = refObj<Phaser.GameObjects.Image>()
 
+const flipX = computed(() => [6, 0].includes(props.mapCharacter.character.rotation ?? 0))
 const texture = computed(() => {
-  const { rotation } = props.mapCharacter.character
-  const direction = [0, 6].includes(rotation) ? 'back' : 'front'
+  const direction = flipX.value ? 'back' : 'front'
 
   return `${hairSpriteId.value}-${direction}`
 })
 
-const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
-
-const imageProps = computed(() => {
-  const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
-  const spriteAction = hairSprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
-
-  const hairHeight = (spriteAction?.frameHeight ?? 0) + (spriteAction?.originY ?? 0)
-  const originY = characterSpriteHeight.value / hairHeight
-
-  return {
-    depth: 9999,
-    originX: 0.5, // This is always center
-    originY: originY, // @TODO #376: See if we can fully calculate this
-    flipX: isFlippedX.value,
-    texture: texture.value
-  }
-})
+watch(
+  () => props.mapCharacter.character,
+  (newValue) => {
+    if (!image.value) return
+    image.value.setTexture(texture.value)
+  },
+  { deep: true }
+)
 
 onMounted(async () => {
   if (!props.mapCharacter.character.characterType || !props.mapCharacter.character.characterHair) return
@@ -63,5 +53,11 @@ onMounted(async () => {
   if (!hairSprite.value) return
 
   await loadSpriteTextures(scene, hairSpriteId.value)
+
+  if (!image.value) return
+
+  image.value.setOrigin(0.5, 2.15)
+  image.value.setTexture(texture.value)
+  image.value.setSize(30, 40)
 })
 </script>