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

Starting code for HUD

Browse Source
This commit is contained in:
Colin Kallemein
2024-05-20 22:37:49 +02:00
parent 438255f9b1
commit 45df1ce886
4 changed files with 56 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,12 @@
<template>
<div class="hud-wrapper">
<div class="profile">
<img src="/assets/avatar/default/head.png">
</div>
<div class="hud">
<div class="stats"></div>
</div>
</div>
</template>
<script setup lang="ts">
@ -7,5 +14,39 @@
</script>
<style scoped lang="scss">
.hud-wrapper {
position: relative;
.profile {
position: absolute;
left: 0;
top: 0;
width: 4rem;
height: 4rem;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 100%;
border: 2px solid #fff;
z-index: 1;
img {
width: 2rem;
position: absolute;
left: calc(50% - 1rem);
top: 50%;
transform: translateY(-50%);
}
}
.hud {
position: absolute;
left: 2rem;
top: 2rem;
width: 15rem;
height: 5rem;
background-image: url('/assets/clouds.png');
background-position: center;
background-size: cover;
// background-color: rgba(127, 127, 127, 0.7);
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
border-radius: 1rem;
border: 2px solid #fff;
}
}
</style>