npm update, finished ticket #124 (chat bubble)

src/components/gui/Chat.vue

@@ -63,27 +63,54 @@ const scrollToBottom = () => {
     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
-        }
+    if (!zoneStore.characterLoaded) return
 
-        charChatContainer.setVisible(true)
+    const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
+    if (!charChatContainer) return
 
-        // 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)
+    const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
+    const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
+    if (!chatText || !chatBubble) return
+
+    function calculateTextWidth(text: string, font: string, fontSize: number): number {
+      // Create a canvas element
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+
+      if (!context) {
+        throw new Error('Unable to create canvas context');
       }
+
+      // Set the font
+      context.font = `${fontSize}px ${font}`;
+
+      // Measure the text width
+      const metrics = context.measureText(text);
+
+      return metrics.width;
     }
+
+    chatBubble.width = calculateTextWidth(data.message, 'Arial', 13) + 10
+    chatText.setText(data.message)
+
+    charChatContainer.setVisible(true)
+
+    /**
+     * Hide chat bubble after a few seconds
+     */
+
+    // Clear any existing hide timer
+    if (charChatContainer.getData('hideTimer')) {
+      clearTimeout(charChatContainer.getData('hideTimer'))
+    }
+
+    // Set a new hide timer
+    const hideTimer = setTimeout(() => {
+      charChatContainer.setVisible(false)
+    }, 3000)
+
+    // Store the timer on the container itself
+    charChatContainer.setData('hideTimer', hideTimer)
   })
   scrollToBottom()