haha keyboard go brrr

src/App.vue

@@ -1,30 +1,28 @@
 <template>
   <Login v-if="screen === 'login'" />
-<!--  <Register v-if="screen === 'register'" />-->
+  <CharacterSelection v-if="screen === 'character_selection'" />
+  <Register v-if="screen === 'register'" />
   <Game v-if="screen === 'game'" />
 </template>
 
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import { onMounted, onUnmounted, type Ref, ref, watch } from 'vue'
+import Register from '@/components/screens/Register.vue'
+import { type Ref, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket'
-import { storeToRefs } from 'pinia'
+import CharacterSelection from '@/components/screens/CharacterSelection.vue'
 
 const screen:Ref<string> = ref('login');
 const socket = useSocketStore();
 
-onMounted(() => {
-  // SocketioService.setupSocketConnection();
-});
-
-const { isAuthenticated } = storeToRefs(socket);
-
-watch(isAuthenticated, (isAuthenticated) => {
-  if (isAuthenticated) {
-    screen.value = 'game';
-  } else {
-    screen.value = 'login';
+socket.$subscribe((mutation, state) => {
+  if (state.isAuthenticated) {
+    screen.value = 'character_selection';
   }
-});
+
+  if (state.character) {
+    screen.value = 'game';
+  }
+}, { detached: true })
 </script>

src/components/World.vue

@@ -8,11 +8,6 @@
 </template>
 
 <script setup lang="ts">
-/**
- * 1 tile is 64x32
- * the zone is 10x10
- * so the zone is 640x320
- */
 import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
 import Player from '@/components/sprites/player/Player.vue'
 import config from '@/config'
@@ -90,6 +85,11 @@ socket.socket?.on('ping', (data) => {
   console.log('ping', data)
 })
 
+/**
+ * 1 tile is 64x32
+ * the zone is 10x10
+ * so the zone is 640x320
+ */
 /**
  * Resources
  * https://clintbellanger.net/articles/isometric_math/

src/components/screens/CharacterSelection.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>

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/bglogin.png" id="bg-img" alt="New Quest login background" />
   <div class="content-wrapper">
     <h1 class="main-title">NEW QUEST</h1>
@@ -18,10 +18,10 @@
         </form>
       </div>
       <div class="row-buttons">
-        <button class="button" @click="login">
+        <button class="button" @click="loginFunc">
           <span>LOGIN</span>
         </button>
-        <button class="button" @click="register">
+        <button class="button" @click="registerFunc">
           <span>REGISTER</span>
         </button>
         <button class="button">
@@ -33,27 +33,21 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useSocketStore } from '@/stores/socket'
+import { onMounted, ref } from 'vue'
+import { useSocketStore } from '@/stores/socket.ts'
+import {login, register} from '@/services/authService'
+
+const bgm = ref('bgm');
+if (bgm.value.paused) {
+  window.addEventListener('click', () => bgm.value.play())
+  window.addEventListener('keydown', () => bgm.value.play())
+}
 
 const socket = useSocketStore();
-
-// 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 username = ref('');
 const password = ref('');
 
-async function login() {
+async function loginFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
     alert('Please enter a valid username and password');
@@ -61,13 +55,13 @@ async function login() {
   }
 
   // send register event to server
-  const success = await socket.login(username.value, password.value);
+  const success = await login(username.value, password.value);
   if (!success) {
     alert('Invalid username or password');
   }
 }
 
-async function register() {
+async function registerFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
     alert('Please enter a valid username and password');
@@ -75,14 +69,14 @@ async function register() {
   }
 
   // send register event to server
-  const success = await socket.register(username.value, password.value);
+  const success = await register(username.value, password.value);
 
   if (!success) {
     alert('Username already exists');
   }
 
   if (success) {
-    alert('User registered successfully');
+    alert('User registered successfully, you can now log in!');
   }
 }
 </script>

src/components/screens/Register.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>

src/services/authService.ts

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import config from '@/config';
+import { useSocketStore } from '@/stores/socket';
+
+export async function register(username: string, password: string, socketStore = useSocketStore()) {
+  if (socketStore.getAuthenticated) return console.log('User already authenticated');
+
+  try {
+    const response = await axios.post(`${config.server_endpoint}/register`, { username, password });
+    console.log(response.data);
+    return true;
+  } catch (error) {
+    console.error('Error registering user:', error);
+    return false;
+  }
+}
+
+export async function login(username: string, password: string, socketStore = useSocketStore()) {
+  if (socketStore.getAuthenticated) return console.log('User already authenticated');
+
+  try {
+    const response = await axios.post(`${config.server_endpoint}/login`, { username, password });
+    if (response.status === 200) {
+      socketStore.isAuthenticated = true;
+      socketStore.setupSocketConnection(username, password);
+      return true;
+    }
+  } catch (error) {
+    console.error('Login failed:', error);
+    return false;
+  }
+}

src/stores/socket.ts

@@ -1,70 +1,41 @@
+import { defineStore, type StoreDefinition } from 'pinia'
+import { io, Socket } from 'socket.io-client';
+import config from '@/config';
+
+export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
+  state: () => ({
+    socket: null as Socket | null,
+    isAuthenticated: false,
+    character: null as any,
+  }),
+  getters: {
+    getSocket: (state: any) => state.socket,
+    getAuthenticated: (state: any) => state.isAuthenticated,
+    getCharacter: (state: any) => state.character,
+  },
+  actions: {
+    setupSocketConnection(username: string, password: string) {
+      this.socket = io(config.server_endpoint, {
+        query: { username, password },
+        transports: ['websocket']
+      });
+    },
+    disconnectSocket() {
+      if (!this.socket) {
+        return;
+      }
+
+      this.socket.disconnect();
+      this.socket = null;
+      this.character = null;
+      this.isAuthenticated = false;
+    },
+  }
+});
+
 /**
  * Resources:
  * https://www.dynetisgames.com/2017/03/06/how-to-make-a-multiplayer-online-game-with-phaser-socket-io-and-node-js/
  * https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
  * https://pinia.vuejs.org/
- */
-import { defineStore, type StoreDefinition } from 'pinia'
-import { io, Socket } from 'socket.io-client';
-import config from '@/config';
-import axios from 'axios';
-
-export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
-  state: () => ({
-    isAuthenticated: false,
-    socket: null as Socket | null,
-  }),
-  getters: {
-    auth: (state: any) => state.isAuthenticated,
-  },
-  actions: {
-    async register(username: string, password: string) {
-      if ( this.isAuthenticated ) return console.log('User already authenticated');
-
-      try {
-        const response = await axios.post(`${config.server_endpoint}/register`, { username, password });
-        console.log(response.data);
-        return true;
-      } catch (error) {
-        console.error('Error registering user:', error);
-        return false;
-      }
-    },
-
-    async login(username: string, password: string) {
-      if ( this.isAuthenticated ) return console.log('User already authenticated');
-
-      try {
-        const response = await axios.post(`${config.server_endpoint}/login`, { username, password });
-        if (response.status === 200) {
-          this.isAuthenticated = true;
-          this.setupSocketConnection(username, password);
-          return true;
-        }
-      } catch (error) {
-        console.error('Login failed:', error);
-        return false;
-      }
-    },
-
-    setupSocketConnection(username: string, password: string) {
-      this.socket = io(config.server_endpoint as string, {
-        query: { username, password },
-        transports: ['websocket']
-      });
-
-      this.socket.on('message', (message) => {
-        console.log('Received message:', message);
-      });
-      // Handle more socket events as needed
-    },
-
-    disconnectSocket() {
-      if (this.socket) {
-        this.socket.disconnect();
-        this.socket = null;
-        this.isAuthenticated = false;
-      }
-    },
-  }
-});
+ */