From af26ca5e89fecf9fc54b13413af2282687676356 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 1 Feb 2025 15:27:14 +0100
Subject: [PATCH] Added container for character for easier X and Y coord
 handling

---
 src/components/game/character/Character.vue   | 17 +++++----
 .../game/character/partials/CharacterHair.vue |  6 +--
 .../game/character/partials/ChatBubble.vue    |  4 +-
 .../game/character/partials/HealthBar.vue     |  4 +-
 .../useCharacterSpriteComposable.ts           | 38 ++++++++++---------
 5 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue
index f1d2593..bdc8174 100644
--- a/src/components/game/character/Character.vue
+++ b/src/components/game/character/Character.vue
@@ -1,8 +1,10 @@
 <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" />
+  <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY">
+    <ChatBubble :mapCharacter="props.mapCharacter" />
+    <HealthBar :mapCharacter="props.mapCharacter" />
+    <CharacterHair :mapCharacter="props.mapCharacter" />
+    <Sprite ref="characterSprite" :depth="isometricDepth" :origin-y="1" :flipX="isFlippedX" />
+  </Container>
 </template>
 
 <script lang="ts" setup>
@@ -13,7 +15,7 @@ import HealthBar from '@/components/game/character/partials/HealthBar.vue'
 import { useCharacterSprite } from '@/composables/useCharacterSpriteComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
-import { Sprite, useScene } from 'phavuer'
+import { Container, Sprite, useScene } from 'phavuer'
 import { onMounted, onUnmounted, watch } from 'vue'
 import { Direction } from '@/application/enums'
 
@@ -27,7 +29,8 @@ const mapStore = useMapStore()
 const scene = useScene()
 
 const {
-  charSprite,
+  characterContainer,
+  characterSprite,
   currentPositionX,
   currentPositionY,
   isometricDepth,
@@ -68,7 +71,7 @@ onMounted(async () => {
 
   if (props.mapCharacter.character.id === gameStore.character!.id) {
     mapStore.setCharacterLoaded(true)
-    scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite)
+    scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
   }
 })
 
diff --git a/src/components/game/character/partials/CharacterHair.vue b/src/components/game/character/partials/CharacterHair.vue
index e99fcb4..2be8bcf 100644
--- a/src/components/game/character/partials/CharacterHair.vue
+++ b/src/components/game/character/partials/CharacterHair.vue
@@ -12,8 +12,6 @@ import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
   mapCharacter: MapCharacter
-  currentX: number
-  currentY: number
 }>()
 
 const gameStore = useGameStore()
@@ -39,9 +37,7 @@ const imageProps = computed(() => {
     originX: Number(spriteAction?.originX) ?? 0,
     originY: Number(spriteAction?.originY) ?? 0,
     flipX: isFlippedX.value,
-    texture: texture.value,
-    y: props.currentY,
-    x: props.currentX
+    texture: texture.value
   }
 })
 
diff --git a/src/components/game/character/partials/ChatBubble.vue b/src/components/game/character/partials/ChatBubble.vue
index 45e6180..6b05b98 100644
--- a/src/components/game/character/partials/ChatBubble.vue
+++ b/src/components/game/character/partials/ChatBubble.vue
@@ -1,5 +1,5 @@
 <template>
-  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
+  <Container ref="charChatContainer" :depth="999">
     <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
     <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
   </Container>
@@ -12,8 +12,6 @@ import { onMounted } from 'vue'
 
 const props = defineProps<{
   mapCharacter: MapCharacter
-  currentX: number
-  currentY: number
 }>()
 
 const game = useGame()
diff --git a/src/components/game/character/partials/HealthBar.vue b/src/components/game/character/partials/HealthBar.vue
index b28196a..7b91330 100644
--- a/src/components/game/character/partials/HealthBar.vue
+++ b/src/components/game/character/partials/HealthBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <Container :depth="999" :x="currentX" :y="currentY">
+  <Container :depth="999">
     <Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
     <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
