From 112bb21ccbb13fedc894bc8ff55c467e74242ca4 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 21 Jul 2024 16:22:13 +0200
Subject: [PATCH] Convert px to tailwind formats where possible on game screen

---
 src/assets/scss/main.scss   |  2 +-
 src/components/gui/Chat.vue |  2 +-
 src/components/gui/Hud.vue  | 30 ++++++++++++++--------------
 src/components/gui/Menu.vue | 40 ++++++++++++++++++-------------------
 4 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index b4ef273..4fdd466 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -8,7 +8,7 @@
 //Globals
 
 body {
-  @apply bg-black m-0 select-none overscroll-none;
+  @apply bg-black m-0 select-none overscroll-none overflow-hidden;
   -ms-overflow-style: none;
   scrollbar-width: none;
 
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 3845a18..52e81a7 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -1,5 +1,5 @@
 <template>
   <div class="chat-wrapper w-full h-full flex justify-start items-center">
-    <input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white/85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
+    <input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-12 rounded-lg text-xl px-6 py-0 bg-white/85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
   </div>
 </template>
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index 5726d1e..2788569 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
-    <div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
-      <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%]" draggable="false" src="/assets/avatar/default/head.png" />
+    <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 left-0 z-20">
+      <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" draggable="false" src="/assets/avatar/default/head.png" />
     </div>
-    <div class="hud-bg absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top 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 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
-      <div class="h-[64px] flex flex-col items-end py-[10px] pl-[50px] pr-[20px]">
+    <div class="hud-bg absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top 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 left-8 w-[280px] h-[84px] z-10 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 py-2.5 pl-12 pr-5">
         <div class="w-full flex items-center justify-between mb-1.5">
-          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ gameStore.character.name }}</span>
+          <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-[175px] appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
+          <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 class="w-full flex items-center justify-between">
           <label class="text-sm" for="mp">MP</label>
-          <progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
+          <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
         </div>
       </div>
     </div>
@@ -24,19 +24,19 @@
 
   <!-- 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-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
-      <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
+    <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-[30px] 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-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
-      <div class="h-[64px] flex flex-col items-end scale-x-[-1] py-[10px] pr-[50px] pl-[20px]">
+    <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-[125px] text-sm">{{ gameStore.character.name }}</span>
+          <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-[175px] appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
+          <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>
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index 2945a86..528c377 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -1,39 +1,39 @@
 <template>
   <ul class="list-none flex gap-2.5 items-center">
     <li class="menu-item group relative">
-      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
-        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>
-        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+      <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-white 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-[45px] h-[35px]">
-        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
+      <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">
+        <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/chat.png" />
       </a>
     </li>
     <li class="menu-item group relative">
-      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
-        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p>
-        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+      <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">World</p>
+        <div class="group-hover:block absolute -bottom-2.5 bg-white 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-[45px] h-[35px]">
-        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
+      <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">
+        <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/world.png" />
       </a>
     </li>
     <li class="menu-item group relative">
-      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
-        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p>
-        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+      <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">Users</p>
+        <div class="group-hover:block absolute -bottom-2.5 bg-white 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-[45px] h-[35px]">
-        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
+      <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">
+        <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" />
       </a>
     </li>
     <li class="menu-item group relative">
-      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
-        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p>
-        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+      <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">Inventory</p>
+        <div class="group-hover:block absolute -bottom-2.5 bg-white 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-[45px] h-[35px]">
-        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
+      <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">
+        <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
       </a>
     </li>
   </ul>