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

29
src/components/gui/Chat.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="chat-wrapper">
<input placeholder="Type something..." />
<img draggable="false" src="/assets/icons/submit-icon.svg" />
</div>
</template>
@ -18,22 +17,28 @@
align-items: center;
input {
width: 500px;
height: 48px;
border-radius: 48px;
opacity: 0.8;
max-width: 750px;
width: 100%;
height: 51px;
border-radius: 8px;
font-size: 1.2rem;
padding: 0 24px;
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: black;
}
color: $gray-2;
background-image: url("/assets/icons/submit-icon.svg");
background-repeat: no-repeat;
background-size: 30px;
background-position: calc(100% - 25px) center;
img {
position: absolute;
left: 500px;
width: 30px;
height: 30px;
&::after {
content: '';
position: absolute;
left: 500px;
width: 30px;
height: 30px;
}
}
}
</style>

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>

30
src/components/gui/Menu.vue
View File

@ -38,18 +38,18 @@
.menu {
list-style: none;
display: flex;
gap: 20px;
gap: 10px;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 50px;
width: 64px;
bottom: 65px;
width: 85px;
text-align: center;
background-color: #b1b2b5;
border: 2px solid $white;
background-color: $dark-gray;
border: 2px solid $cyan;
border-radius: 24px;
height: 24px;
font-size: 0.875rem;
@ -61,7 +61,7 @@
&::after {
content: '';
position: absolute;
top: 100%;
top: calc(100% + 2px);
background-color: $white;
height: 8px;
width: 14px;
@ -73,16 +73,17 @@
a {
padding: 8px;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 50%;
background-color: rgba($dark-gray, 0.7);
border: 2px solid $cyan;
border-radius: 8px;
display: block;
width: 30px;
height: 30px;
width: 45px;
height: 35px;
img {
width: inherit;
height: inherit;
width: inherit;
object-fit: contain;
}
}
@ -92,9 +93,8 @@
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
background-color: rgba($gray, 0.7);
cursor: pointer;
img {
filter: drop-shadow(0px 3px 6px $black);

2
src/components/utilities/Modal.vue
View File

@ -200,7 +200,7 @@ function handleResize() {
z-index: 999;
display: flex;
flex-direction: column;
border-radius: 10px;
border-radius: 8px;
backdrop-filter: blur(5px);
box-shadow: 0 0 10px rgba($black, 0.5);

2
src/screens/Characters.vue
View File

@ -168,7 +168,7 @@ onBeforeUnmount(() => {
border-radius: 20px;
position: relative;
background-repeat: no-repeat;
background-image: url('/assets/shapes/character-select-shape-2.svg');
background-image: url('/assets/shapes/character-select-shape.svg');
box-shadow: 0 4px 30px rgba($black, 0.1);
&::after {

2
src/screens/Game.vue
View File

@ -102,6 +102,7 @@ const createScene = (scene: Phaser.Scene) => {
.bottom-ui {
display: flex;
position: absolute;
justify-content: space-between;
left: 0;
right: 0;
margin: 0 48px;
@ -112,7 +113,6 @@ const createScene = (scene: Phaser.Scene) => {
}
.bottom-ui {
justify-content: space-between;
align-items: center;
bottom: 100px;
height: 100px;