updated packages, updated websocket to socket.io, moved login styling to its own scss file

src/components/screens/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
+<!--  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>-->
   <img src="/assets/Leaf_BG_standalone.png" id="bg-img" alt="New Quest login background" />
   <div class="content-wrapper">
     <h1 class="main-title">NEW QUEST</h1>
@@ -18,21 +18,15 @@
     </div>
 
     <div class="row-buttons">
-      <a class="button button-1" href="/" id="submit">
+      <button class="button button-1" id="submit">
         LOGIN
-      </a>
-
-      <a class="button button-2" href="/">
+      </button>
+      <button class="button button-2">
         REGISTER
-      </a>
-
-      <a class="button button-3" href="/">
+      </button>
+      <button class="button button-3">
         CREDITS
-      </a>
-
-      <a class="button button-4" href="/">
-        EXIT
-      </a>
+      </button>
     </div>
   </div>
 </template>
@@ -40,113 +34,20 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 
-const bgm = ref('bgm');
-const bgmStart = () => bgm.value.play();
 
-onMounted(() => {
-  // check if bgm is playing already and do nothing
-  if (bgm.value.paused) {
-    window.addEventListener('click', () => bgm.value.play())
-    window.addEventListener('keydown', () => bgm.value.play())
-  }
+// const bgm = ref('bgm');
+// const bgmStart = () => bgm.value.play();
 
-})
+// onMounted(() => {
+//   // check if bgm is playing already and do nothing
+//   if (bgm.value.paused) {
+//     window.addEventListener('click', () => bgm.value.play())
+//     window.addEventListener('keydown', () => bgm.value.play())
+//   }
+//
+// })
 </script>
 
 <style scoped lang="scss">
-#bg-img {
-  height: 100vh;
-  position: absolute;
-  z-index: -1;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-.content-wrapper {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  position: relative;
-
-  .login-form {
-    position: absolute;
-    bottom: 7rem;
-    width: 100%;
-
-    form {
-      display: grid;
-      gap: 1.5rem;
-      width: inherit;
-
-      .form-field {
-        display: flex;
-        flex-direction: column;
-        background-color: rgba(255, 255, 255, 0.5);
-        border-radius: 3px;
-        width: 30%;
-        margin: 0 auto;
-
-        label {
-          color: #000;
-          background-color: rgba(255, 255, 255, 0.5);
-          padding: 0.25rem 0.5rem;
-        }
-        input {
-          background-color: transparent;
-          border: none;
-          padding: 0.5rem 0.25rem;
-          font-size: 16px;
-        }
-      }
-    }
-  }
-
-  .row-buttons {
-    display: flex;
-    gap: 0.5rem;
-    position: absolute;
-    bottom: 2.5rem;
-
-    .button {
-      padding: 1.2rem 0;
-      min-width: 8.2rem;
-      text-align: center;
-      position: relative;
-
-      &.button-1 {
-        background-image: url('/assets/Button_1.png');
-      }
-      &.button-2 {
-        background-image: url('/assets/Button_2.png');
-      }
-      &.button-3 {
-        background-image: url('/assets/Button_3.png');
-      }
-      &.button-4 {
-        background-image: url('/assets/Button_4.png');
-      }
-      background-position: center;
-      background-size: 100%;
-      background-repeat: no-repeat;
-
-      &:hover {
-        filter: brightness(60%);
-      }
-    }
-  }
-}
-
-.main-title {
-  position: absolute;
-  text-align: center;
-  top: 40%;
-  font-size: 3rem;
-  color: #FFF;
-  text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
-}
-
+@import "@/assets/login";
 </style>