noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dennis Postma 2024-05-31 01:10:21 +02:00
parent 195a74d1e6
commit a4df323d7b
7 changed files with 100 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
env.d.ts vendored
View File

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

48
package-lock.json generated
View File

@ -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": {

16
src/components/screens/Characters.vue
View File

@ -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">

14
src/stores/player.ts
View File

@ -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;
},
}
});

20
src/stores/socket.ts
View File

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

9
src/types/TCharacter.ts
View File

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

9
src/types/TUser.ts
View File

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