Worked on character customisation

src/components/game/character/Character.vue

@@ -71,7 +71,7 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
     return
   }
 
-  const duration = distance * 6
+  const duration = distance * 5.7
 
   tween.value = props.layer.scene.tweens.add({
     targets: { x: currentX.value, y: currentY.value },
@@ -155,7 +155,7 @@ onMounted(() => {
 
     // #146 : Set camera position to character, need to be improved still
     scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
-    scene.cameras.main.stopFollow()
+    // scene.cameras.main.stopFollow()
   }
 
   updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)

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

@@ -1,10 +1,10 @@
 <template>
-  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
+  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" ref="hairImage" />
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
+import { computed, ref, watch } from 'vue'
+import { Image, useScene, refObj } from 'phavuer'
 import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
@@ -17,6 +17,8 @@ const props = defineProps<{
 
 const gameStore = useGameStore()
 const scene = useScene()
+const hairImage = refObj<Phaser.GameObjects.Image>()
+const baseY = ref(0)
 
 const texture = computed(() => {
   const { rotation, characterHair } = props.zoneCharacter.character
@@ -29,14 +31,37 @@ const texture = computed(() => {
 const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 const imageProps = computed(() => ({
   depth: 1,
-  originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.35 : 5.35,
+  originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.30 : 5.30,
   flipX: isFlippedX.value,
   texture: texture.value
 }))
 
+// Watch for movement changes and animate hair
+watch(() => props.zoneCharacter.isMoving, (isMoving) => {
+  if (!hairImage.value) return
+
+  if (isMoving) {
+    // Start bounce animation
+    scene.tweens.add({
+      targets: hairImage.value,
+      x: { from: 0, to: 1 },
+      y: { from: 0, to: 1},
+      duration: 500,
+      yoyo: false,
+      repeat: -1,
+      ease: 'Linear'
+    })
+  } else {
+    // Stop all tweens on this hair image
+    scene.tweens.killTweensOf(hairImage.value)
+    // Reset position
+    hairImage.value.setY(0)
+  }
+})
+
 loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
   .then(() => {})
   .catch((error) => {
     console.error('Error loading texture:', error)
   })
-</script>
+</script>