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

yuhhh

Browse Source
This commit is contained in:
Dennis Postma 2024-05-28 21:54:05 +02:00
parent 9ef697d812
commit da728a1fc6
11 changed files with 242 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
package-lock.json generated
View File

@ -9,11 +9,14 @@
"version": "0.0.0",
"dependencies": {
"@vueuse/core": "^10.9.0",
"@vueuse/integrations": "^10.10.0",
"axios": "^1.6.8",
"phaser": "^3.80.1",
"pinia": "^2.1.7",
"socket.io-client": "^4.7.5",
"vue": "^3.4.21"
"universal-cookie": "^6.1.3",
"vue": "^3.4.21",
"zod": "^3.23.8"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
@ -1729,6 +1732,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
"license": "MIT"
},
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@ -2456,14 +2465,14 @@
"license": "MIT"
},
"node_modules/@vueuse/core": {
"version": "10.9.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
"integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
"version": "10.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
"integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "10.9.0",
"@vueuse/shared": "10.9.0",
"@vueuse/metadata": "10.10.0",
"@vueuse/shared": "10.10.0",
"vue-demi": ">=0.14.7"
},
"funding": {
@ -2496,19 +2505,111 @@
}
}
},
"node_modules/@vueuse/integrations": {
"version": "10.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-10.10.0.tgz",
"integrity": "sha512-vHGeK7X6mkdkpcm1eE9t3Cpm21pNVfZRwrjwwbrEs9XftnSgszF4831G2rei8Dt9cIYJIfFV+iyx/29muimJPQ==",
"license": "MIT",
"dependencies": {
"@vueuse/core": "10.10.0",
"@vueuse/shared": "10.10.0",
"vue-demi": ">=0.14.7"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"async-validator": "*",
"axios": "*",
"change-case": "*",
"drauu": "*",
"focus-trap": "*",
"fuse.js": "*",
"idb-keyval": "*",
"jwt-decode": "*",
"nprogress": "*",
"qrcode": "*",
"sortablejs": "*",
"universal-cookie": "*"
},
"peerDependenciesMeta": {
"async-validator": {
"optional": true
},
"axios": {
"optional": true
},
"change-case": {
"optional": true
},
"drauu": {
"optional": true
},
"focus-trap": {
"optional": true
},
"fuse.js": {
"optional": true
},
"idb-keyval": {
"optional": true
},
"jwt-decode": {
"optional": true
},
"nprogress": {
"optional": true
},
"qrcode": {
"optional": true
},
"sortablejs": {
"optional": true
},
"universal-cookie": {
"optional": true
}
}
},
"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==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "10.9.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
"integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
"version": "10.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
"integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "10.9.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
"integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
"version": "10.10.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
"integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
"license": "MIT",
"dependencies": {
"vue-demi": ">=0.14.7"
@ -2833,9 +2934,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001621",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz",
"integrity": "sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==",
"version": "1.0.30001624",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001624.tgz",
"integrity": "sha512-0dWnQG87UevOCPYaOR49CBcLBwoZLpws+k6W37nLjWUhumP1Isusj0p2u+3KhjNloRWK9OKMgjBBzPujQHw4nA==",
"dev": true,
"funding": [
{
@ -3021,6 +3122,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/cross-fetch": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
@ -3072,6 +3182,13 @@
"node": ">=18"
}
},
"node_modules/cssstyle/node_modules/rrweb-cssom": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
"dev": true,
"license": "MIT"
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@ -4498,9 +4615,9 @@
}
},
"node_modules/jsdom": {
"version": "24.0.0",
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.0.0.tgz",
"integrity": "sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==",
"version": "24.1.0",
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.0.tgz",
"integrity": "sha512-6gpM7pRXCwIOKxX47cgOyvyQDN/Eh0f1MeKySBV2xGdKtqJBLj8P25eY3EVCWo2mglDDzozR2r2MW4T+JiNUZA==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -4509,21 +4626,21 @@
"decimal.js": "^10.4.3",
"form-data": "^4.0.0",
"html-encoding-sniffer": "^4.0.0",
"http-proxy-agent": "^7.0.0",
"https-proxy-agent": "^7.0.2",
"http-proxy-agent": "^7.0.2",
"https-proxy-agent": "^7.0.4",
"is-potential-custom-element-name": "^1.0.1",
"nwsapi": "^2.2.7",
"nwsapi": "^2.2.10",
"parse5": "^7.1.2",
"rrweb-cssom": "^0.6.0",
"rrweb-cssom": "^0.7.0",
"saxes": "^6.0.0",
"symbol-tree": "^3.2.4",
"tough-cookie": "^4.1.3",
"tough-cookie": "^4.1.4",
"w3c-xmlserializer": "^5.0.0",
"webidl-conversions": "^7.0.0",
"whatwg-encoding": "^3.1.1",
"whatwg-mimetype": "^4.0.0",
"whatwg-url": "^14.0.0",
"ws": "^8.16.0",
"ws": "^8.17.0",
"xml-name-validator": "^5.0.0"
},
"engines": {
@ -5788,9 +5905,9 @@
}
},
"node_modules/rrweb-cssom": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.0.tgz",
"integrity": "sha512-KlSv0pm9kgQSRxXEMgtivPJ4h826YHsuob8pSHcfSZsSXGtvpEAie8S0AnXuObEJ7nhikOb4ahwxDm0H2yW17g==",
"dev": true,
"license": "MIT"
},
@ -6387,6 +6504,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/universal-cookie": {
"version": "6.1.3",
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-6.1.3.tgz",
"integrity": "sha512-AETYRrhpRgl9T1YtnODmQE32G81U3A+f3HO3ZeK7efbXqe3x+RNOW4RTpV0iff7zJWhGYJA6EI0Mm+w50aFTAw==",
"license": "MIT",
"dependencies": {
"@types/cookie": "^0.6.0",
"cookie": "^0.6.0"
}
},
"node_modules/universalify": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@ -6457,9 +6584,9 @@
"license": "MIT"
},
"node_modules/vite": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
"integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
"version": "5.2.12",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz",
"integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -7065,6 +7192,15 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zod": {
"version": "3.23.8",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
"integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
}
}
}

5
package.json
View File

@ -16,11 +16,14 @@
},
"dependencies": {
"@vueuse/core": "^10.9.0",
"@vueuse/integrations": "^10.10.0",
"axios": "^1.6.8",
"phaser": "^3.80.1",
"pinia": "^2.1.7",
"socket.io-client": "^4.7.5",
"vue": "^3.4.21"
"universal-cookie": "^6.1.3",
"vue": "^3.4.21",
"zod": "^3.23.8"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",

4
src/App.vue
View File

@ -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) {

9
src/components/Game.vue
View File

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

14
src/components/World.vue
View File

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

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

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

32
src/components/screens/Login.vue
View File

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

4
src/components/sprites/player/Player.vue
View File

@ -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) {

16
src/services/authService.ts
View File

@ -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) {

36
src/stores/socket.ts
View File

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

9
src/types/user.ts Normal file
View File

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