From 1ed0283a947b44ab37c61a2e6fc7ab444b48ef89 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Thu, 16 May 2024 00:26:25 +0200 Subject: [PATCH] haha keyboard go brrr --- package-lock.json | 90 ++++++++-------- src/App.vue | 28 +++-- src/components/World.vue | 10 +- src/components/screens/CharacterSelection.vue | 3 + src/components/screens/Login.vue | 40 +++---- src/components/screens/Register.vue | 3 + src/services/authService.ts | 32 ++++++ src/stores/socket.ts | 101 +++++++----------- 8 files changed, 154 insertions(+), 153 deletions(-) create mode 100644 src/components/screens/Register.vue create mode 100644 src/services/authService.ts diff --git a/package-lock.json b/package-lock.json index 5bff480..cd3e08b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1973,30 +1973,30 @@ } }, "node_modules/@volar/language-core": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.2.tgz", - "integrity": "sha512-GuvEL4JdxbnLVhPLICncCGT+tVW4cIz9GxXNeDofNnJ4iNTKhr5suGVsA1GLOne9PbraSjn8PlLt+pvLxuRVeQ==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.4.tgz", + "integrity": "sha512-7As47GndxGxsqqYnbreLrfB5NDUeQioPM2LJKUuB4/34c0NpEJ2byVl3c9KYdjIdiEstWZ9JLtLKNTaPWb5jtA==", "dev": true, "dependencies": { - "@volar/source-map": "2.2.2" + "@volar/source-map": "2.2.4" } }, "node_modules/@volar/source-map": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.2.tgz", - "integrity": "sha512-vUwvZuSW6iN4JI9QRinh9EjFasx1TUtnaWMKwgWx08xz1PyYuNkLlWlrZXBZ5GGBhML0u230M/7X+AHY2h9yKg==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.4.tgz", + "integrity": "sha512-m92FLpR9vB1YEZfiZ+bfgpLrToL/DNkOrorWVep3pffHrwwI4Tx2oIQN+sqHJfKkiT5N3J1owC+8crhAEinfjg==", "dev": true, "dependencies": { "muggle-string": "^0.4.0" } }, "node_modules/@volar/typescript": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.2.tgz", - "integrity": "sha512-WcwOREz7+uOrpjUrKhOMaOKKmyPdtqF95HWX7SE0d9hhBB1KkfahxhaAex5U9Bn43LfINHlycLoYCNEtfeKm0g==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.4.tgz", + "integrity": "sha512-uAQC53tgEbHO62G8NXMfmBrJAlP2QJ9WxVEEQqqK3I6VSy8frL5LbH3hAWODxiwMWixv74wJLWlKbWXOgdIoRQ==", "dev": true, "dependencies": { - "@volar/language-core": "2.2.2", + "@volar/language-core": "2.2.4", "path-browserify": "^1.0.1" } }, @@ -2125,13 +2125,13 @@ "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==" }, "node_modules/@vue/devtools-core": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.1.3.tgz", - "integrity": "sha512-pVbWi8pf2Z/fZPioYOIgu+cv9pQG55k4D8bL31ec+Wfe+pQR0ImFDu0OhHfch1Ra8uvLLrAZTF4IKeGAkmzD4A==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.2.0.tgz", + "integrity": "sha512-cHSeu70rTtubt2DYia+VDGNTC1m84Xyuk5eNTjmOpMLECaJnWnzCv6kR84EZp7rG+MVZalJG+4ecX2GaTbU3cQ==", "dev": true, "dependencies": { - "@vue/devtools-kit": "^7.1.3", - "@vue/devtools-shared": "^7.1.3", + "@vue/devtools-kit": "^7.2.0", + "@vue/devtools-shared": "^7.2.0", "mitt": "^3.0.1", "nanoid": "^3.3.4", "pathe": "^1.1.2", @@ -2139,12 +2139,12 @@ } }, "node_modules/@vue/devtools-kit": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.1.3.tgz", - "integrity": "sha512-NFskFSJMVCBXTkByuk2llzI3KD3Blcm7WqiRorWjD6nClHPgkH5BobDH08rfulqq5ocRt5xV+3qOT1Q9FXJrwQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.2.0.tgz", + "integrity": "sha512-Kx+U0QiQg/g714euYKfnCdhTcOycSlH1oyTE57D0sAmisdsRCNLfXcnnIwcFY2jdCpuz9DNbuE0VWQuYF5zAZQ==", "dev": true, "dependencies": { - "@vue/devtools-shared": "^7.1.3", + "@vue/devtools-shared": "^7.2.0", "hookable": "^5.5.3", "mitt": "^3.0.1", "perfect-debounce": "^1.0.0", @@ -2155,9 +2155,9 @@ } }, "node_modules/@vue/devtools-shared": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.1.3.tgz", - "integrity": "sha512-KJ3AfgjTn3tJz/XKF+BlVShNPecim3G21oHRue+YQOsooW+0s+qXvm09U09aO7yBza5SivL1QgxSrzAbiKWjhQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.2.0.tgz", + "integrity": "sha512-gVr3IjKjU7axNvclRgICgy1gq/TDnF1hhBAEox+l5mMXZiTIFVIm1zpcIPssc0HxMDgzy+lXqOVsY4DGyZ+ZeA==", "dev": true, "dependencies": { "rfdc": "^1.3.1" @@ -2202,12 +2202,12 @@ } }, "node_modules/@vue/language-core": { - "version": "2.0.17", - "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.17.tgz", - "integrity": "sha512-tHw2J6G9yL4kn3jN5MftOHEq86Y6qnuohBQ1OHkJ73fAv3OYgwDI1cfX7ds0OEJEycOMG64BA3ql5bDgDa41zw==", + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.18.tgz", + "integrity": "sha512-MwKRQAReHN1z7P3/8k/ISC5MjDRjHxGyitn50jWrMmzW9FNySG/1NxMPgAHcVJ4zApJUolS9TexYzT4I6BKL5w==", "dev": true, "dependencies": { - "@volar/language-core": "~2.2.2", + "@volar/language-core": "~2.2.4", "@vue/compiler-dom": "^3.4.0", "@vue/shared": "^3.4.0", "computeds": "^0.0.1", @@ -3047,9 +3047,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.768", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.768.tgz", - "integrity": "sha512-z2U3QcvNuxdkk33YV7R1bVMNq7fL23vq3WfO5BHcqrm4TnDGReouBfYKLEFh5umoK1XACjEwp8mmnhXk2EJigw==", + "version": "1.4.770", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.770.tgz", + "integrity": "sha512-ONwOsDiVvV07CMsyH4+dEaZ9L79HMH/ODHnDS3GkIhgNqdDHJN2C18kFb0fBj0RXpQywsPJl6k2Pqg1IY4r1ig==", "dev": true }, "node_modules/emoji-regex": { @@ -6072,18 +6072,18 @@ } }, "node_modules/vite-plugin-vue-devtools": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.1.3.tgz", - "integrity": "sha512-qv8Z4yok9RYo6TEs89WnIAlmTHby/+XTim8tlSnMs3lAPcQqqcl/wGRY8gAeYrGCANngOqO+VuabW3Jb1HZtyw==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.2.0.tgz", + "integrity": "sha512-bFWwx/YF9M+aXTjDo0/6DrC7+WCzLg7wAmFoQA3Gd7cv5WV4u65hHSZN8bq0zhgHqtYQZdWnp0L2z6JNCwcIGg==", "dev": true, "dependencies": { - "@vue/devtools-core": "^7.1.3", - "@vue/devtools-kit": "^7.1.3", - "@vue/devtools-shared": "^7.1.3", + "@vue/devtools-core": "^7.2.0", + "@vue/devtools-kit": "^7.2.0", + "@vue/devtools-shared": "^7.2.0", "execa": "^8.0.1", "sirv": "^2.0.4", "vite-plugin-inspect": "^0.8.4", - "vite-plugin-vue-inspector": "^5.0.1" + "vite-plugin-vue-inspector": "^5.1.0" }, "engines": { "node": ">=v14.21.3" @@ -6198,9 +6198,9 @@ } }, "node_modules/vue-component-type-helpers": { - "version": "2.0.17", - "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.17.tgz", - "integrity": "sha512-2car49m8ciqg/JjgMBkx7o/Fd2A7fHESxNqL/2vJYFLXm4VwYO4yH0rexOi4a35vwNgDyvt17B07Vj126l9rAQ==", + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.18.tgz", + "integrity": "sha512-zi1QaDBhSb3oeHJh55aTCrosFNKEQsOL9j3XCAjpF9dwxDUUtd85RkJVzO+YpJqy1LNoCWLU8gwuZ7HW2iDN/A==", "dev": true }, "node_modules/vue-eslint-parser": { @@ -6238,13 +6238,13 @@ } }, "node_modules/vue-tsc": { - "version": "2.0.17", - "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.17.tgz", - "integrity": "sha512-RRZsiCBD1hvATQb321xV+SkRDKsK5hgFQ4WXy5wuYsyyjz8xAK4DjxHkpH7PFoJKUbZTbeW8KzhejzXZS49Tzw==", + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.18.tgz", + "integrity": "sha512-0SrsAJzsUrX7A6aXLsBrXrAesozAirASPnVz5VUt2+4imFNP2cEXtLQy1s8ayUHLex3zoYIoZVgZ7h7UgqaEVw==", "dev": true, "dependencies": { - "@volar/typescript": "~2.2.2", - "@vue/language-core": "2.0.17", + "@volar/typescript": "~2.2.4", + "@vue/language-core": "2.0.18", "semver": "^7.5.4" }, "bin": { diff --git a/src/App.vue b/src/App.vue index c25ef45..5e7154b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,30 +1,28 @@ \ No newline at end of file diff --git a/src/components/World.vue b/src/components/World.vue index a82a484..7a017ef 100644 --- a/src/components/World.vue +++ b/src/components/World.vue @@ -8,11 +8,6 @@ diff --git a/src/components/screens/Register.vue b/src/components/screens/Register.vue new file mode 100644 index 0000000..af9fa97 --- /dev/null +++ b/src/components/screens/Register.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/services/authService.ts b/src/services/authService.ts new file mode 100644 index 0000000..9220b44 --- /dev/null +++ b/src/services/authService.ts @@ -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; + } +} \ No newline at end of file diff --git a/src/stores/socket.ts b/src/stores/socket.ts index ebf2732..e6f0118 100644 --- a/src/stores/socket.ts +++ b/src/stores/socket.ts @@ -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 = 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: * 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://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 = 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; - } - }, - } -}); + */ \ No newline at end of file