50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<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">
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
|
|
const gameStore = useGameStore()
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#hp {
|
|
// Chrome, Safari, Edge, Opera
|
|
&::-webkit-progress-value {
|
|
@apply bg-green 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;
|
|
}
|
|
}
|
|
#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>
|