From c544e0a12aab81fc9caf508d14d03844f747683b Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 6 Jul 2024 17:18:39 +0200
Subject: [PATCH] Convert GUI components to Tailwind (where possible smh)

---
 src/components/gui/Hud.vue  | 228 +++++++++---------------------------
 src/components/gui/Menu.vue | 143 ++++++++--------------
 tailwind.config.js          |   3 +
 3 files changed, 104 insertions(+), 270 deletions(-)

diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index a92d320..dbd4e0e 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -1,40 +1,42 @@
 <template>
-  <div class="hud-wrapper">
-    <div class="profile">
-      <img draggable="false" src="/assets/avatar/default/head.png" />
+  <div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
+    <div class="profile absolute w-[54px] h-[54px] bg-white bg-opacity-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>
-    <div class="hud">
-      <div class="stats">
-        <div class="player-details">
-          <span class="player-name">{{ socket.character.name }}</span>
-          <span class="player-lvl">lvl. {{ socket.character.level }}</span>
+    <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="w-full flex items-center justify-between mb-1.5">
+          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
+          <span class="text-sm">lvl. {{ socket.character.level }}</span>
         </div>
-        <div class="bar">
-          <label for="hp">HP</label>
-          <progress id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
+        <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="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
         </div>
-        <div class="bar">
-          <label for="mp">MP</label>
-          <progress id="mp" :value="socket.character.mana" max="100">{{ socket.character.mana }}%</progress>
+        <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="socket.character.mana" max="100">{{ socket.character.mana }}%</progress>
         </div>
       </div>
     </div>
   </div>
 
   <!-- TODO: Replace socket.character with other (selected) player's -->
-  <div class="hud-wrapper other-player">
-    <div class="profile">
-      <img draggable="false" src="/assets/avatar/default/head.png" />
+  <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
+    <div class="absolute w-[54px] h-[54px] bg-white bg-opacity-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>
-    <div class="hud">
-      <div class="stats">
-        <div class="player-details">
-          <span class="player-name">{{ socket.character.name }}</span>
-          <span class="player-lvl">lvl. {{ socket.character.level }}</span>
+    <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="w-full flex items-center justify-between mb-1.5">
+          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ socket.character.name }}</span>
+          <span class="text-sm">lvl. {{ socket.character.level }}</span>
         </div>
-        <div class="bar">
-          <label for="hp">HP</label>
-          <progress id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
+        <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="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
         </div>
       </div>
     </div>