@@ -12,8 +12,6 @@ import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 
 const props = defineProps<{
   mapCharacter: MapCharacter
-  currentX: number
-  currentY: number
 }>()
 
 const game = useGame()
diff --git a/src/composables/useCharacterSpriteComposable.ts b/src/composables/useCharacterSpriteComposable.ts
index 500d768..c25c22d 100644
--- a/src/composables/useCharacterSpriteComposable.ts
+++ b/src/composables/useCharacterSpriteComposable.ts
@@ -7,8 +7,9 @@ import { computed, ref } from 'vue'
 import { Direction } from '@/application/enums'
 
 export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps.Tilemap, mapCharacter: MapCharacter) {
-  const charSprite = refObj<Phaser.GameObjects.Sprite>()
-  const charSpriteId = ref('')
+  const characterContainer = refObj<Phaser.GameObjects.Container>()
+  const characterSpriteId = ref('')
+  const characterSprite = refObj<Phaser.GameObjects.Sprite>()
   const currentPositionX = ref(0)
   const currentPositionY = ref(0)
   const isometricDepth = ref(1)
@@ -39,7 +40,7 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
     const duration = (distance / baseSpeed) * 1000 // Convert to milliseconds
 
     tween.value = tilemap.scene.tweens.add({
-      targets: charSprite.value,
+      targets: characterContainer.value,
       x: newPositionX,
       y: newPositionY,
       duration,
@@ -50,8 +51,8 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
         }
       },
       onUpdate: () => {
-        currentPositionX.value = charSprite.value?.x ?? currentPositionX.value
-        currentPositionY.value = charSprite.value?.y ?? currentPositionY.value
+        currentPositionX.value = characterContainer.value?.x ?? currentPositionX.value
+        currentPositionY.value = characterContainer.value?.y ?? currentPositionY.value
       },
       onComplete: () => {
         if (direction === Direction.NEGATIVE) {
@@ -78,19 +79,19 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
   })
 
   const charTexture = computed(() => {
-    const spriteId = charSpriteId.value ?? 'idle_right_down'
+    const spriteId = characterSpriteId.value ?? 'idle_right_down'
     return `${spriteId}-${currentAction.value}_${currentDirection.value}`
   })
 
   const updateSprite = () => {
-    if (!charSprite.value) return
+    if (!characterSprite.value) return
 
     if (mapCharacter.isMoving) {
-      charSprite.value.anims.play(charTexture.value, true)
+      characterSprite.value.anims.play(charTexture.value, true)
     } else {
-      charSprite.value.anims.stop()
-      charSprite.value.setFrame(0)
-      charSprite.value.setTexture(charTexture.value)
+      characterSprite.value.anims.stop()
+      characterSprite.value.setFrame(0)
+      characterSprite.value.setTexture(charTexture.value)
     }
   }
 
@@ -99,13 +100,13 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
     const spriteId = await characterTypeStorage.getSpriteId(mapCharacter.character.characterType!)
     if (!spriteId) return
 
-    charSpriteId.value = spriteId
+    characterSpriteId.value = spriteId
     await loadSpriteTextures(scene, spriteId)
 
-    if (charSprite.value) {
-      charSprite.value.setTexture(charTexture.value)
-      charSprite.value.setFlipX(isFlippedX.value)
-      charSprite.value.setName(mapCharacter.character.name)
+    if (characterSprite.value) {
+      characterSprite.value.setTexture(charTexture.value)
+      characterSprite.value.setFlipX(isFlippedX.value)
+      characterSprite.value.setName(mapCharacter.character.name)
     }
 
     updatePosition(mapCharacter.character.positionX, mapCharacter.character.positionY, mapCharacter.character.rotation)
@@ -116,8 +117,9 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
   }
 
   return {
-    charSprite,
-    charSpriteId,
+    characterContainer,
+    characterSpriteId,
+    characterSprite,
     currentPositionX,
     currentPositionY,
     isometricDepth,