From 6e2a7f47388e0dbe1ae9a6b2f695601b1bc2ab6e Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Tue, 11 Jun 2024 22:30:51 +0200
Subject: [PATCH] Updated HUD styling

---
 public/assets/shapes/hud-image-shape-2.svg |  1 +
 public/assets/shapes/hud-shape-2.svg       |  1 +
 src/components/gui/Hud.vue                 | 28 ++++++++++++----------
 3 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 public/assets/shapes/hud-image-shape-2.svg
 create mode 100644 public/assets/shapes/hud-shape-2.svg

diff --git a/public/assets/shapes/hud-image-shape-2.svg b/public/assets/shapes/hud-image-shape-2.svg
new file mode 100644
index 0000000..736840d
--- /dev/null
+++ b/public/assets/shapes/hud-image-shape-2.svg
@@ -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>
\ No newline at end of file
diff --git a/public/assets/shapes/hud-shape-2.svg b/public/assets/shapes/hud-shape-2.svg
new file mode 100644
index 0000000..6ac7a8c
--- /dev/null
+++ b/public/assets/shapes/hud-shape-2.svg
@@ -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>
\ No newline at end of file
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index bb20de6..bdfe5ae 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -33,31 +33,34 @@ const socket = useSocketStore()
 
 .hud-wrapper {
   position: relative;
-  left: -32px;
+  left: 0;
+  width: 315px;
+  height: 84px;
 
   .hud,
   &::before {
     position: absolute;
-    top: 32px;
-    left: 32px;
-    width: 245px;
-    height: 75px;
+    top: 0;
+    left: 27px;
+    width: 280px;
+    height: 84px;
     border-radius: 16px;
     z-index: 1;
   }
 
   .profile {
     position: absolute;
-    width: 64px;
-    height: 64px;
+    width: 48px;
+    height: 48px;
     background-color: rgba($white, 0.8);
     border-radius: 100%;
     border: 3px solid $white;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
     left: 0;
     z-index: 2; // Ensure profile is above hud and before
     img {
-      width: 32px;
+      width: 26px;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -66,7 +69,7 @@ const socket = useSocketStore()
   }
 
   .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 {
       height: 100%;
       display: flex;
@@ -103,7 +106,8 @@ const socket = useSocketStore()
           appearance: none;
           height: 8px;
           border-radius: 8px;
-          max-width: 140px;
+          width: 100%;
+          max-width: 175px;
 
           &#hp {
             accent-color: $red;
@@ -151,7 +155,7 @@ const socket = useSocketStore()
   &::before {
     content: '';
     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;
   }
 }