npm update, removed player store and merged it with socket store, worked on character creation & selection (partially works)

src/components/screens/Characters.vue

@@ -5,7 +5,7 @@
      <h1>Select your character</h1>
      <div id="list">
        <div v-for="character in characters" :key="character.id">
-          <input type="radio" :id="character.id" name="character" :value="character.id">
+          <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label :for="character.id">
             {{ character.name }}
             <img src="/assets/avatar/default/base_right_down.png" />
@@ -13,7 +13,7 @@
        </div>
      </div>
 
-     <button>Play</button>
+     <button @click="select_character()">Play</button>
 
      <hr>
      <Create />
@@ -28,6 +28,7 @@
 import { useSocketStore } from '@/stores/socket'
 import { ref } from 'vue'
 import Create from '@/components/screens/partials/characters/Create.vue'
+import type { Character } from '../../../env'
 
 const socket = useSocketStore();
 const characters = ref([]);
@@ -37,6 +38,17 @@ socket.getConnection.on('character:list', (data: any) => {
   console.log(data);
   characters.value = data;
 });
+
+const selected_character = ref(null);
+function select_character() {
+  console.log(selected_character.value);
+  if (selected_character.value) {
+    socket.getConnection.emit('character:connect', {character_id: selected_character.value});
+    socket.getConnection.on('character:connect', (data: Character) => {
+      socket.setCharacter(data);
+    });
+  }
+}
 </script>
 
 <style lang="scss">

src/stores/player.ts

@@ -1,14 +0,0 @@
-import { defineStore } from 'pinia';
-import Player from '@/engine/Player/Player'
-
-export const usePlayerStore = defineStore('player', {
-  state: () => ({
-    player: null as Player | null,
-  }),
-
-  actions: {
-    setPlayer(player: Player) {
-      this.player = player;
-    },
-  }
-});

src/stores/socket.ts

@@ -2,15 +2,18 @@ import { defineStore, type StoreDefinition } from 'pinia'
 import { io, Socket } from 'socket.io-client';
 import {useCookies} from '@vueuse/integrations/useCookies'
 import config from '@/config';
+import type { Character, User } from '../../env'
 
 export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
   state: () => ({
     connection: null as Socket | null,
-    character: null as any,
+    user: null as User | null,
+    character: null as Character | null,
   }),
   getters: {
     getConnection: (state: any) => state.connection as Socket,
-    getCharacter: (state: any) => state.character,
+    getUser: (state: any) => state.user as User,
+    getCharacter: (state: any) => state.character as Character,
   },
   actions: {
     setupSocketConnection() {
@@ -23,6 +26,11 @@ export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
       // Let the server know the user is logged in
       this.connection.emit('login');
 
+      // set user
+      this.connection.on('login', (user: User) => {
+        this.setUser(user);
+      });
+
       // When we can't reconnect, disconnect
       this.connection.on('reconnect_failed', () => {
         console.log("Reconnect failed")
@@ -40,10 +48,18 @@ export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
 
       this.connection.disconnect();
       this.connection = null;
+
+      this.user = null;
       this.character = null;
 
       useCookies().remove('token');
     },
+    setUser(user: User|null) {
+      this.user = user;
+    },
+    setCharacter(character: Character|null) {
+      this.character = character;
+    }
   }
 });
 

src/types/TCharacter.ts

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

src/types/TUser.ts

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