New login design, added basic logic for multiplayer (WIP)

src/components/screens/Login.vue

@@ -1,6 +1,6 @@
 <template>
 <!--  <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" />
+  <img src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
   <div class="content-wrapper">
     <h1 class="main-title">NEW QUEST</h1>
 
@@ -11,39 +11,32 @@
             <label for="username">Username</label>
             <input v-model="username" type="text" name="username" required>
           </div>
-
           <div class="form-field">
             <label for="password">Password</label>
             <input v-model="password" type="password" name="password" required>
           </div>
         </form>
       </div>
-
       <div class="row-buttons">
-        <button class="button button-1" id="submit" @click="submit">
-          <p>LOGIN</p>
-          <img src="/assets/Button_1.png" />
+        <button class="button" @click="login">
+          <span>LOGIN</span>
         </button>
-
-        <button class="button button-2" @click="register">
-          <p>REGISTER</p>
-          <img src="/assets/Button_2.png" />
+        <button class="button" @click="register">
+          <span>REGISTER</span>
         </button>
-
-        <button class="button button-3">
-          <p>CREDITS</p>
-          <img src="/assets/Button_3.png" />
+        <button class="button">
+          <span>CREDITS</span>
         </button>
       </div>
     </div>
-    
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import SocketioService from '@/services/socketio.service';
+import { useSocketStore } from '@/stores/socket'
 
+const socket = useSocketStore();
 
 // const bgm = ref('bgm');
 // const bgmStart = () => bgm.value.play();
@@ -57,15 +50,10 @@ import SocketioService from '@/services/socketio.service';
 //
 // })
 
-// on login form submit
-const submit = () => {
-  console.log('submit');
-}
-
 const username = ref('');
 const password = ref('');
 
-function register() {
+async function login() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
     alert('Please enter a valid username and password');
@@ -73,7 +61,29 @@ function register() {
   }
 
   // send register event to server
-  SocketioService.socket.emit('register', username.value, password.value);
+  const success = await socket.login(username.value, password.value);
+  if (!success) {
+    alert('Invalid username or password');
+  }
+}
+
+async function register() {
+  // check if username and password are valid
+  if (username.value === '' || password.value === '') {
+    alert('Please enter a valid username and password');
+    return;
+  }
+
+  // send register event to server
+  const success = await socket.register(username.value, password.value);
+
+  if (!success) {
+    alert('Username already exists');
+  }
+
+  if (success) {
+    alert('User registered successfully');
+  }
 }
 </script>