From a4df323d7bb6e64b84be63b1906779e7260235d9 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 31 May 2024 01:10:21 +0200
Subject: [PATCH] npm update, removed player store and merged it with socket
store, worked on character creation & selection (partially works)
---
env.d.ts | 44 ++++++++++++++++++++++++
package-lock.json | 48 +++++++++++++--------------
src/components/screens/Characters.vue | 16 +++++++--
src/stores/player.ts | 14 --------
src/stores/socket.ts | 20 +++++++++--
src/types/TCharacter.ts | 9 -----
src/types/TUser.ts | 9 -----
7 files changed, 100 insertions(+), 60 deletions(-)
delete mode 100644 src/stores/player.ts
delete mode 100644 src/types/TCharacter.ts
delete mode 100644 src/types/TUser.ts
diff --git a/env.d.ts b/env.d.ts
index 11f02fe..773d2bb 100644
--- a/env.d.ts
+++ b/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;
+};
diff --git a/package-lock.json b/package-lock.json
index a17990f..da8b4aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1746,9 +1746,9 @@
"license": "MIT"
},
"node_modules/@types/jsdom": {
- "version": "21.1.6",
- "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
- "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==",
+ "version": "21.1.7",
+ "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
+ "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1765,9 +1765,9 @@
"license": "MIT"
},
"node_modules/@types/node": {
- "version": "20.12.12",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
- "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
+ "version": "20.12.13",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.13.tgz",
+ "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",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
- "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+ "version": "0.14.8",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+ "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
@@ -2572,9 +2572,9 @@
}
},
"node_modules/@vueuse/integrations/node_modules/vue-demi": {
- "version": "0.14.7",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
- "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+ "version": "0.14.8",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+ "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
@@ -2619,9 +2619,9 @@
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
- "version": "0.14.7",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
- "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+ "version": "0.14.8",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+ "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
@@ -3401,9 +3401,9 @@
}
},
"node_modules/electron-to-chromium": {
- "version": "1.4.783",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz",
- "integrity": "sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==",
+ "version": "1.4.787",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.787.tgz",
+ "integrity": "sha512-d0EFmtLPjctczO3LogReyM2pbBiiZbnsKnGF+cdZhsYzHm/A0GV7W94kqzLD8SN4O3f3iHlgLUChqghgyznvCQ==",
"dev": true,
"license": "ISC"
},
@@ -5525,9 +5525,9 @@
}
},
"node_modules/pinia/node_modules/vue-demi": {
- "version": "0.14.7",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
- "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+ "version": "0.14.8",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+ "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
@@ -5956,9 +5956,9 @@
"license": "MIT"
},
"node_modules/sass": {
- "version": "1.77.2",
- "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
- "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
+ "version": "1.77.3",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.3.tgz",
+ "integrity": "sha512-WJHo+jmFp0dwRuymPmIovuxHaBntcCyja5hCB0yYY9wWrViEp4kF5Cdai98P72v6FzroPuABqu+ddLMbQWmwzA==",
"dev": true,
"license": "MIT",
"dependencies": {
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index ad882b3..23c3a62 100644
--- a/src/components/screens/Characters.vue
+++ b/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">
diff --git a/src/stores/player.ts b/src/stores/player.ts
deleted file mode 100644
index 3438e61..0000000
--- a/src/stores/player.ts
+++ /dev/null
@@ -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;
- },
- }
-});
\ No newline at end of file
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
index 781d20e..6d52f35 100644
--- a/src/stores/socket.ts
+++ b/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;
+ }
}
});
diff --git a/src/types/TCharacter.ts b/src/types/TCharacter.ts
deleted file mode 100644
index 3cfb2ef..0000000
--- a/src/types/TCharacter.ts
+++ /dev/null
@@ -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 };
\ No newline at end of file
diff --git a/src/types/TUser.ts b/src/types/TUser.ts
deleted file mode 100644
index f95ed88..0000000
--- a/src/types/TUser.ts
+++ /dev/null
@@ -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 };
\ No newline at end of file