From 558bf675b05e9ed31a59818126b3c66fe4db69c2 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Wed, 21 Aug 2024 02:45:49 +0200
Subject: [PATCH] Chat changes

---
 package-lock.json                    | 24 +++++++++----------
 src/components/gui/Chat.vue          | 14 +++++------
 src/components/gui/Hud.vue           | 36 ++++++++++++++--------------
 src/components/gui/Menu.vue          | 10 ++++----
 src/components/sprites/Character.vue |  5 +++-
 src/screens/Game.vue                 | 22 ++++++++++-------
 6 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 46c0a3a..25be2b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3385,9 +3385,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.11",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.11.tgz",
-      "integrity": "sha512-R1CccCDYqndR25CaXFd6hp/u9RaaMcftMkphmvuepXr5b1vfLkRml6aWVeBhXJ7rbevHkKEMJtz8XqPf7ffmew==",
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz",
+      "integrity": "sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==",
       "dev": true,
       "license": "ISC"
     },
@@ -6883,15 +6883,15 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",
-      "integrity": "sha512-1oE6yuNXssjrZdblI9AfBbHCC41nnyoVoEZxQnID6yvQZAFBzxxkqoFLtHUMkYunL8hwOLEjgTuxpkRxvba3kA==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
+      "integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.41",
-        "rollup": "^4.13.0"
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -6979,16 +6979,16 @@
       }
     },
     "node_modules/vite-plugin-inspect": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.5.tgz",
-      "integrity": "sha512-JvTUqsP1JNDw0lMZ5Z/r5cSj81VK2B7884LO1DC3GMBhdcjcsAnJjdWq7bzQL01Xbh+v60d3lju3g+z7eAtNew==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.6.tgz",
+      "integrity": "sha512-iM/smnFRSuDq9UMVAN06fqBbHAofGDtB5yBucsl0QnPCFqQ2TmPIbsSgSR3gUv13qJ8oPE/FFhXlm9g1xX9nzg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@antfu/utils": "^0.7.10",
         "@rollup/pluginutils": "^5.1.0",
-        "debug": "^4.3.5",
-        "error-stack-parser-es": "^0.1.4",
+        "debug": "^4.3.6",
+        "error-stack-parser-es": "^0.1.5",
         "fs-extra": "^11.2.0",
         "open": "^10.1.0",
         "perfect-debounce": "^1.0.0",
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 3571a76..a7d45a1 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="w-full h-full flex flex-col justify-end">
-    <div ref="chatWindow" class="w-[calc(100%_-_36px)] max-w-[750px] min-h-36 mb-5 overflow-y-auto bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200 p-4">
-      <div v-for="message in chats" class="flex-col py-2 items-center">
-        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm text-gray-50">{{ message.character.name }}</span>
-        <p class="text-sm m-0">{{ message.message }}</p>
+  <div class="w-full min-w-[750px] flex flex-col">
+    <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen">
+      <div v-for="message in chats" class="flex-col py-2 items-center p-3">
+        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span>
+        <p class="text-sm text-gray-50 m-0">{{ message.message }}</p>
       </div>
     </div>
-    <div class="w-full flex mb-5">
+    <div class="w-full flex">
       <input
-        class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-12 rounded-lg text-xl px-4 py-0 bg-gray-300/80 border-2 border-solid border-cyan-200 text-gray-50 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px focus:outline-none focus:ring-0 focus:border-cyan-800"
+        class="w-full h-12 rounded-lg text-lg px-4 py-0 bg-gray-300/80 border-2 border-solid border-cyan-200 text-gray-50 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-[right_25px_center] bg-[length:30px] focus:outline-none focus:ring-0 focus:border-cyan-800"
         placeholder="Type something..."
         v-model="message"
         @keypress="handleKeyPress"
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index 2788569..98c2399 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -23,24 +23,24 @@
   </div>
 
   <!-- TODO: Replace gameStore.character with other (selected) player's -->
-  <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
-    <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20">
-      <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" />
-    </div>
-    <div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
-    <div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
-      <div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5">
-        <div class="w-full flex items-center justify-between mb-1.5">
-          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>
-          <span class="text-sm">lvl. {{ gameStore.character.level }}</span>
-        </div>
-        <div class="w-full flex items-center justify-between">
-          <label class="text-sm" for="hp">HP</label>
-          <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
-        </div>
-      </div>
-    </div>
-  </div>
+<!--  <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">-->
+<!--    <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20">-->
+<!--      <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" />-->
+<!--    </div>-->
+<!--    <div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>-->
+<!--    <div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">-->
+<!--      <div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5">-->
+<!--        <div class="w-full flex items-center justify-between mb-1.5">-->
+<!--          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>-->
+<!--          <span class="text-sm">lvl. {{ gameStore.character.level }}</span>-->
+<!--        </div>-->
+<!--        <div class="w-full flex items-center justify-between">-->
+<!--          <label class="text-sm" for="hp">HP</label>-->
+<!--          <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index d4e62b5..f946fe2 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -1,11 +1,11 @@
 <template>
-  <ul class="list-none flex gap-2.5 items-center">
+  <ul class="list-none flex gap-2.5 items-center m-0">
     <li class="menu-item group relative" @click="gameStore.toggleChat">
       <div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Chat</p>
         <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
       </div>
-      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
         <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/chat.png" />
       </a>
     </li>
@@ -14,7 +14,7 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6">World</p>
         <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
       </div>
-      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
         <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/world.png" />
       </a>
     </li>
@@ -23,7 +23,7 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Users</p>
         <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
       </div>
-      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
         <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" />
       </a>
     </li>
@@ -32,7 +32,7 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Inventory</p>
         <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
       </div>
-      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
+      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-11 h-9">
         <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
       </a>
     </li>
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index eaff3ea..39e3cf7 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,5 +1,9 @@
 <template>
   <Container v-if="props.character" :x="currentX" :y="currentY">
+<!--    Start chat bubble -->
+<!--    <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
+<!--    <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
+<!--    End chat bubble -->
     <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
     <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" />
@@ -90,7 +94,6 @@ const charTexture = computed(() => {
 })
 
 const createText = (text: Phaser.GameObjects.Text) => {
-  text.setColor('#ffffff')
   text.setFontSize(13)
   text.setFontFamily('Arial')
 }
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 897e512..744b9d6 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -2,20 +2,24 @@
   <div class="flex justify-center items-center h-dvh p-8 relative">
     <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
+<!--    <Inventory />-->
 
     <div v-if="!zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame">
         <Scene name="main" @preload="preloadScene" @create="createScene">
-          <div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
-            <Hud />
-          </div>
-          <!--          <Inventory />-->
-          <World v-if="isLoaded" :key="gameStore.character?.zoneId" />
-          <div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
-            <div class="w-full">
-              <Chat v-show="gameStore.isChatOpen" />
+          <div class="fixed inset-x-0 top-0 flex justify-start items-end p-10 pointer-events-none">
+            <div class="pointer-events-auto">
+              <Hud />
+            </div>
+          </div>
+          <World v-if="isLoaded" :key="gameStore.character?.zoneId" />
+          <div class="fixed inset-x-0 bottom-0 flex justify-between items-end p-10 pointer-events-none">
+            <div class="pointer-events-auto">
+              <Chat />
+            </div>
+            <div class="pointer-events-auto">
+              <Menubar />
             </div>
-            <Menubar />
           </div>
         </Scene>
       </Game>