From 2a8d75b459b9ad3fe5314a0d3f2ae9bfa94a02fd Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Wed, 25 Sep 2024 13:49:41 +0200
Subject: [PATCH] npm update, finished ticket #124 (chat bubble)

---
 package-lock.json           | 22 ++++++-------
 src/components/gui/Chat.vue | 61 ++++++++++++++++++++++++++-----------
 src/screens/Game.vue        |  9 +++++-
 3 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6690e2b..672f982 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1705,9 +1705,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.16.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.6.tgz",
-      "integrity": "sha512-T7PpxM/6yeDE+AdlVysT62BX6/bECZOmQAgiFg5NoBd5MQheZ3tzal7f1wvzfiEcmrcJNRi2zRr2nY2zF+0uqw==",
+      "version": "20.16.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.7.tgz",
+      "integrity": "sha512-QkDQjAY3gkvJNcZOWwzy3BN34RweT0OQ9zJyvLCU0kSK22dO2QYh/NHGfbEAYylPYzRB1/iXcojS79wOg5gFSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2821,9 +2821,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
-      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
+      "integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==",
       "dev": true,
       "funding": [
         {
@@ -2841,8 +2841,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001646",
-        "electron-to-chromium": "^1.5.4",
+        "caniuse-lite": "^1.0.30001663",
+        "electron-to-chromium": "^1.5.28",
         "node-releases": "^2.0.18",
         "update-browserslist-db": "^1.1.0"
       },
@@ -6900,9 +6900,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
-      "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==",
+      "version": "5.4.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 0df409b..7b2d67a 100644
--- a/src/components/gui/Chat.vue
+++ b/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()
 
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index a536b9b..d73261d 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -59,7 +59,14 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  render: { resolution: 10 },
+  scale: {
+    mode: Phaser.Scale.RESIZE,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: window.innerWidth,
+    height: window.innerHeight
+  },
+  resolution: 2,
+  pixelArt: true
 }
 
 const createGame = (game: Phaser.Game) => {