From 579f2899952c6612f0748a6cef0432eef3a3c95e Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 2 Jun 2024 18:32:59 +0200
Subject: [PATCH] Hud cutout styling + changes character select

---
 public/assets/shapes/hud-image-shape.svg |  1 +
 public/assets/shapes/hud-shape.svg       |  1 +
 src/assets/scss/_variables.scss          |  1 +
 src/components/Game.vue                  |  2 +-
 src/components/game/Hud.vue              | 28 +++++++++++++++++++-----
 src/components/screens/Characters.vue    |  8 ++++++-
 6 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/shapes/hud-image-shape.svg
 create mode 100644 public/assets/shapes/hud-shape.svg

diff --git a/public/assets/shapes/hud-image-shape.svg b/public/assets/shapes/hud-image-shape.svg
new file mode 100644
index 0000000..93156c2
--- /dev/null
+++ b/public/assets/shapes/hud-image-shape.svg
@@ -0,0 +1 @@
+<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71b166124144" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71b166124144"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71b166124144"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g></svg>
\ No newline at end of file
diff --git a/public/assets/shapes/hud-shape.svg b/public/assets/shapes/hud-shape.svg
new file mode 100644
index 0000000..2c65f0a
--- /dev/null
+++ b/public/assets/shapes/hud-shape.svg
@@ -0,0 +1 @@
+<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71aadb07368f" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71aadb07368f"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71aadb07368f"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(127, 127, 127); fill-opacity: 0.5;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71aadb07368f" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"/></clipPath><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 368ad97..a7c21d3 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -5,6 +5,7 @@ $purple: #4741e6;
 $lilac: #7b76ff;
 $light-blue: #00c2ff;
 $red: #d50000;
+$dark-red: #b30000;
 $gray: #7f7f7f;
 $gray-2: #696969;
 $dark-gray: #454545;
diff --git a/src/components/Game.vue b/src/components/Game.vue
index adf32af..c780e89 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -94,7 +94,7 @@ const bootScene = (scene: Phaser.Scene) => {
   position: absolute;
   left: 0;
   right: 0;
-  margin: 0 2rem;
+  margin: 0 3rem;
 }
 .top-ui {
   top: 3rem;
diff --git a/src/components/game/Hud.vue b/src/components/game/Hud.vue
index d5c22e9..b1b1d8d 100644
--- a/src/components/game/Hud.vue
+++ b/src/components/game/Hud.vue
@@ -16,6 +16,7 @@
 
 .hud-wrapper {
   position: relative;
+  left: -2rem;
   .profile {
     position: absolute;
     left: 0;
@@ -24,7 +25,7 @@
     height: 4rem;
     background-color: rgba($white, 0.8);
     border-radius: 100%;
-    border: 2px solid $white;
+    border: 3px solid $white;
     z-index: 1;
     img {
       width: 2rem;
@@ -38,15 +39,30 @@
     position: absolute;
     left: 2rem;
     top: 2rem;
-    width: 15rem;
-    height: 5rem;
+    width: 245px;
+    height: 75px;
+    background-image: url('/assets/shapes/hud-shape.svg');
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 1rem;
+    z-index: 1;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 2rem;
+    top: 2rem;
+    width: 245px;
+    height: 75px;
     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;
+    background-repeat: no-repeat;
     border-radius: 1rem;
-    border: 2px solid $white;
+    mask-image: url('/assets/shapes/hud-image-shape.svg');
+    mask-mode: luminance;
   }
 }
 </style>
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 5645730..b421d76 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -121,6 +121,7 @@ function create() {
         display: flex;
         flex-direction: column;
         background-color: rgba($white, 0.8);
+        outline: 1px solid $white;
         border-radius: 20px;
         position: relative;
 
@@ -206,10 +207,14 @@ function create() {
           padding: 5px;
           border-radius: 100%;
           z-index: 1;
-          right: -5px;
+          right: -10px;
           top: 0;
           transform: translateY(-50%);
           position: absolute;
+
+          &:hover {
+            background-color: $dark-red;
+          }
         }
 
         span {
@@ -244,6 +249,7 @@ function create() {
         border: rgba($white, 0.35) 1px solid;
         border-radius: 5px;
         color: $white;
+        font-size: 18px;
 
         span {
           color: $white;