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

haha keyboard go brrr

Browse Source
This commit is contained in:
Dennis Postma 2024-05-16 00:26:25 +02:00
parent 2638d6024f
commit 1ed0283a94
8 changed files with 154 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
package-lock.json generated
View File

@ -1973,30 +1973,30 @@
} }
}, },
"node_modules/@volar/language-core": { "node_modules/@volar/language-core": {
"version": "2.2.2", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.2.tgz", "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.4.tgz",
"integrity": "sha512-GuvEL4JdxbnLVhPLICncCGT+tVW4cIz9GxXNeDofNnJ4iNTKhr5suGVsA1GLOne9PbraSjn8PlLt+pvLxuRVeQ==", "integrity": "sha512-7As47GndxGxsqqYnbreLrfB5NDUeQioPM2LJKUuB4/34c0NpEJ2byVl3c9KYdjIdiEstWZ9JLtLKNTaPWb5jtA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@volar/source-map": "2.2.2" "@volar/source-map": "2.2.4"
} }
}, },
"node_modules/@volar/source-map": { "node_modules/@volar/source-map": {
"version": "2.2.2", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.2.tgz", "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.4.tgz",
"integrity": "sha512-vUwvZuSW6iN4JI9QRinh9EjFasx1TUtnaWMKwgWx08xz1PyYuNkLlWlrZXBZ5GGBhML0u230M/7X+AHY2h9yKg==", "integrity": "sha512-m92FLpR9vB1YEZfiZ+bfgpLrToL/DNkOrorWVep3pffHrwwI4Tx2oIQN+sqHJfKkiT5N3J1owC+8crhAEinfjg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"muggle-string": "^0.4.0" "muggle-string": "^0.4.0"
} }
}, },
"node_modules/@volar/typescript": { "node_modules/@volar/typescript": {
"version": "2.2.2", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.2.tgz", "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.4.tgz",
"integrity": "sha512-WcwOREz7+uOrpjUrKhOMaOKKmyPdtqF95HWX7SE0d9hhBB1KkfahxhaAex5U9Bn43LfINHlycLoYCNEtfeKm0g==", "integrity": "sha512-uAQC53tgEbHO62G8NXMfmBrJAlP2QJ9WxVEEQqqK3I6VSy8frL5LbH3hAWODxiwMWixv74wJLWlKbWXOgdIoRQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@volar/language-core": "2.2.2", "@volar/language-core": "2.2.4",
"path-browserify": "^1.0.1" "path-browserify": "^1.0.1"
} }
}, },
@ -2125,13 +2125,13 @@
"integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==" "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
}, },
"node_modules/@vue/devtools-core": { "node_modules/@vue/devtools-core": {
"version": "7.1.3", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.1.3.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.2.0.tgz",
"integrity": "sha512-pVbWi8pf2Z/fZPioYOIgu+cv9pQG55k4D8bL31ec+Wfe+pQR0ImFDu0OhHfch1Ra8uvLLrAZTF4IKeGAkmzD4A==", "integrity": "sha512-cHSeu70rTtubt2DYia+VDGNTC1m84Xyuk5eNTjmOpMLECaJnWnzCv6kR84EZp7rG+MVZalJG+4ecX2GaTbU3cQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vue/devtools-kit": "^7.1.3", "@vue/devtools-kit": "^7.2.0",
"@vue/devtools-shared": "^7.1.3", "@vue/devtools-shared": "^7.2.0",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"nanoid": "^3.3.4", "nanoid": "^3.3.4",
"pathe": "^1.1.2", "pathe": "^1.1.2",
@ -2139,12 +2139,12 @@
} }
}, },
"node_modules/@vue/devtools-kit": { "node_modules/@vue/devtools-kit": {
"version": "7.1.3", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.1.3.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.2.0.tgz",
"integrity": "sha512-NFskFSJMVCBXTkByuk2llzI3KD3Blcm7WqiRorWjD6nClHPgkH5BobDH08rfulqq5ocRt5xV+3qOT1Q9FXJrwQ==", "integrity": "sha512-Kx+U0QiQg/g714euYKfnCdhTcOycSlH1oyTE57D0sAmisdsRCNLfXcnnIwcFY2jdCpuz9DNbuE0VWQuYF5zAZQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vue/devtools-shared": "^7.1.3", "@vue/devtools-shared": "^7.2.0",
"hookable": "^5.5.3", "hookable": "^5.5.3",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"perfect-debounce": "^1.0.0", "perfect-debounce": "^1.0.0",
@ -2155,9 +2155,9 @@
} }
}, },
"node_modules/@vue/devtools-shared": { "node_modules/@vue/devtools-shared": {
"version": "7.1.3", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.1.3.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.2.0.tgz",
"integrity": "sha512-KJ3AfgjTn3tJz/XKF+BlVShNPecim3G21oHRue+YQOsooW+0s+qXvm09U09aO7yBza5SivL1QgxSrzAbiKWjhQ==", "integrity": "sha512-gVr3IjKjU7axNvclRgICgy1gq/TDnF1hhBAEox+l5mMXZiTIFVIm1zpcIPssc0HxMDgzy+lXqOVsY4DGyZ+ZeA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"rfdc": "^1.3.1" "rfdc": "^1.3.1"
@ -2202,12 +2202,12 @@
} }
}, },
"node_modules/@vue/language-core": { "node_modules/@vue/language-core": {
"version": "2.0.17", "version": "2.0.18",
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.17.tgz", "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.18.tgz",
"integrity": "sha512-tHw2J6G9yL4kn3jN5MftOHEq86Y6qnuohBQ1OHkJ73fAv3OYgwDI1cfX7ds0OEJEycOMG64BA3ql5bDgDa41zw==", "integrity": "sha512-MwKRQAReHN1z7P3/8k/ISC5MjDRjHxGyitn50jWrMmzW9FNySG/1NxMPgAHcVJ4zApJUolS9TexYzT4I6BKL5w==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@volar/language-core": "~2.2.2", "@volar/language-core": "~2.2.4",
"@vue/compiler-dom": "^3.4.0", "@vue/compiler-dom": "^3.4.0",
"@vue/shared": "^3.4.0", "@vue/shared": "^3.4.0",
"computeds": "^0.0.1", "computeds": "^0.0.1",
@ -3047,9 +3047,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.768", "version": "1.4.770",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.768.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.770.tgz",
"integrity": "sha512-z2U3QcvNuxdkk33YV7R1bVMNq7fL23vq3WfO5BHcqrm4TnDGReouBfYKLEFh5umoK1XACjEwp8mmnhXk2EJigw==", "integrity": "sha512-ONwOsDiVvV07CMsyH4+dEaZ9L79HMH/ODHnDS3GkIhgNqdDHJN2C18kFb0fBj0RXpQywsPJl6k2Pqg1IY4r1ig==",
"dev": true "dev": true
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -6072,18 +6072,18 @@
} }
}, },
"node_modules/vite-plugin-vue-devtools": { "node_modules/vite-plugin-vue-devtools": {
"version": "7.1.3", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.1.3.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.2.0.tgz",
"integrity": "sha512-qv8Z4yok9RYo6TEs89WnIAlmTHby/+XTim8tlSnMs3lAPcQqqcl/wGRY8gAeYrGCANngOqO+VuabW3Jb1HZtyw==", "integrity": "sha512-bFWwx/YF9M+aXTjDo0/6DrC7+WCzLg7wAmFoQA3Gd7cv5WV4u65hHSZN8bq0zhgHqtYQZdWnp0L2z6JNCwcIGg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vue/devtools-core": "^7.1.3", "@vue/devtools-core": "^7.2.0",
"@vue/devtools-kit": "^7.1.3", "@vue/devtools-kit": "^7.2.0",
"@vue/devtools-shared": "^7.1.3", "@vue/devtools-shared": "^7.2.0",
"execa": "^8.0.1", "execa": "^8.0.1",
"sirv": "^2.0.4", "sirv": "^2.0.4",
"vite-plugin-inspect": "^0.8.4", "vite-plugin-inspect": "^0.8.4",
"vite-plugin-vue-inspector": "^5.0.1" "vite-plugin-vue-inspector": "^5.1.0"
}, },
"engines": { "engines": {
"node": ">=v14.21.3" "node": ">=v14.21.3"
@ -6198,9 +6198,9 @@
} }
}, },
"node_modules/vue-component-type-helpers": { "node_modules/vue-component-type-helpers": {
"version": "2.0.17", "version": "2.0.18",
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.17.tgz", "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.18.tgz",
"integrity": "sha512-2car49m8ciqg/JjgMBkx7o/Fd2A7fHESxNqL/2vJYFLXm4VwYO4yH0rexOi4a35vwNgDyvt17B07Vj126l9rAQ==", "integrity": "sha512-zi1QaDBhSb3oeHJh55aTCrosFNKEQsOL9j3XCAjpF9dwxDUUtd85RkJVzO+YpJqy1LNoCWLU8gwuZ7HW2iDN/A==",
"dev": true "dev": true
}, },
"node_modules/vue-eslint-parser": { "node_modules/vue-eslint-parser": {
@ -6238,13 +6238,13 @@
} }
}, },
"node_modules/vue-tsc": { "node_modules/vue-tsc": {
"version": "2.0.17", "version": "2.0.18",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.17.tgz", "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.18.tgz",
"integrity": "sha512-RRZsiCBD1hvATQb321xV+SkRDKsK5hgFQ4WXy5wuYsyyjz8xAK4DjxHkpH7PFoJKUbZTbeW8KzhejzXZS49Tzw==", "integrity": "sha512-0SrsAJzsUrX7A6aXLsBrXrAesozAirASPnVz5VUt2+4imFNP2cEXtLQy1s8ayUHLex3zoYIoZVgZ7h7UgqaEVw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@volar/typescript": "~2.2.2", "@volar/typescript": "~2.2.4",
"@vue/language-core": "2.0.17", "@vue/language-core": "2.0.18",
"semver": "^7.5.4" "semver": "^7.5.4"
}, },
"bin": { "bin": {

28
src/App.vue
View File

@ -1,30 +1,28 @@
<template> <template>
<Login v-if="screen === 'login'" /> <Login v-if="screen === 'login'" />
<!-- <Register v-if="screen === 'register'" />--> <CharacterSelection v-if="screen === 'character_selection'" />
<Register v-if="screen === 'register'" />
<Game v-if="screen === 'game'" /> <Game v-if="screen === 'game'" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Game from '@/components/Game.vue' import Game from '@/components/Game.vue'
import Login from '@/components/screens/Login.vue' import Login from '@/components/screens/Login.vue'
import { onMounted, onUnmounted, type Ref, ref, watch } from 'vue' import Register from '@/components/screens/Register.vue'
import { type Ref, ref } from 'vue'
import { useSocketStore } from '@/stores/socket' import { useSocketStore } from '@/stores/socket'
import { storeToRefs } from 'pinia' import CharacterSelection from '@/components/screens/CharacterSelection.vue'
const screen:Ref<string> = ref('login'); const screen:Ref<string> = ref('login');
const socket = useSocketStore(); const socket = useSocketStore();
onMounted(() => { socket.$subscribe((mutation, state) => {
// SocketioService.setupSocketConnection(); if (state.isAuthenticated) {
}); screen.value = 'character_selection';
const { isAuthenticated } = storeToRefs(socket);
watch(isAuthenticated, (isAuthenticated) => {
if (isAuthenticated) {
screen.value = 'game';
} else {
screen.value = 'login';
} }
});
if (state.character) {
screen.value = 'game';
}
}, { detached: true })
</script> </script>

10
src/components/World.vue
View File

@ -8,11 +8,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
/**
* 1 tile is 64x32
* the zone is 10x10
* so the zone is 640x320
*/
import { Container, refObj, TilemapLayer, useScene } from 'phavuer' import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/sprites/player/Player.vue' import Player from '@/components/sprites/player/Player.vue'
import config from '@/config' import config from '@/config'
@ -90,6 +85,11 @@ socket.socket?.on('ping', (data) => {
console.log('ping', data) console.log('ping', data)
}) })
/**
* 1 tile is 64x32
* the zone is 10x10
* so the zone is 640x320
*/
/** /**
* Resources * Resources
* https://clintbellanger.net/articles/isometric_math/ * https://clintbellanger.net/articles/isometric_math/

3
src/components/screens/CharacterSelection.vue
View File

@ -0,0 +1,3 @@
<template>
</template>

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

@ -1,5 +1,5 @@
<template> <template>
<!-- <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>--> <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" /> <img src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
<div class="content-wrapper"> <div class="content-wrapper">
<h1 class="main-title">NEW QUEST</h1> <h1 class="main-title">NEW QUEST</h1>
@ -18,10 +18,10 @@
</form> </form>
</div> </div>
<div class="row-buttons"> <div class="row-buttons">
<button class="button" @click="login"> <button class="button" @click="loginFunc">
<span>LOGIN</span> <span>LOGIN</span>
</button> </button>
<button class="button" @click="register"> <button class="button" @click="registerFunc">
<span>REGISTER</span> <span>REGISTER</span>
</button> </button>
<button class="button"> <button class="button">
@ -33,27 +33,21 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { onMounted, ref } from 'vue'
import { useSocketStore } from '@/stores/socket' import { useSocketStore } from '@/stores/socket.ts'
import {login, register} from '@/services/authService'
const bgm = ref('bgm');
if (bgm.value.paused) {
window.addEventListener('click', () => bgm.value.play())
window.addEventListener('keydown', () => bgm.value.play())
}
const socket = useSocketStore(); const socket = useSocketStore();
// const bgm = ref('bgm');
// const bgmStart = () => bgm.value.play();
// onMounted(() => {
// // check if bgm is playing already and do nothing
// if (bgm.value.paused) {
// window.addEventListener('click', () => bgm.value.play())
// window.addEventListener('keydown', () => bgm.value.play())
// }
//
// })
const username = ref(''); const username = ref('');
const password = ref(''); const password = ref('');
async function login() { async function loginFunc() {
// check if username and password are valid // check if username and password are valid
if (username.value === '' || password.value === '') { if (username.value === '' || password.value === '') {
alert('Please enter a valid username and password'); alert('Please enter a valid username and password');
@ -61,13 +55,13 @@ async function login() {
} }
// send register event to server // send register event to server
const success = await socket.login(username.value, password.value); const success = await login(username.value, password.value);
if (!success) { if (!success) {
alert('Invalid username or password'); alert('Invalid username or password');
} }
} }
async function register() { async function registerFunc() {
// check if username and password are valid // check if username and password are valid
if (username.value === '' || password.value === '') { if (username.value === '' || password.value === '') {
alert('Please enter a valid username and password'); alert('Please enter a valid username and password');
@ -75,14 +69,14 @@ async function register() {
} }
// send register event to server // send register event to server
const success = await socket.register(username.value, password.value); const success = await register(username.value, password.value);
if (!success) { if (!success) {
alert('Username already exists'); alert('Username already exists');
} }
if (success) { if (success) {
alert('User registered successfully'); alert('User registered successfully, you can now log in!');
} }
} }
</script> </script>

3
src/components/screens/Register.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
</template>

32
src/services/authService.ts Normal file
View File

@ -0,0 +1,32 @@
import axios from 'axios';
import config from '@/config';
import { useSocketStore } from '@/stores/socket';
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;
} catch (error) {
console.error('Error registering user:', error);
return false;
}
}
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);
return true;
}
} catch (error) {
console.error('Login failed:', error);
return false;
}
}

99
src/stores/socket.ts
View File

@ -1,70 +1,41 @@
import { defineStore, type StoreDefinition } from 'pinia'
import { io, Socket } from 'socket.io-client';
import config from '@/config';
export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
state: () => ({
socket: null as Socket | null,
isAuthenticated: false,
character: null as any,
}),
getters: {
getSocket: (state: any) => state.socket,
getAuthenticated: (state: any) => state.isAuthenticated,
getCharacter: (state: any) => state.character,
},
actions: {
setupSocketConnection(username: string, password: string) {
this.socket = io(config.server_endpoint, {
query: { username, password },
transports: ['websocket']
});
},
disconnectSocket() {
if (!this.socket) {
return;
}
this.socket.disconnect();
this.socket = null;
this.character = null;
this.isAuthenticated = false;
},
}
});
/** /**
* Resources: * Resources:
* https://www.dynetisgames.com/2017/03/06/how-to-make-a-multiplayer-online-game-with-phaser-socket-io-and-node-js/ * https://www.dynetisgames.com/2017/03/06/how-to-make-a-multiplayer-online-game-with-phaser-socket-io-and-node-js/
* https://runthatline.com/pinia-watch-state-getters-inside-vue-components/ * https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
* https://pinia.vuejs.org/ * https://pinia.vuejs.org/
*/ */
import { defineStore, type StoreDefinition } from 'pinia'
import { io, Socket } from 'socket.io-client';
import config from '@/config';
import axios from 'axios';
export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
state: () => ({
isAuthenticated: false,
socket: null as Socket | null,
}),
getters: {
auth: (state: any) => state.isAuthenticated,
},
actions: {
async register(username: string, password: string) {
if ( this.isAuthenticated ) return console.log('User already authenticated');
try {
const response = await axios.post(`${config.server_endpoint}/register`, { username, password });
console.log(response.data);
return true;
} catch (error) {
console.error('Error registering user:', error);
return false;
}
},
async login(username: string, password: string) {
if ( this.isAuthenticated ) return console.log('User already authenticated');
try {
const response = await axios.post(`${config.server_endpoint}/login`, { username, password });
if (response.status === 200) {
this.isAuthenticated = true;
this.setupSocketConnection(username, password);
return true;
}
} catch (error) {
console.error('Login failed:', error);
return false;
}
},
setupSocketConnection(username: string, password: string) {
this.socket = io(config.server_endpoint as string, {
query: { username, password },
transports: ['websocket']
});
this.socket.on('message', (message) => {
console.log('Received message:', message);
});
// Handle more socket events as needed
},
disconnectSocket() {
if (this.socket) {
this.socket.disconnect();
this.socket = null;
this.isAuthenticated = false;
}
},
}
});