WIP chat bubble

src/components/gui/Chat.vue

@@ -21,9 +21,13 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, nextTick } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
-import type { Character } from '@/types'
+import type { Character, ChatMessage } from '@/types'
+import { useZoneStore } from '@/stores/zoneStore'
+import { useScene } from 'phavuer'
 
+const scene = useScene()
 const gameStore = useGameStore()
+const zoneStore = useZoneStore()
 
 const message = ref('')
 const chats = ref([] as ChatMessage[])
@@ -55,18 +59,33 @@ const scrollToBottom = () => {
   })
 }
 
-type ChatMessage = {
-  character: Character
-  message: string
-}
-
-onMounted(() => {
   gameStore.connection?.on('chat:message', (data: ChatMessage) => {
     chats.value.push(data)
     scrollToBottom()
+
+    if (zoneStore.characterLoaded) {
+      const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
+      if (charChatContainer) {
+        const text = charChatContainer.getByName(data.character.name + '_text') as Phaser.GameObjects.Text
+        if (text) {
+          text.setText(data.message)
+        } else {
+          return
+        }
+
+        charChatContainer.setVisible(true)
+
+        // Hide chat bubble after a few seconds
+        setTimeout(() => {
+          const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
+          if (charChatContainer) {
+            charChatContainer.setVisible(false)
+          }
+        }, 3000)
+      }
+    }
   })
   scrollToBottom()
-})
 
 onBeforeUnmount(() => {
   gameStore.connection?.off('chat:message')