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>