yuhhh

src/App.vue

@@ -17,11 +17,11 @@ const screen:Ref<string> = ref('login');
 const socket = useSocketStore();
 
 socket.$subscribe((mutation, state) => {
-  if (!state.isAuthenticated) {
+  if (!state.connection) {
     screen.value = 'login';
   }
 
-  if (state.isAuthenticated){
+  if (state.connection){
     screen.value = 'characters';
 
     if (state.character) {

src/components/Game.vue

@@ -26,9 +26,14 @@ 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'
+import { onUnmounted } from 'vue'
 
 const socket = useSocketStore();
 
+onUnmounted(() => {
+  socket.disconnectSocket();
+})
+
 const gameConfig = {
   name: 'New Quest',
   width: window.innerWidth,
@@ -46,8 +51,8 @@ const bootGame = (game: Phaser.Game) => {
 const preloadScene = (scene: Phaser.Scene) => {
   /**
    * @TODO
-   * Write logic that downloads all assets from out websocket server in base64 format
-   * Don't forget to check how intensive that operation is for performance
+   * Write logic that downloads all assets from out websocket or http server in base64 format
+   * Don't forget to check how intensive that operation is with sockets for performance
    */
   scene.load.image('tiles', '/assets/tiles/default.png');
   scene.load.image('waypoint', '/assets/waypoint.png');

src/components/World.vue

@@ -49,12 +49,12 @@ watch (() => zoneStore.tiles, () => { // @TODO : change to tiles for when loadin
 
 // Load the zone from the server
 onBeforeMount(() => {
-  socket.socket?.emit('character:connect');
-  socket.socket?.emit('character:zone:load');
+  socket.connection?.emit('character:connect');
+  socket.connection?.emit('character:zone:load');
 })
 
 // Listen for the zone event from the server and load the zone
-socket.socket?.on('character:zone:load', (data) => {
+socket.connection?.on('character:zone:load', (data) => {
   console.log('character:zone:load', data);
   zoneStore.loadTiles(data.zone.tiles)
   /**
@@ -66,22 +66,22 @@ socket.socket?.on('character:zone:load', (data) => {
   // console.log(data.players[1]); // key is user id
   //
   // // remove self from the players list
-  // delete data.players[socket.socket?.id];
+  // delete data.players[socket.connection?.id];
   //
   // zoneStore.addPlayers(data.players);
 })
 
 // Listen for player join events
-socket.socket?.on('player_join', (data) => {
+socket.connection?.on('player_join', (data) => {
   console.log('player_join', data)
-  if (data.id === socket.socket?.id) {
+  if (data.id === socket.connection?.id) {
     console.log('self');
     return;
   }
   zoneStore.addPlayer(data);
 })
 
-socket.socket?.on('ping', (data) => {
+socket.connection?.on('ping', (data) => {
   console.log('ping', data)
 })
 

src/components/screens/Characters.vue

@@ -26,7 +26,7 @@
 import { useSocketStore } from '@/stores/socket'
 
 const socket = useSocketStore();
-socket.getSocket.emit('characters:get');
+socket.connection.emit('characters:get');
 </script>
 
 <style lang="scss">

src/components/screens/Login.vue

@@ -1,41 +1,35 @@
 <template>
-  <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>
-
     <div class="content-elements">
       <div class="login-form">
         <form method="post">
           <div class="form-field">
             <label for="username">Username</label>
-            <input v-model="username" type="text" name="username" required autofocus>
+            <input id="username" v-model="username" type="text" name="username" required autofocus>
           </div>
           <div class="form-field">
             <label for="password">Password</label>
-            <input v-model="password" type="password" name="password" required>
+            <input id="password" v-model="password" type="password" name="password" required>
           </div>
         </form>
       </div>
       <div class="row-buttons">
-        <button class="button" @click="loginFunc">
-          <span>LOGIN</span>
-        </button>
-        <button class="button" @click="registerFunc">
-          <span>REGISTER</span>
-        </button>
-        <button class="button">
-          <span>CREDITS</span>
-        </button>
+        <button class="button" @click="loginFunc"><span>LOGIN</span></button>
+        <button class="button" @click="registerFunc"><span>REGISTER</span></button>
+        <button class="button"><span>CREDITS</span></button>
       </div>
     </div>
   </div>
+  <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" />
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket.ts'
 import {login, register} from '@/services/authService'
+import { useCookies } from '@vueuse/integrations/useCookies'
 
 const bgm = ref('bgm');
 if (bgm.value.paused) {
@@ -43,6 +37,7 @@ if (bgm.value.paused) {
   window.addEventListener('keydown', () => bgm.value.play())
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const socket = useSocketStore();
 const username = ref('');
 const password = ref('');
@@ -54,11 +49,14 @@ async function loginFunc() {
     return;
   }
 
-  // send register event to server
+  // send login event to server
   const success = await login(username.value, password.value);
+
   if (!success) {
     alert('Invalid username or password');
   }
+
+  // if (success) {}
 }
 
 async function registerFunc() {
@@ -75,9 +73,7 @@ async function registerFunc() {
     alert('Username already exists');
   }
 
-  if (success) {
-    alert('User registered successfully, you can now log in!');
-  }
+  // if (success) {}
 }
 </script>
 

src/components/sprites/player/Player.vue

@@ -44,7 +44,7 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
     position.x = worldPoint.x + config.tile_size.y;
     position.y = worldPoint.y;
 
-    socket.socket?.emit('move', { x: position.x, y: position.y });
+    socket.connection?.emit('move', { x: position.x, y: position.y });
   }
 
   //Directions for player sprites + animations
@@ -64,7 +64,7 @@ if (!props.player) {
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick);
 }
 
-socket.socket?.on('player_moved', (data) => {
+socket.connection?.on('player_moved', (data) => {
   console.log('player_moved', data);
 
   if (data.id !== props.player?.id) {

src/services/authService.ts

@@ -1,14 +1,16 @@
 import axios from 'axios';
 import config from '@/config';
 import { useSocketStore } from '@/stores/socket';
+import { useCookies } from '@vueuse/integrations/useCookies'
 
 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;
+    if (response.status === 200) {
+      useCookies().set('token', response.data.token as string)
+      await socketStore.setupSocketConnection();
+      return true;
+    }
   } catch (error) {
     console.error('Error registering user:', error);
     return false;
@@ -16,13 +18,11 @@ export async function register(username: string, password: string, socketStore =
 }
 
 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);
+      useCookies().set('token', response.data.token as string)
+      await socketStore.setupSocketConnection();
       return true;
     }
   } catch (error) {

src/stores/socket.ts

@@ -1,34 +1,42 @@
 import { defineStore, type StoreDefinition } from 'pinia'
 import { io, Socket } from 'socket.io-client';
+import {useCookies} from '@vueuse/integrations/useCookies'
 import config from '@/config';
 
 export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
   state: () => ({
-    socket: null as Socket | null,
-    isAuthenticated: false,
+    connection: null as Socket | null,
     character: null as any,
   }),
   getters: {
-    getSocket: (state: any) => state.socket,
-    getAuthenticated: (state: any) => state.isAuthenticated,
+    getConnection: (state: any) => state.connection,
     getCharacter: (state: any) => state.character,
   },
   actions: {
-    setupSocketConnection(username: string, password: string) {
-      this.socket = io(config.server_endpoint, {
-        query: { username, password },
-        transports: ['websocket']
+    setupSocketConnection() {
+      this.connection = io(config.server_endpoint, {
+        withCredentials: true,
+        transports: ['websocket'],
+        reconnectionAttempts: 5,
       });
+
+      // Let the server know the user is logged in
+      this.connection.emit('login');
+
+      // When we can't reconnect, disconnect
+      this.connection.on('reconnect_failed', () => {
+        console.log("Reconnect failed")
+        this.disconnectSocket();
+      })
     },
     disconnectSocket() {
-      if (!this.socket) {
-        return;
-      }
+      if (!this.connection) return;
 
-      this.socket.disconnect();
-      this.socket = null;
+      this.connection.disconnect();
+      this.connection = null;
       this.character = null;
-      this.isAuthenticated = false;
+
+      useCookies().remove('token');
     },
   }
 });

src/types/user.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+const UserObject = z.object({
+  username: z.string(),
+});
+
+type UserType = z.infer<typeof UserObject>;
+
+export { UserObject, type UserType };