noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP ingame ui updated design

Browse Source 
Cleaned up some old icons and styling
This commit is contained in:
Colin Kallemein
2024-10-13 17:21:45 +02:00
parent 34bd103ec2
commit 7504e3719e
22 changed files with 220 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/gui/Hud.vue
View File

@ -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 {
.hud-bg {
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
#hp {
// Chrome, Safari, Edge, Opera
&::-webkit-progress-value {
@apply bg-green 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-green rounded-sm border border-solid border-black;
}
&.other-player {
.hud-bg {
mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
}
}
#mp {
// Chrome, Safari, Edge, Opera
&::-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>

69
src/components/gui/Menu.vue
View File

@ -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-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>
<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-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>
<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 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 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/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-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 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-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>
<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 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 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/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>