From db426bb03e361f737248185ec6d05c07bfdd66fa Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 1 Feb 2025 15:48:42 +0100
Subject: [PATCH] Fix for chat bubble

---
 src/components/game/character/Character.vue   |  2 +-
 .../game/character/partials/ChatBubble.vue    |  8 +++----
 src/components/game/gui/Chat.vue              | 21 +++++++++++--------
 .../useCharacterSpriteComposable.ts           |  5 ++++-
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue
index bdc8174..8f21847 100644
--- a/src/components/game/character/Character.vue
+++ b/src/components/game/character/Character.vue
@@ -1,5 +1,5 @@
 <template>
-  <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY">
+  <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="1">
     <ChatBubble :mapCharacter="props.mapCharacter" />
     <HealthBar :mapCharacter="props.mapCharacter" />
     <CharacterHair :mapCharacter="props.mapCharacter" />
diff --git a/src/components/game/character/partials/ChatBubble.vue b/src/components/game/character/partials/ChatBubble.vue
index 6b05b98..8ccc9fb 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">
+  <Container ref="characterChatContainer" :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>
@@ -15,7 +15,7 @@ const props = defineProps<{
 }>()
 
 const game = useGame()
-const charChatContainer = refObj<Phaser.GameObjects.Container>()
+const characterChatContainer = refObj<Phaser.GameObjects.Container>()
 
 const createChatBubble = (container: Phaser.GameObjects.Container) => {
   container.setName(`${props.mapCharacter.character.name}_chatBubble`)
@@ -39,7 +39,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
 }
 
 onMounted(() => {
-  charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
-  charChatContainer.value!.setVisible(false)
+  characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
+  characterChatContainer.value!.setVisible(false)
 })
 </script>
diff --git a/src/components/game/gui/Chat.vue b/src/components/game/gui/Chat.vue
index 8033678..5c50f35 100644
--- a/src/components/game/gui/Chat.vue
+++ b/src/components/game/gui/Chat.vue
@@ -85,11 +85,14 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
 
   if (!mapStore.characterLoaded) return
 
-  const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
-  if (!charChatContainer) return
+  const characterContainer = scene.children.getByName(data.character.name) as Phaser.GameObjects.Container
+  if (!characterContainer) return
 
-  const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
-  const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
+  const characterChatContainer = characterContainer.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
+  if (!characterChatContainer) return
+
+  const chatBubble = characterChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
+  const chatText = characterChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
   if (!chatText || !chatBubble) return
 
   function calculateTextWidth(text: string, font: string, fontSize: number): number {
@@ -115,24 +118,24 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
   // setText but with max. char limit of 90
   chatText.setText(data.message.substring(0, 90))
 
-  charChatContainer.setVisible(true)
+  characterChatContainer.setVisible(true)
 
   /**
    * Hide chat bubble after a few seconds
    */
 
   // Clear any existing hide timer
-  if (charChatContainer.getData('hideTimer')) {
-    clearTimeout(charChatContainer.getData('hideTimer'))
+  if (characterChatContainer.getData('hideTimer')) {
+    clearTimeout(characterChatContainer.getData('hideTimer'))
   }
 
   // Set a new hide timer
   const hideTimer = setTimeout(() => {
-    charChatContainer.setVisible(false)
+    characterChatContainer.setVisible(false)
   }, 3000)
 
   // Store the timer on the container itself
-  charChatContainer.setData('hideTimer', hideTimer)
+  characterChatContainer.setData('hideTimer', hideTimer)
 })
 scrollToBottom()
 
diff --git a/src/composables/useCharacterSpriteComposable.ts b/src/composables/useCharacterSpriteComposable.ts
index c25c22d..d2f6833 100644
--- a/src/composables/useCharacterSpriteComposable.ts
+++ b/src/composables/useCharacterSpriteComposable.ts
@@ -103,10 +103,13 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
     characterSpriteId.value = spriteId
     await loadSpriteTextures(scene, spriteId)
 
+    if (characterContainer.value) {
+      characterContainer.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)