50 lines
1.9 KiB
Vue
50 lines
1.9 KiB
Vue
<template>
|
|
<div class="absolute left-[66px] top-4 bg-[url('/assets/ui-elements/hud-ui-box.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 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 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>
|
|
|
|
<script setup lang="ts">
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
|
|
const gameStore = useGameStore()
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#hp {
|
|
// Chrome, Safari, Edge, Opera
|
|
&::-webkit-progress-value {
|
|
@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-gradient-to-r from-green from-75% to-green-200 rounded-sm border border-solid border-black;
|
|
}
|
|
}
|
|
#sp {
|
|
// Chrome, Safari, Edge, Opera
|
|
&::-webkit-progress-value {
|
|
@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-gradient-to-r from-blue from-75% to-blue-200 rounded-sm border border-solid border-black;
|
|
}
|
|
}
|
|
</style>
|