styling changes, added basic logics for registering accounts

src/App.vue

@@ -7,11 +7,11 @@
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import config from '@/config'
 import { onMounted, type Ref, ref } from 'vue'
+import SocketioService from '@/services/socketio.service';
+
 const screen:Ref<string> = ref('login');
 
-import SocketioService from '@/services/socketio.service';
 onMounted(() => {
   SocketioService.setupSocketConnection();
 });

src/assets/login.scss

@@ -37,12 +37,12 @@
         label {
           color: #000;
           background-color: rgba(255, 255, 255, 0.5);
-          padding: 0.25rem 0.5rem;
+          padding: 0.15rem 0.5rem;
         }
         input {
           background-color: transparent;
           border: none;
-          padding: 0.5rem 0.25rem;
+          padding: 0.25rem 0.25rem;
           font-size: 16px;
         }
       }
@@ -56,11 +56,11 @@
     bottom: 5rem;
 
     .button {
-      padding: 1.2rem 0;
+      padding: 1rem 0;
       min-width: 6rem;
       text-align: center;
       position: relative;
-      font-size: 12px;
+      font-size: 10px;
 
       &.button-1 {
         background-image: url('/assets/Button_1.png');

src/components/screens/Login.vue

@@ -7,21 +7,21 @@
     <div class="login-form">
       <form method="post">
         <div class="form-field">
-          <label for="username">USERNAME</label>
-          <input type="text" name="username" required>
+          <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 type="password" name="password" required>
+          <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">
+      <button class="button button-1" id="submit" @click="submit">
         LOGIN
       </button>
-      <button class="button button-2">
+      <button class="button button-2" @click="register">
         REGISTER
       </button>
       <button class="button button-3">
@@ -33,6 +33,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import SocketioService from '@/services/socketio.service';
 
 
 // const bgm = ref('bgm');
@@ -46,6 +47,25 @@ import { ref, onMounted } from 'vue'
 //   }
 //
 // })
+
+// on login form submit
+const submit = () => {
+  console.log('submit');
+}
+
+const username = ref('');
+const password = ref('');
+
+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
+  SocketioService.socket.emit('register', username.value, password.value);
+}
 </script>
 
 <style scoped lang="scss">