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

NQ-74 Styling updates and fixes GUI

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-12 21:30:51 +02:00
parent 9022c104da
commit 12445db7f1
13 changed files with 95 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/gui/Hud.vue
View File

@ -20,6 +20,25 @@
</div>
</div>
</div>
<!-- TODO: Replace socket.character with other (selected) player's -->
<div class="hud-wrapper other-player">
<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.character.name }}</span>
<span class="player-lvl">lvl. {{ socket.character.level }}</span>
</div>
<div class="bar">
<label for="hp">HP</label>
<progress id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@ -41,17 +60,16 @@ const socket = useSocketStore()
&::before {
position: absolute;
top: 0;
left: 27px;
left: 30px;
width: 280px;
height: 84px;
border-radius: 16px;
z-index: 1;
}
.profile {
position: absolute;
width: 48px;
height: 48px;
width: 54px;
height: 54px;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 3px solid $white;
@ -60,7 +78,7 @@ const socket = useSocketStore()
left: 0;
z-index: 2; // Ensure profile is above hud and before
img {
width: 26px;
width: 28px;
position: absolute;
left: 50%;
top: 50%;
@ -69,14 +87,13 @@ const socket = useSocketStore()
}
.hud {
background: url('/assets/shapes/hud-shape-2.svg') center/cover no-repeat;
background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
.stats {
height: 100%;
height: calc(100% - 30px);
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
padding: 0 20px 0 50px;
padding: 15px 20px 15px 50px;
.player-details,
.bar {
@ -155,8 +172,37 @@ const socket = useSocketStore()
&::before {
content: '';
background: url('/assets/clouds.png') center/cover no-repeat;
mask: url('/assets/shapes/hud-image-shape-2.svg') center/cover no-repeat;
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
mask-mode: luminance;
}
&.other-player {
left: unset;
right: 0;
&::before {
left: unset;
right: 30px;
mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
}
.profile {
left: unset;
right: 0;
img {
transform: translate(-50%, -50%) scaleX(-1);
}
}
.hud {
left: unset;
right: 30px;
transform: scaleX(-1);
.stats {
transform: scaleX(-1);
padding: 15px 50px 15px 20px;
}
}
}
}
</style>