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

Got a working version of character animations, finished HUD styling, cleaned SCSS, npm update

Browse Source
This commit is contained in:
Dennis Postma
2024-06-08 00:04:28 +02:00
parent b2b4f3c60e
commit 7428521fb2
13 changed files with 95 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/game/Hud.vue
View File

@ -4,12 +4,29 @@
<img draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud">
<div class="stats"></div>
<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="21" max="100">21%</progress>
</div>
<div class="bar">
<label for="mp">MP</label>
<progress id="mp" value="69" max="100">69%</progress>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
const socket = useSocketStore();
</script>
<style scoped lang="scss">
@import '@/assets/scss/main';
@ -18,7 +35,7 @@
position: relative;
left: -32px;
.profile, .hud, &::before {
.hud, &::before {
position: absolute;
top: 32px;
left: 32px;
@ -29,6 +46,7 @@
}
.profile {
position: absolute;
width: 64px;
height: 64px;
background-color: rgba($white, 0.8);
@ -48,6 +66,55 @@
.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-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 {