More WIP ingame UI

Temporary skill icons, adjusted borders globally

public/assets/icons/close-button-white.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0" viewBox="5853.755 6642.086 23.788 23.788" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0"><g class="fills" id="fills-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0"><path d="M5867.837,6654.000L5877.045,6644.792C5877.199,6644.649,5877.322,6644.476,5877.408,6644.284C5877.493,6644.093,5877.539,6643.886,5877.543,6643.676C5877.546,6643.466,5877.508,6643.258,5877.429,6643.063C5877.350,6642.869,5877.234,6642.692,5877.085,6642.544C5876.937,6642.395,5876.760,6642.278,5876.565,6642.200C5876.371,6642.121,5876.163,6642.082,5875.953,6642.086C5875.743,6642.090,5875.536,6642.136,5875.344,6642.221C5875.153,6642.307,5874.980,6642.430,5874.837,6642.583L5865.629,6651.792L5856.420,6642.583C5856.124,6642.307,5855.732,6642.157,5855.328,6642.164C5854.923,6642.171,5854.537,6642.335,5854.250,6642.622C5853.964,6642.908,5853.800,6643.294,5853.793,6643.699C5853.786,6644.104,5853.936,6644.495,5854.212,6644.792L5863.420,6654.000L5854.212,6663.208C5853.919,6663.501,5853.755,6663.898,5853.755,6664.312C5853.755,6664.726,5853.919,6665.124,5854.212,6665.417C5854.505,6665.709,5854.902,6665.874,5855.316,6665.874C5855.730,6665.874,5856.127,6665.709,5856.420,6665.417L5865.629,6656.208L5874.837,6665.417C5875.130,6665.709,5875.527,6665.874,5875.941,6665.874C5876.355,6665.874,5876.753,6665.709,5877.045,6665.417C5877.338,6665.124,5877.502,6664.726,5877.502,6664.312C5877.502,6663.898,5877.338,6663.501,5877.045,6663.208L5867.837,6654.000ZZ" style="fill: rgb(255, 255, 255);"/></g></g></svg>
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91481 9.08504C7.71955 9.2803 7.40297 9.2803 7.20771 9.08504L5.55709 7.43442C5.36183 7.23916 5.04524 7.23916 4.84998 7.43442L2.99578 9.28862C2.80052 9.48389 2.48393 9.48389 2.28867 9.28863L1.00416 8.00412C0.808899 7.80885 0.808899 7.49227 1.00416 7.29701L2.85837 5.4428C3.05363 5.24754 3.05363 4.93096 2.85837 4.7357L0.914865 2.7922C0.719603 2.59693 0.719603 2.28035 0.914865 2.08509L2.07053 0.929423C2.26579 0.734161 2.58238 0.734162 2.77764 0.929424L4.72114 2.87293C4.9164 3.06819 5.23298 3.06819 5.42825 2.87293L7.297 1.00417C7.49226 0.808906 7.80885 0.808906 8.00411 1.00417L9.28862 2.28868C9.48388 2.48394 9.48388 2.80052 9.28862 2.99578L7.41986 4.86454C7.2246 5.0598 7.2246 5.37639 7.41986 5.57165L9.07048 7.22227C9.26574 7.41753 9.26574 7.73411 9.07048 7.92937L7.91481 9.08504Z" fill="white"/>
+</svg>

public/assets/shapes/hud-image-shape-flipped.svg

@@ -1 +0,0 @@
-<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eb5ea5d2669" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eb5ea5d2669"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eb5ea5d2669"><path d="M286.515,78.278C282.911,83.543,276.856,87.000,270.000,87.000L20.000,87.000C8.962,87.000,0.000,78.038,0.000,67.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L270.000,0.000C276.834,0.000,282.872,3.435,286.480,8.671C268.843,10.411,255.000,25.352,255.000,43.500C255.000,61.610,268.784,76.525,286.515,78.278ZM290.000,20.000L290.000,67.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>

public/assets/shapes/hud-image-shape.svg

