HUD components

public/assets/icons/submit-icon.svg

@@ -0,0 +1 @@
+<svg width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-e9346f42-72c8-800c-8004-507b356b7f18" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f18" width="1em" height="1em" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1b"><defs style="fill: rgb(0, 0, 0);"/></g><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1c"><defs><mask width="1.2" height="1.2" x="-0.1" id="render-3-ipSEnterKey0" data-old-y="-0.1" data-old-width="1.2" data-old-x="-0.1" y="-0.1" data-old-height="1.2"><g class="svg-mask-wrapper" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="M44 44V4H24v16H4v24z"/><path stroke="#000" d="m21 28l-4 4l4 4"/><path stroke="#000" d="M34 23v9H17"/></g></g></mask></defs><g class="fills" id="fills-e9346f42-72c8-800c-8004-507b356b7f1c"><path d="M0.000,0.000L48.000,0.000L48.000,48.000L0.000,48.000ZZ" mask="url(#render-3-ipSEnterKey0)" style="fill: rgb(69, 69, 69); fill-opacity: 1;"/></g></g></g></svg>

src/components/Game.vue

@@ -8,7 +8,11 @@
       </Scene>
     </Game>
 
+    <div class="bottom-ui">
       <Chat />
+      <Menubar />
+    </div>
+    
     <Hud />
   </div>
 </template>
@@ -21,6 +25,7 @@ import Pointer = Phaser.Input.Pointer
 import { useSocketStore } from '@/stores/socket'
 import Hud from '@/components/game/Hud.vue'
 import Chat from '@/components/game/Chat.vue'
+import Menubar from '@/components/game/Menu.vue'
 
 const socket = useSocketStore();
 
@@ -66,12 +71,24 @@ const bootScene = (scene: Phaser.Scene) => {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .game-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
-  padding:30px
+  padding:30px;
+  position: relative;
+}
+.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;
 }
 </style>

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>