forked from noxious/client
91 lines
4.5 KiB
Vue
91 lines
4.5 KiB
Vue
<template>
|
|
<div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
|
|
<div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
|
|
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%]" draggable="false" src="/assets/avatar/default/head.png" />
|
|
</div>
|
|
<div class="hud-bg absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
|
|
<div class="absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
|
|
<div class="h-[64px] flex flex-col items-end py-[10px] pl-[50px] pr-[20px]">
|
|
<div class="w-full flex items-center justify-between mb-1.5">
|
|
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ gameStore.character.name }}</span>
|
|
<span class="text-sm">lvl. {{ gameStore.character.level }}</span>
|
|
</div>
|
|
<div class="w-full flex items-center justify-between">
|
|
<label class="text-sm" for="hp">HP</label>
|
|
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
|
|
</div>
|
|
<div class="w-full flex items-center justify-between">
|
|
<label class="text-sm" for="mp">MP</label>
|
|
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TODO: Replace gameStore.character with other (selected) player's -->
|
|
<div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
|
|
<div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
|
|
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
|
|
</div>
|
|
<div class="hud-bg absolute top-0 right-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
|
|
<div class="absolute top-0 right-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
|
|
<div class="h-[64px] flex flex-col items-end scale-x-[-1] py-[10px] pr-[50px] pl-[20px]">
|
|
<div class="w-full flex items-center justify-between mb-1.5">
|
|
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ gameStore.character.name }}</span>
|
|
<span class="text-sm">lvl. {{ gameStore.character.level }}</span>
|
|
</div>
|
|
<div class="w-full flex items-center justify-between">
|
|
<label class="text-sm" for="hp">HP</label>
|
|
<progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useGameStore } from '@/stores/game'
|
|
|
|
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-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;
|
|
}
|
|
}
|
|
#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;
|
|
}
|
|
}
|
|
|
|
&.other-player {
|
|
.hud-bg {
|
|
mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
|
|
}
|
|
}
|
|
}
|
|
</style>
|