@@ -1 +0,0 @@
-<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e38d8c7f-bba0-801b-8004-7d6eeffceb00" viewBox="4058.354 6110 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><path d="M4061.840,6118.722C4065.444,6113.457,4071.499,6110.000,4078.354,6110.000L4328.354,6110.000C4339.393,6110.000,4348.354,6118.962,4348.354,6130.000L4348.354,6177.000C4348.354,6188.038,4339.393,6197.000,4328.354,6197.000L4078.354,6197.000C4071.521,6197.000,4065.483,6193.565,4061.875,6188.329C4079.512,6186.589,4093.354,6171.648,4093.354,6153.500C4093.354,6135.390,4079.571,6120.475,4061.840,6118.722ZM4058.354,6177.000L4058.354,6130.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>

src/assets/scss/main.scss

@@ -4,6 +4,10 @@
 
 // Fonts
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@font-face {
+  font-family: 'Upheaval';
+  src: url('../fonts/upheavtt.ttf');
+}
 
 //Globals
 
@@ -57,7 +61,7 @@ input {
 }
 
 .input-field {
-  @apply px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
+  @apply px-4 py-2.5 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
   &.inactive {
     @apply bg-gray-600/50 hover:cursor-not-allowed;
     &::placeholder {
@@ -83,7 +87,7 @@ button {
   @apply text-center;
 
   &.btn-cyan {
-    @apply bg-cyan text-gray-50 text-base rounded py-3;
+    @apply bg-cyan text-gray-50 text-base rounded py-2.5;
 
     &.active,
     &:hover {
@@ -92,7 +96,7 @@ button {
   }
 
   &.btn-red {
-    @apply bg-red text-gray-50;
+    @apply bg-red text-gray-50 text-base rounded py-2.5;
 
     &.active,
     &:hover {
@@ -105,6 +109,10 @@ button {
   }
 }
 
+.text-pixel {
+  @apply text-white font-ui drop-shadow-pixel-black;
+}
+
 ::-webkit-scrollbar {
   @apply hidden;
 }

src/components/gameMaster/assetManager/partials/object/ObjectList.vue

@@ -21,7 +21,7 @@
         <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
       <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
   </div>

src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue

@@ -17,7 +17,7 @@
         <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
       <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
   </div>

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -21,7 +21,7 @@
         <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
       <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
   </div>

src/components/gui/Chat.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="w-full md:min-w-[350px] max-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.uiSettings.isChatOpen">
+  <div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col absolute left-1/2 -translate-x-1/2 bottom-5">
+    <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray rounded-md border-2 border-solid border-gray-500 text-gray-300" v-show="gameStore.uiSettings.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-sm">{{ message.character.name }}</span>
+        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{'text-cyan-300': gameStore.character?.role == 'gm'}">{{ message.character.name }}</span>
         <p class="text-gray-50 m-0">{{ message.message }}</p>
       </div>
     </div>
-    <div class="w-full flex">
+    <div class="w-64 mx-auto relative">
+      <img src="/assets/icons/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-1.5 h-4 w-4 opacity-50" />
       <input
-        class="w-full h-12 rounded-lg text-lg px-4 py-0 bg-gray border-2 border-solid border-gray-500 text-gray-300 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"
+        class="w-[204px] h-6 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
         placeholder="Type something..."
         v-model="message"
         @keypress="handleKeyPress"

src/components/gui/Hud.vue

@@ -1,5 +1,16 @@
 <template>
-
+  <div class="absolute left-[66px] top-4 bg-[url('/assets/ui-rect-border-4-corners.svg')] bg-no-repeat px-4 py-2 w-[181px] h-[26px] flex flex-col justify-between">
+    <div class="w-full flex items-center gap-2">
+      <label class="text-xs leading-3 text-pixel" for="hp">HP</label>
+      <progress class="h-2 rounded-sm w-full max-w-44 appearance-none accent-green" id="hp" :value="gameStore.character?.hitpoints" max="100">{{ gameStore.character?.hitpoints }}%</progress>
+      <span class="text-xs leading-3 text-pixel">{{ gameStore.character?.hitpoints }}%</span>
+    </div>
+    <div class="w-full flex items-center gap-2">
+      <label class="text-xs leading-3 text-pixel" for="sp">SP</label>
+      <progress class="h-2 rounded-sm w-full max-w-44 appearance-none accent-blue" id="sp" :value="gameStore.character?.mana" max="100">{{ gameStore.character?.mana }}%</progress>
+      <span class="text-xs leading-3 text-pixel">{{ gameStore.character?.mana }}%</span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -9,41 +20,30 @@ const gameStore = useGameStore()
 </script>
 
 <style scoped lang="scss">
-.hud-wrapper {
-  .hud-bg {
-    mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
+#hp {
+  // Chrome, Safari, Edge, Opera
+  &::-webkit-progress-value {
+    @apply bg-gradient-to-r from-green from-75% to-green-200 rounded-sm;
   }
-  #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;
-    }
+  &::-webkit-progress-bar {
+    @apply bg-white rounded-sm border border-solid border-black;
   }
-  #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;
-    }
+  // Firefox
+  &::-moz-progress-bar {
+    @apply bg-gradient-to-r from-green from-75% to-green-200 rounded-sm border border-solid border-black;
   }
-
-  &.other-player {
-    .hud-bg {
-      mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
-    }
+}
+#sp {
+  // Chrome, Safari, Edge, Opera
+  &::-webkit-progress-value {
+    @apply bg-gradient-to-r from-blue from-75% to-blue-200 rounded-sm;
+  }
+  &::-webkit-progress-bar {
+    @apply bg-white rounded-sm border border-solid border-black;
+  }
+  // Firefox
+  &::-moz-progress-bar {
+    @apply bg-gradient-to-r from-blue from-75% to-blue-200 rounded-sm border border-solid border-black;
   }
 }
 </style>

src/components/gui/Keybindings.vue

@@ -1,5 +1,44 @@
 <template>
-
+    <div class="absolute left-[300px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
+    </div>
+    <div class="absolute left-[346px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
+    </div>
+    <div class="absolute left-[392px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
+    </div>
+    <div class="absolute left-[438px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
+    </div>
+    <div class="absolute left-[484px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
+    </div>
+    <div class="absolute left-[530px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
+    </div>
+    <div class="absolute left-[576px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
+    </div>
+    <div class="absolute left-[622px] top-4">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
+    </div>
 </template>
 
 <script setup lang="ts">

src/components/gui/Menu.vue

@@ -1,39 +1,49 @@
 <template>
-  <ul class="list-none flex gap-2.5 items-center m-0 max-md:pl-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-1.5 bg-gray-300/70 border-2 border-solid border-cyan-200 hover: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>
+  <ul class="list-none flex flex-col gap-2.5 items-center m-0 pl-0 absolute left-4 top-4">
     <li class="menu-item group relative">
-      <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-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 class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
+        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open menu</p>
+        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
-      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan-200 hover: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-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-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-1.5 bg-gray-300/70 border-2 border-solid border-cyan-200 hover: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 class="group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
+        <img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/menu-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative" @click="gameStore.toggleUserPanel">
-      <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-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 class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
+        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">User Profile</p>
+        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
-      <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-1.5 bg-gray-300/70 border-2 border-solid border-cyan-200 hover: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 class="group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
+        <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/avatar/default/head.png" />
+        <p class="absolute bottom-0 -right-1.5 m-0 max-w-4 font-ui z-10 text-white text-[12px] leading-[6px] drop-shadow-pixel"><span class="font-ui text-white text-[8px] ml-0.5">LVL</span> {{ characterLevel }}</p>
+      </a>
+    </li>
+    <li class="menu-item group relative" @click="gameStore.toggleChat">
+      <div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
+        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open Chat</p>
+        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
+      </div>
+      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/chat-icon.svg" />
+      </a>
+    </li>
+    <li class="menu-item group relative">
+      <div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
+        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">World map</p>
+        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
+      </div>
+      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/map-icon.svg" />
+      </a>
+    </li>
+    <li class="menu-item group relative">
+      <div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
+        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Users</p>
+        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
+      </div>
+      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/socials-icon.svg" />
       </a>
     </li>
   </ul>
@@ -43,4 +53,5 @@
 import { useGameStore } from '@/stores/gameStore'
 
 const gameStore = useGameStore()
+let characterLevel = gameStore.character?.level.toString().padStart(2, '0');
 </script>

src/components/gui/UserPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen">
-    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
+    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
       <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200">
         <h3 class="m-0 font-medium shrink-0">Game menu</h3>
         <div class="hidden sm:flex gap-1.5 flex-wrap">
@@ -10,7 +10,7 @@
           <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
         </div>
         <div class="flex gap-2.5">
-          <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel">
+          <button class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel">
             <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
           </button>
         </div>

src/components/utilities/Modal.vue

@@ -7,7 +7,7 @@
           <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
           </button>
-          <button @click="close" v-if="closable" class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+          <button @click="close" v-if="closable" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
             <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
           </button>
         </div>

src/screens/Characters.vue

@@ -11,8 +11,8 @@
           class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
           :class="{ active: selected_character == character.id }"
         >
-          <img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
-          <img src="/assets/login/login-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
+          <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
+          <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-4 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
 

src/screens/Game.vue

@@ -13,9 +13,9 @@
             <Minimap />
             <Zone />
             <Chat />
-            <Inventory />
             <ExpBar />
 
+            <Inventory />
             <Effects />
           </div>
         </Scene>

src/screens/Login.vue

@@ -6,16 +6,16 @@
       <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
         <img src="/assets/login/nq-logo-v1.png" class="mb-10" />
         <div class="relative">
-          <img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
-          <img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
+          <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
+          <img src="/assets/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
 
           <!-- Login Form -->
           <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
             <div class="flex flex-col gap-5 p-2 mb-8 relative">
               <div class="w-full grid gap-3 relative">
-                <input class="input-field xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+                <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                 <div class="relative">
-                  <input class="input-field xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" type="password" name="password" placeholder="Password" required />
                   <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
                 </div>
                 <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
@@ -39,9 +39,9 @@
           <form v-show="switchForm === 'register'" @submit.prevent="registerFunc" class="relative px-6 py-11">
             <div class="flex flex-col gap-5 p-2 mb-8 relative">
               <div class="w-full grid gap-3 relative">
-                <input class="input-field xs:min-w-[350px] min-w-64" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+                <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                 <div class="relative">
-                  <input class="input-field xs:min-w-[350px] min-w-64" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" type="password" name="password" placeholder="Password" required />
                   <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
                 </div>
                 <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>

src/screens/Register.vue

@@ -1 +0,0 @@
-<template></template>

tailwind.config.js

@@ -4,7 +4,8 @@ export default {
   theme: {
     fontFamily: {
       'titles': ['Poppins', 'serif'],
-      'default': ['Quicksand', 'serif']
+      'default': ['Quicksand', 'serif'],
+      'ui': ['Upheaval', 'serif'],
     },
     backgroundSize: {
       'cover': 'cover',
@@ -43,6 +44,8 @@ export default {
       dropShadow: {
         'default': '0 3px 6px rgb(0, 0, 0)',
         'text': '1px 1px 5px rgba(0, 0, 0, 0.25)',
+        'pixel': '2px 2px 0px rgb(77, 77, 77)',
+        'pixel-black': '2px 2px 0px rgb(0, 0, 0)',
         '20': '0 3px 6px rgba(0, 0, 0, 0.2)'
       },
       boxShadow: {
@@ -68,10 +71,14 @@ export default {
           400: '#332426'
         },
         blue: {
-          DEFAULT: '#00c2ff'
+          DEFAULT: '#4F5FF0',
+          100: '#4F5FF0',
+          200: '#2E378A'
         },
         green: {
-          DEFAULT: '#09ad19'
+          DEFAULT: '#05E300',
+          100: '#05E300',
+          200: '#027D00'
         },
         purple: {
           DEFAULT: '#9841e6'