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

More WIP ingame UI

Browse Source 
Temporary skill icons, adjusted borders globally
This commit is contained in:
Colin Kallemein
2024-10-13 20:27:44 +02:00
parent 934ae50d8e
commit 8b98fc5c4e
18 changed files with 94 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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