HUD components

src/components/game/Chat.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="chat-wrapper">
-  <input />
+  <input placeholder="Type something..." />
+  <img src="/assets/icons/submit-icon.svg">
 </div>
 </template>
 
@@ -10,9 +11,6 @@
 
 <style scoped lang="scss">
 .chat-wrapper {
-  position: absolute;
-  bottom: 0;
-  left: 20px;
   width: 100%;
   height: 100px;
   display: flex;
@@ -22,11 +20,21 @@
   input {
     width: 32rem;
     height: 3rem;
-    border-radius: 1rem;
+    border-radius: 3rem;
     opacity: 0.8;
     font-size: 1.2rem;
-    padding: 0 1rem;
+    padding: 0 1.5rem;
+    background-color: rgba(255, 255, 255, 0.85);
+    border: 2px solid #fff;
     color: black;
+
+  }
+
+  img {
+    position: absolute;
+    left: 32rem;
+    width: 1.875rem;
+    height: 1.875rem;
   }
 }
 

src/components/game/Menu.vue

@@ -1,5 +1,32 @@
 <template>
-
+    <div class="menu-wrapper">
+        <ul class="menu">
+            <li class="menu-item">
+                <p>Chat</p>
+                <a>
+                    <img src="/assets/icons/chat.png">
+                </a>
+            </li>
+            <li class="menu-item">
+                <p>World</p>
+                <a>
+                    <img src="/assets/icons/world.png">
+                </a>
+            </li>
+            <li class="menu-item">
+                <p>Users</p>
+                <a>
+                    <img src="/assets/icons/users.png">
+                </a>
+            </li>
+            <li class="menu-item">
+                <p>Inventory</p>
+                <a>
+                    <img src="/assets/icons/treasure-chest.png">
+                </a>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -7,5 +34,70 @@
 </script>
 
 <style scoped lang="scss">
+    .menu-wrapper {
+        .menu {
+            list-style: none;
+            display: flex;
+            gap: 1.25rem;
 
+            .menu-item {
+                position: relative;
+                p {
+                    position: absolute;
+                    bottom: 3.125rem;
+                    width: 4rem;
+                    text-align: center;
+                    background-color: #B1B2B5;
+                    border: 2px solid #fff;
+                    border-radius: 1.5rem;
+                    height: 1.5rem;
+                    font-size: 0.875rem;
+                    line-height: 1.5rem;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    display: none;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: 100%;
+                        background-color: #fff;
+                        height: 0.5rem;
+                        width: 0.875rem;
+                        clip-path: polygon(100% 0, 0 0, 50% 100%);
+                        left: calc(50% - 0.4375rem);
+                    }
+                }
+                
+                a {
+                    padding: 0.5rem;
+                    background-color: rgba(127, 127, 127, 0.7);
+                    border: 2px solid #fff;
+                    border-radius: 100%;
+                    display: block;
+                    width: 1.875rem;
+                    height: 1.875rem;
+
+                    img {
+                        width: inherit;
+                        height: inherit;
+                    }
+                }
+
+                &:hover {
+                    p {
+                        display: block;
+                    }
+                    a {
+                        background-image: url('/assets/galaxy.png');
+                        background-position: center;
+                        img {
+                            -webkit-filter: drop-shadow(0px 3px 6px #000);
+                            filter: drop-shadow(0px 3px 6px #000);
+                        }
+                    }
+                }
+            }
+        }
+    }
 </style>