More WIP ingame UI

Temporary skill icons, adjusted borders globally

src/assets/scss/main.scss

@@ -109,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,14 +1,14 @@
 <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="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 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>
+      <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 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>
+      <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>
@@ -23,27 +23,27 @@ const gameStore = useGameStore()
 #hp {
   // Chrome, Safari, Edge, Opera
   &::-webkit-progress-value {
-    @apply bg-green rounded-sm;
+    @apply bg-gradient-to-r from-green from-75% to-green-200 rounded-sm;
   }
   &::-webkit-progress-bar {
     @apply bg-white rounded-sm border border-solid border-black;
   }
   // Firefox
   &::-moz-progress-bar {
-    @apply bg-green rounded-sm border border-solid border-black;
+    @apply bg-gradient-to-r from-green from-75% to-green-200 rounded-sm border border-solid border-black;
   }
 }
-#mp {
+#sp {
   // Chrome, Safari, Edge, Opera
   &::-webkit-progress-value {
-    @apply bg-blue rounded-sm;
+    @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-blue rounded-sm border border-solid border-black;
+    @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/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">

tailwind.config.js

@@ -71,10 +71,14 @@ export default {
           400: '#332426'
         },
         blue: {
-          DEFAULT: '#4F5FF0'
+          DEFAULT: '#4F5FF0',
+          100: '#4F5FF0',
+          200: '#2E378A'
         },
         green: {
-          DEFAULT: '#05E300'
+          DEFAULT: '#05E300',
+          100: '#05E300',
+          200: '#027D00'
         },
         purple: {
           DEFAULT: '#9841e6'