Worked on zone manager

src/components/gui/Hud.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="hud-wrapper">
+    <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 class="bar">
+          <label for="mp">MP</label>
+          <progress id="mp" :value="socket.character.mana" max="100">{{ socket.character.mana }}%</progress>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSocketStore } from '@/stores/socket'
+
+const socket = useSocketStore()
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/scss/main';
+
+.hud-wrapper {
+  position: relative;
+  left: -32px;
+
+  .hud,
+  &::before {
+    position: absolute;
+    top: 32px;
+    left: 32px;
+    width: 245px;
+    height: 75px;
+    border-radius: 16px;
+    z-index: 1;
+  }
+
+  .profile {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    background-color: rgba($white, 0.8);
+    border-radius: 100%;
+    border: 3px solid $white;
+    top: 0;
+    left: 0;
+    z-index: 2; // Ensure profile is above hud and before
+    img {
+      width: 32px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .hud {
+    background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
+    .stats {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+      justify-content: center;
+      padding: 0 20px 0 50px;
+
+      .player-details,
+      .bar {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        span,
+        label {
+          font-size: 14px;
+        }
+        .player-name {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          max-width: 125px;
+        }
+      }
+
+      .player-details {
+        margin-bottom: 5px;
+      }
+
+      .bar {
+        progress {
+          -webkit-appearance: none;
+          appearance: none;
+          height: 8px;
+          border-radius: 8px;
+          max-width: 140px;
+
+          &#hp {
+            accent-color: $red;
+            // Chrome, Safari, Edge, Opera
+            &::-webkit-progress-value {
+              background: $red;
+              border-radius: 8px;
+            }
+            &::-webkit-progress-bar {
+              background: $white;
+              border-radius: 8px;
+              border: 2px solid $white;
+            }
+            // Firefox
+            &::-moz-progress-bar {
+              background: $red;
+              border-radius: 8px;
+              border: 2px solid $white;
+            }
+          }
+          &#mp {
+            accent-color: $light-blue;
+            // Chrome, Safari, Edge, Opera
+            &::-webkit-progress-value {
+              background: $light-blue;
+              border-radius: 8px;
+            }
+            &::-webkit-progress-bar {
+              background: $white;
+              border-radius: 8px;
+              border: 2px solid $white;
+            }
+            // Firefox
+            &::-moz-progress-bar {
+              background: $light-blue;
+              border-radius: 8px;
+              border: 2px solid $white;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &::before {
+    content: '';
+    background: url('/assets/clouds.png') center/cover no-repeat;
+    mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
+    mask-mode: luminance;
+  }
+}
+</style>