134 lines
3.5 KiB
Vue
134 lines
3.5 KiB
Vue
<template>
|
|
<div class="hud-wrapper">
|
|
<div class="profile">
|
|
<img draggable="false" src="/assets/avatar/default/head.png" />
|
|
</div>
|
|
<div class="hud">
|
|
<div class="stats">
|
|
<div class="player-details">
|
|
<span class="player-name">{{ socket.getCharacter.name }}</span>
|
|
<span class="player-lvl">lvl. {{ socket.getCharacter.level }}</span>
|
|
</div>
|
|
<div class="bar">
|
|
<label for="hp">HP</label>
|
|
<progress id="hp" :value="socket.getCharacter.hitpoints" max="100">{{ socket.getCharacter.hitpoints }}%</progress>
|
|
</div>
|
|
<div class="bar">
|
|
<label for="mp">MP</label>
|
|
<progress id="mp" :value="socket.getCharacter.mana" max="100">{{ socket.getCharacter.mana }}%</progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSocketStore } from '@/stores/socket'
|
|
|
|
const socket = useSocketStore();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/assets/scss/main';
|
|
|
|
.hud-wrapper {
|
|
position: relative;
|
|
left: -32px;
|
|
|
|
.hud, &::before {
|
|
position: absolute;
|
|
top: 32px;
|
|
left: 32px;
|
|
width: 245px;
|
|
height: 75px;
|
|
border-radius: 16px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.profile {
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 64px;
|
|
background-color: rgba($white, 0.8);
|
|
border-radius: 100%;
|
|
border: 3px solid $white;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2; // Ensure profile is above hud and before
|
|
img {
|
|
width: 32px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.hud {
|
|
background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
|
|
.stats {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: end;
|
|
justify-content: center;
|
|
padding: 0 20px 0 50px;
|
|
|
|
.player-details, .bar {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
span, label {
|
|
font-size: 14px;
|
|
}
|
|
.player-name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
max-width: 125px;
|
|
}
|
|
}
|
|
|
|
.player-details {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bar {
|
|
progress {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 8px;
|
|
border-radius: 8px;
|
|
max-width: 140px;
|
|
|
|
&#hp {
|
|
accent-color: $red;
|
|
// Chrome, Safari, Edge, Opera
|
|
&::-webkit-progress-value { background: $red; border-radius: 8px; }
|
|
&::-webkit-progress-bar { background: $white; border-radius: 8px; border: 2px solid $white; }
|
|
// Firefox
|
|
&::-moz-progress-bar { background: $red; border-radius: 8px; border: 2px solid $white;}
|
|
}
|
|
&#mp {
|
|
accent-color: $light-blue;
|
|
// Chrome, Safari, Edge, Opera
|
|
&::-webkit-progress-value { background: $light-blue; border-radius: 8px; }
|
|
&::-webkit-progress-bar { background: $white; border-radius: 8px; border: 2px solid $white;}
|
|
// Firefox
|
|
&::-moz-progress-bar { background: $light-blue; border-radius: 8px; border: 2px solid $white;}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
background: url('/assets/clouds.png') center/cover no-repeat;
|
|
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
|
|
mask-mode: luminance;
|
|
}
|
|
}
|
|
</style>
|