WIP ingame ui updated design

Cleaned up some old icons and styling

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
 

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]">
+    <div class="w-full flex items-center gap-2">
+      <label class="text-xs font-ui drop-shadow-pixel-black text-white" for="hp">HP</label>
+      <progress class="h-2 rounded-lg 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 font-ui drop-shadow-pixel-black text-white">{{ gameStore.character?.hitpoints }}%</span>
+    </div>
+    <div class="w-full flex items-center gap-2">
+      <label class="text-xs font-ui drop-shadow-pixel-black text-white" for="mp">MP</label>
+      <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>
+      <span class="text-xs font-ui drop-shadow-pixel-black text-white">{{ 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 {
+#hp {
-  .hud-bg {
+  // Chrome, Safari, Edge, Opera
-    mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
+  &::-webkit-progress-value {
+    @apply bg-green rounded-sm;
   }
-  #hp {
+  &::-webkit-progress-bar {
-    // Chrome, Safari, Edge, Opera
+    @apply bg-white rounded-sm border border-solid border-black;
-    &::-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 {
+  // Firefox
-    // Chrome, Safari, Edge, Opera
+  &::-moz-progress-bar {
-    &::-webkit-progress-value {
+    @apply bg-green rounded-sm border border-solid border-black;
-      @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 {
+#mp {
-    .hud-bg {
+  // Chrome, Safari, Edge, Opera
-      mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
+  &::-webkit-progress-value {
-    }
+    @apply bg-blue rounded-sm;
+  }
+  &::-webkit-progress-bar {
+    @apply bg-white rounded-sm border border-solid border-black;
+  }
+  // Firefox
+  &::-moz-progress-bar {
+    @apply bg-blue rounded-sm border border-solid border-black;
   }
 }
 </style>

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">
+  <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" @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-800 border-2 border-solid border-gray-500 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-gray-500 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 border-2 border-solid border-gray-500 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>
     <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-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
+      <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">World</p>
+        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open menu</p>
-        <div class="group-hover:block absolute -bottom-2.5 bg-gray-500 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 -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 border-2 border-solid border-gray-500 hover:border-cyan rounded-lg block w-11 h-9">
+      <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-11 h-9 object-contain" draggable="false" src="/assets/icons/world.png" />
+        <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">
-      <div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-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">Users</p>
-        <div class="group-hover:block absolute -bottom-2.5 bg-gray-500 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 border-2 border-solid border-gray-500 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>
     </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-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
+      <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">Inventory</p>
+        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">User Profile</p>
-        <div class="group-hover:block absolute -bottom-2.5 bg-gray-500 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 -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 border-2 border-solid border-gray-500 hover:border-cyan rounded-lg block w-11 h-9">
+      <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-11 h-9 object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
+        <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/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/ui-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-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/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/ui-box-outer.svg" class="absolute w-full h-full" />
-          <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-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,10 @@ export default {
           400: '#332426'
         },
         blue: {
-          DEFAULT: '#00c2ff'
+          DEFAULT: '#4F5FF0'
         },
         green: {
-          DEFAULT: '#09ad19'
+          DEFAULT: '#05E300'
         },
         purple: {
           DEFAULT: '#9841e6'