@@ -48,161 +50,41 @@ const socket = useSocketStore()
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/scss/main';
-
 .hud-wrapper {
-  position: relative;
-  left: 0;
-  width: 315px;
-  height: 84px;
-
-  .hud,
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 30px;
-    width: 280px;
-    height: 84px;
-    z-index: 1;
-  }
-
-  .profile {
-    position: absolute;
-    width: 54px;
-    height: 54px;
-    background-color: rgba($white, 0.8);
-    border-radius: 100%;
-    border: 3px solid $white;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    z-index: 2; // Ensure profile is above hud and before
-    img {
-      width: 28px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  .hud {
-    background: url('/assets/shapes/hud-shape-empty.svg') center/cover no-repeat;
-    .stats {
-      height: calc(100% - 30px);
-      display: flex;
-      flex-direction: column;
-      align-items: end;
-      padding: 15px 20px 15px 50px;
-
-      .player-details,
-      .bar {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        span,
-        label {
-          font-size: 14px;
-        }
-        .player-name {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          max-width: 125px;
-        }
-      }
-
-      .player-details {
-        margin-bottom: 5px;
-      }
-
-      .bar {
-        progress {
-          -webkit-appearance: none;
-          appearance: none;
-          height: 8px;
-          border-radius: 8px;
-          width: 100%;
-          max-width: 175px;
-
-          &#hp {
-            accent-color: $red;
-            // Chrome, Safari, Edge, Opera
-            &::-webkit-progress-value {
-              background: $red;
-              border-radius: 8px;
-            }
-            &::-webkit-progress-bar {
-              background: $white;
-              border-radius: 8px;
-              border: 2px solid $white;
-            }
-            // Firefox
-            &::-moz-progress-bar {
-              background: $red;
-              border-radius: 8px;
-              border: 2px solid $white;
-            }
-          }
-          &#mp {
-            accent-color: $light-blue;
-            // Chrome, Safari, Edge, Opera
-            &::-webkit-progress-value {
-              background: $light-blue;
-              border-radius: 8px;
-            }
-            &::-webkit-progress-bar {
-              background: $white;
-              border-radius: 8px;
-              border: 2px solid $white;
-            }
-            // Firefox
-            &::-moz-progress-bar {
-              background: $light-blue;
-              border-radius: 8px;
-              border: 2px solid $white;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &::before {
-    content: '';
-    background: url('/assets/bg-hud-2.png') top/cover no-repeat;
+  .hud-bg {
     mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
   }
+  #hp {
+    // Chrome, Safari, Edge, Opera
+    &::-webkit-progress-value {
+      @apply bg-red rounded-lg;
+    }
+    &::-webkit-progress-bar {
+      @apply bg-white rounded-lg border-2 border-solid border-white;
+    }
+    // Firefox
+    &::-moz-progress-bar {
+      @apply bg-red rounded-lg border-2 border-solid border-white;
+    }
+  }
+  #mp {
+    // Chrome, Safari, Edge, Opera
+    &::-webkit-progress-value {
+      @apply bg-blue rounded-lg;
+    }
+    &::-webkit-progress-bar {
+      @apply bg-white rounded-lg border-2 border-solid border-white;
+    }
+    // Firefox
+    &::-moz-progress-bar {
+      @apply bg-blue rounded-lg border-2 border-solid border-white;
+    }
+  }
 
   &.other-player {
-    left: unset;
-    right: 0;
-
-    &::before {
-      left: unset;
-      right: 30px;
-      background: url('/assets/bg-hud-2.png') center/cover no-repeat;
+    .hud-bg {
       mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
     }
-
-    .profile {
-      left: unset;
-      right: 0;
-      img {
-        transform: translate(-50%, -50%) scaleX(-1);
-      }
-    }
-
-    .hud {
-      left: unset;
-      right: 30px;
-      transform: scaleX(-1);
-      .stats {
-        transform: scaleX(-1);
-        padding: 15px 50px 15px 20px;
-      }
-    }
   }
 }
 </style>
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index d05eb37..eac6e54 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -1,106 +1,55 @@
 <template>
-  <div class="menu-wrapper">
-    <ul class="menu">
-      <li class="menu-item">
-        <p>Chat</p>
-        <a>
-          <img draggable="false" src="/assets/icons/chat.png" />
-        </a>
-      </li>
-      <li class="menu-item">
-        <p>World</p>
-        <a>
-          <img draggable="false" src="/assets/icons/world.png" />
-        </a>
-      </li>
-      <li class="menu-item">
-        <p>Users</p>
-        <a>
-          <img draggable="false" src="/assets/icons/users.png" />
-        </a>
-      </li>
-      <li class="menu-item">
-        <p>Inventory</p>
-        <a>
-          <img draggable="false" src="/assets/icons/treasure-chest.png" />
-        </a>
-      </li>
-    </ul>
-  </div>
+  <ul class="list-none flex gap-2.5">
+    <li class="menu-item relative">
+      <div class="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="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>
+      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
+      </a>
+    </li>
+    <li class="menu-item relative">
+      <div class="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="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>
+      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
+      </a>
+    </li>
+    <li class="menu-item relative">
+      <div class="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="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>
+      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
+      </a>
+    </li>
+    <li class="menu-item relative">
+      <div class="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="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>
+      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
+      </a>
+    </li>
+  </ul>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped lang="scss">
-@import '@/assets/scss/main';
+.menu-item:hover {
+  div {
+    @apply block;
+  }
 
-.menu-wrapper {
-  .menu {
-    list-style: none;
-    display: flex;
-    gap: 10px;
+  a {
+    @apply bg-gray bg-opacity-70 cursor-pointer;
 
-    .menu-item {
-      position: relative;
-
-      p {
-        position: absolute;
-        bottom: 65px;
-        width: 85px;
-        text-align: center;
-        background-color: $dark-gray;
-        border: 2px solid $cyan;
-        border-radius: 24px;
-        height: 24px;
-        font-size: 0.875rem;
-        line-height: 24px;
-        left: 50%;
-        transform: translateX(-50%);
-        display: none;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: calc(100% + 2px);
-          background-color: $white;
-          height: 8px;
-          width: 14px;
-          clip-path: polygon(100% 0, 0 0, 50% 100%);
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-
-      a {
-        padding: 8px;
-        background-color: rgba($dark-gray, 0.7);
-        border: 2px solid $cyan;
-        border-radius: 8px;
-        display: block;
-        width: 45px;
-        height: 35px;
-
-        img {
-          height: inherit;
-          width: inherit;
-          object-fit: contain;
-        }
-      }
-
-      &:hover {
-        p {
-          display: block;
-        }
-
-        a {
-          background-color: rgba($gray, 0.7);
-          cursor: pointer;
-
-          img {
-            filter: drop-shadow(0px 3px 6px $black);
-          }
-        }
-      }
+    img {
+      @apply drop-shadow-default;
     }
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 49b496c..220ad0f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,9 @@ export default {
       '30px': '30px'
     },
     extend: {
+      dropShadow: {
+        'default': '0 3px 6px rgb(0, 0, 0)'
+      },
       colors: {
         red: {
           DEFAULT: '#d50000',