Starting code for HUD

src/components/Game.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="game-container">
+    <div class="top-ui">
       <Hud />
+    </div>
 
     <Game :config="gameConfig" class="game" @create="bootGame">
       <Scene name="main" @preload="preloadScene" @create="bootScene">
@@ -12,8 +14,6 @@
       <Chat />
       <Menubar />
     </div>
-    
-    <Hud />
   </div>
 </template>
 
@@ -80,15 +80,20 @@ const bootScene = (scene: Phaser.Scene) => {
   padding:30px;
   position: relative;
 }
-.bottom-ui {
+.top-ui, .bottom-ui {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   position: absolute;
-  bottom: 6.25rem;
   left: 0;
   right: 0;
-  height: 6.25rem;
   margin: 0 2rem;
 }
+.top-ui {
+  top: 3rem;
+}
+.bottom-ui {
+  justify-content: space-between;
+  align-items: center;
+  bottom: 6.25rem;
+  height: 6.25rem;
+}
 </style>

src/components/game/Hud.vue

@@ -1,5 +1,12 @@
 <template>
-
+    <div class="hud-wrapper">
+        <div class="profile">
+            <img src="/assets/avatar/default/head.png">
+        </div>
+        <div class="hud">
+            <div class="stats"></div>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -7,5 +14,39 @@
 </script>
 
 <style scoped lang="scss">
-
+    .hud-wrapper {
+        position: relative;
+        .profile {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4rem;
+            height: 4rem;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 100%;
+            border: 2px solid #fff;
+            z-index: 1;
+            img {
+                width: 2rem;
+                position: absolute;
+                left: calc(50% - 1rem);
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+        .hud {
+            position: absolute;
+            left: 2rem;
+            top: 2rem;
+            width: 15rem;
+            height: 5rem;
+            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;
+            border-radius: 1rem;
+            border: 2px solid #fff;
+        }
+    }
 </style>