From b5c1c92b04fb52155857182fa84d374f91c86c03 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 10 Dec 2024 02:22:03 +0100
Subject: [PATCH] Worked on character customisation

---
 package-lock.json                             | 27 +++++++-------
 src/components/game/character/Character.vue   |  4 +--
 .../game/character/partials/CharacterHair.vue | 35 ++++++++++++++++---
 src/composables/gameComposable.ts             |  2 +-
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5959140..0001c9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2203,9 +2203,9 @@
       }
     },
     "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",
+      "integrity": "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==",
       "dev": true,
       "license": "ISC"
     },
@@ -2817,14 +2817,11 @@
       }
     },
     "node_modules/agent-base": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.2.tgz",
-      "integrity": "sha512-JVzqkCNRT+VfqzzgPWDPnwvDheSAUdiMUn3NoLXpDJF5lRqeJqyC9iGsAxIOAW+mzIdq+uP1TvcX6bMtrH0agg==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
       "engines": {
         "node": ">= 14"
       }
@@ -3597,9 +3594,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.71",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
-      "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
+      "version": "1.5.72",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.72.tgz",
+      "integrity": "sha512-ZpSAUOZ2Izby7qnZluSrAlGgGQzucmFbN0n64dYzocYxnxV5ufurpj3VgEe4cUp7ir9LmeLxNYo8bVnlM8bQHw==",
       "dev": true,
       "license": "ISC"
     },
@@ -4026,9 +4023,9 @@
       }
     },
     "node_modules/execa": {
-      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-9.5.1.tgz",
-      "integrity": "sha512-QY5PPtSonnGwhhHDNI7+3RvY285c7iuJFFB+lU+oEzMY/gEGJ808owqJsrr8Otd1E/x07po1LkUBmdAc5duPAg==",
+      "version": "9.5.2",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.5.2.tgz",
+      "integrity": "sha512-EHlpxMCpHWSAh1dgS6bVeoLAXGnJNdR93aabr4QCGbzOM73o5XmRfM/e5FUqsw3aagP8S8XEWUWFAxnRBnAF0Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue
index f682b05..3b0b659 100644
--- a/src/components/game/character/Character.vue
+++ b/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)
diff --git a/src/components/game/character/partials/CharacterHair.vue b/src/components/game/character/partials/CharacterHair.vue
index a1d444f..4e20a61 100644
--- a/src/components/game/character/partials/CharacterHair.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/composables/gameComposable.ts b/src/composables/gameComposable.ts
index eb3d1f3..e8f41ea 100644
--- a/src/composables/gameComposable.ts
+++ b/src/composables/gameComposable.ts
@@ -82,7 +82,7 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
     scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
     scene.anims.create({
       key: sprite_action.key,
-      frameRate: 7,
+      frameRate: 7, // TODO | 262 : Allow configuring frame rate
       frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
       repeat: -1
     })