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

Updated HUD styling

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-11 22:30:51 +02:00
parent 4dcc11706a
commit 6e2a7f4738
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/shapes/hud-image-shape-2.svg Normal file
View File

@ -0,0 +1 @@
<svg width="278.367" xmlns="http://www.w3.org/2000/svg" height="84" id="screenshot-e38d8c7f-bba0-801b-8004-7d6eeffceb00" viewBox="0.987 0 278.367 84" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><path d="M0.987,12.078C4.058,4.975,11.130,0.000,19.354,0.000L259.354,0.000C270.393,0.000,279.354,8.962,279.354,20.000L279.354,64.000C279.354,75.038,270.393,84.000,259.354,84.000L19.354,84.000C11.162,84.000,4.113,79.063,1.023,72.005C16.790,71.104,29.354,58.008,29.354,42.000C29.354,26.009,16.816,12.923,0.987,12.078Z" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 704 B

1
public/assets/shapes/hud-shape-2.svg Normal file
View File

@ -0,0 +1 @@
<svg width="278.355" xmlns="http://www.w3.org/2000/svg" height="84" id="screenshot-e38d8c7f-bba0-801b-8004-7d68f958e1ff" viewBox="4060.645 6208 278.355 84" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d68f958e1ff"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d68f958e1ff"><path d="M4060.645,6220.049C4063.723,6212.962,4070.786,6208.000,4079.000,6208.000L4319.000,6208.000C4330.038,6208.000,4339.000,6216.962,4339.000,6228.000L4339.000,6272.000C4339.000,6283.038,4330.038,6292.000,4319.000,6292.000L4079.000,6292.000C4070.807,6292.000,4063.759,6287.063,4060.669,6280.005C4076.870,6279.685,4090.000,6266.364,4090.000,6250.000C4090.000,6233.669,4076.923,6220.369,4060.645,6220.049Z" style="fill: rgb(127, 127, 127); fill-opacity: 0.7;"/></g><g id="strokes-e38d8c7f-bba0-801b-8004-7d68f958e1ff" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0"><use href="#stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0"/></clipPath><path d="M4060.645,6220.049C4063.723,6212.962,4070.786,6208.000,4079.000,6208.000L4319.000,6208.000C4330.038,6208.000,4339.000,6216.962,4339.000,6228.000L4339.000,6272.000C4339.000,6283.038,4330.038,6292.000,4319.000,6292.000L4079.000,6292.000C4070.807,6292.000,4063.759,6287.063,4060.669,6280.005C4076.870,6279.685,4090.000,6266.364,4090.000,6250.000C4090.000,6233.669,4076.923,6220.369,4060.645,6220.049Z" id="stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0" clip-path="url('#inner-stroke-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0')"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@ -33,31 +33,34 @@ const socket = useSocketStore()
.hud-wrapper { .hud-wrapper {
position: relative; position: relative;
left: -32px; left: 0;
width: 315px;
height: 84px;
.hud, .hud,
&::before { &::before {
position: absolute; position: absolute;
top: 32px; top: 0;
left: 32px; left: 27px;
width: 245px; width: 280px;
height: 75px; height: 84px;
border-radius: 16px; border-radius: 16px;
z-index: 1; z-index: 1;
} }
.profile { .profile {
position: absolute; position: absolute;
width: 64px; width: 48px;
height: 64px; height: 48px;
background-color: rgba($white, 0.8); background-color: rgba($white, 0.8);
border-radius: 100%; border-radius: 100%;
border: 3px solid $white; border: 3px solid $white;
top: 0; top: 50%;
transform: translateY(-50%);
left: 0; left: 0;
z-index: 2; // Ensure profile is above hud and before z-index: 2; // Ensure profile is above hud and before
img { img {
width: 32px; width: 26px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -66,7 +69,7 @@ const socket = useSocketStore()
} }
.hud { .hud {
background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat; background: url('/assets/shapes/hud-shape-2.svg') center/cover no-repeat;
.stats { .stats {
height: 100%; height: 100%;
display: flex; display: flex;
@ -103,7 +106,8 @@ const socket = useSocketStore()
appearance: none; appearance: none;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
max-width: 140px; width: 100%;
max-width: 175px;
&#hp { &#hp {
accent-color: $red; accent-color: $red;
@ -151,7 +155,7 @@ const socket = useSocketStore()
&::before { &::before {
content: ''; content: '';
background: url('/assets/clouds.png') center/cover no-repeat; background: url('/assets/clouds.png') center/cover no-repeat;
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat; mask: url('/assets/shapes/hud-image-shape-2.svg') center/cover no-repeat;
mask-mode: luminance; mask-mode: luminance;
} }
} }