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

env.d.ts

@@ -1 +1,45 @@
 /// <reference types="vite/client" />
+export type User = {
+  id: number;
+  username: string;
+  password: string;
+  characters: Character[];
+};
+
+export type Character = {
+  id: number;
+  userId: number;
+  user: User;
+  name: string;
+  hitpoints: number;
+  mana: number;
+  level: number;
+  experience: number;
+  role: string;
+  position_x: number;
+  position_y: number;
+  rotation: number;
+  zoneId: number;
+  zone: Zone;
+  chats: Chat[];
+};
+
+export type Zone = {
+  id: number;
+  name: string;
+  width: number;
+  height: number;
+  tiles: Record<string, any>;
+  characters: Character[];
+  chats: Chat[];
+};
+
+export type Chat = {
+  id: number;
+  characterId: number;
+  character: Character;
+  zoneId: number;
+  zone: Zone;
+  message: string;
+  createdAt: Date;
+};

package-lock.json

@@ -1746,9 +1746,9 @@
       "license": "MIT"
     },
     "node_modules/@types/jsdom": {
-      "version": "21.1.6",
+      "version": "21.1.7",
-      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
-      "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==",
+      "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1765,9 +1765,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.12.12",
+      "version": "20.12.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.13.tgz",
-      "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
+      "integrity": "sha512-gBGeanV41c1L171rR7wjbMiEpEI/l5XFQdLLfhr/REwpgDy/4U8y89+i8kRiLzDyZdOkXh+cRaTetUnCYutoXA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2480,9 +2480,9 @@
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.7",
+      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2572,9 +2572,9 @@
       }
     },
     "node_modules/@vueuse/integrations/node_modules/vue-demi": {
-      "version": "0.14.7",
+      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2619,9 +2619,9 @@
       }
     },
     "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.7",
+      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -3401,9 +3401,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.783",
+      "version": "1.4.787",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.787.tgz",
-      "integrity": "sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==",
+      "integrity": "sha512-d0EFmtLPjctczO3LogReyM2pbBiiZbnsKnGF+cdZhsYzHm/A0GV7W94kqzLD8SN4O3f3iHlgLUChqghgyznvCQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -5525,9 +5525,9 @@
       }
     },
     "node_modules/pinia/node_modules/vue-demi": {
-      "version": "0.14.7",
+      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -5956,9 +5956,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.77.2",
+      "version": "1.77.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.3.tgz",
-      "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
+      "integrity": "sha512-WJHo+jmFp0dwRuymPmIovuxHaBntcCyja5hCB0yYY9wWrViEp4kF5Cdai98P72v6FzroPuABqu+ddLMbQWmwzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

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 };