From 36f38b4c9468b41cdad3836572deba158590bb1a Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Sun, 12 May 2024 21:24:29 +0200 Subject: [PATCH] Added GUI components --- package-lock.json | 88 +++++++++---------- src/components/Game.vue | 8 ++ src/components/World.vue | 30 ++++--- src/components/game/Chat.vue | 33 +++++++ src/components/game/Hud.vue | 11 +++ src/components/game/Menu.vue | 11 +++ src/components/screens/CharacterSelection.vue | 0 src/stores/socket.ts | 13 +-- 8 files changed, 129 insertions(+), 65 deletions(-) create mode 100644 src/components/game/Chat.vue create mode 100644 src/components/game/Hud.vue create mode 100644 src/components/game/Menu.vue create mode 100644 src/components/screens/CharacterSelection.vue diff --git a/package-lock.json b/package-lock.json index 403dad2..6f2f7b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1973,30 +1973,30 @@ } }, "node_modules/@volar/language-core": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.1.tgz", - "integrity": "sha512-iHJAZKcYldZgyS8gx6DfIZApViVBeqbf6iPhqoZpG5A6F4zsZiFldKfwaKaBA3/wnOTWE2i8VUbXywI1WywCPg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.2.tgz", + "integrity": "sha512-GuvEL4JdxbnLVhPLICncCGT+tVW4cIz9GxXNeDofNnJ4iNTKhr5suGVsA1GLOne9PbraSjn8PlLt+pvLxuRVeQ==", "dev": true, "dependencies": { - "@volar/source-map": "2.2.1" + "@volar/source-map": "2.2.2" } }, "node_modules/@volar/source-map": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.1.tgz", - "integrity": "sha512-w1Bgpguhbp7YTr7VUFu6gb4iAZjeEPsOX4zpgiuvlldbzvIWDWy4t0jVifsIsxZ99HAu+c3swiME7wt+GeNqhA==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.2.tgz", + "integrity": "sha512-vUwvZuSW6iN4JI9QRinh9EjFasx1TUtnaWMKwgWx08xz1PyYuNkLlWlrZXBZ5GGBhML0u230M/7X+AHY2h9yKg==", "dev": true, "dependencies": { "muggle-string": "^0.4.0" } }, "node_modules/@volar/typescript": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.1.tgz", - "integrity": "sha512-Z/tqluR7Hz5/5dCqQp7wo9C/6tSv/IYl+tTzgzUt2NjTq95bKSsuO4E+V06D0c+3aP9x5S9jggLqw451hpnc6Q==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.2.tgz", + "integrity": "sha512-WcwOREz7+uOrpjUrKhOMaOKKmyPdtqF95HWX7SE0d9hhBB1KkfahxhaAex5U9Bn43LfINHlycLoYCNEtfeKm0g==", "dev": true, "dependencies": { - "@volar/language-core": "2.2.1", + "@volar/language-core": "2.2.2", "path-browserify": "^1.0.1" } }, @@ -2202,12 +2202,12 @@ } }, "node_modules/@vue/language-core": { - "version": "2.0.16", - "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.16.tgz", - "integrity": "sha512-Bc2sexRH99pznOph8mLw2BlRZ9edm7tW51kcBXgx8adAoOcZUWJj3UNSsdQ6H9Y8meGz7BoazVrVo/jUukIsPw==", + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.17.tgz", + "integrity": "sha512-tHw2J6G9yL4kn3jN5MftOHEq86Y6qnuohBQ1OHkJ73fAv3OYgwDI1cfX7ds0OEJEycOMG64BA3ql5bDgDa41zw==", "dev": true, "dependencies": { - "@volar/language-core": "~2.2.0", + "@volar/language-core": "~2.2.2", "@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.761", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.761.tgz", - "integrity": "sha512-PIbxpiJGx6Bb8dQaonNc6CGTRlVntdLg/2nMa1YhnrwYOORY9a3ZgGN0UQYE6lAcj/lkyduJN7BPt/JiY+jAQQ==", + "version": "1.4.763", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.763.tgz", + "integrity": "sha512-k4J8NrtJ9QrvHLRo8Q18OncqBCB7tIUyqxRcJnlonQ0ioHKYB988GcDFF3ZePmnb8eHEopDs/wPHR/iGAFgoUQ==", "dev": true }, "node_modules/emoji-regex": { @@ -3681,9 +3681,9 @@ } }, "node_modules/glob": { - "version": "10.3.14", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.14.tgz", - "integrity": "sha512-4fkAqu93xe9Mk7le9v0y3VrPDqLKHarNi2s4Pv7f2yOvfhWfhc7hRPHC/JyqMqb8B/Dt/eGS4n7ykwf3fOsl8g==", + "version": "10.3.15", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz", + "integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==", "dev": true, "dependencies": { "foreground-child": "^3.1.0", @@ -3696,7 +3696,7 @@ "glob": "dist/esm/bin.mjs" }, "engines": { - "node": ">=16 || 14 >=14.17" + "node": ">=16 || 14 >=14.18" }, "funding": { "url": "https://github.com/sponsors/isaacs" @@ -4850,16 +4850,16 @@ } }, "node_modules/path-scurry": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz", - "integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", "dev": true, "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" }, "engines": { - "node": ">=16 || 14 >=14.17" + "node": ">=16 || 14 >=14.18" }, "funding": { "url": "https://github.com/sponsors/isaacs" @@ -5014,13 +5014,13 @@ } }, "node_modules/pkg-types": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.0.tgz", - "integrity": "sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz", + "integrity": "sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==", "dev": true, "dependencies": { "confbox": "^0.1.7", - "mlly": "^1.6.1", + "mlly": "^1.7.0", "pathe": "^1.1.2" } }, @@ -5386,9 +5386,9 @@ "dev": true }, "node_modules/sass": { - "version": "1.77.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.0.tgz", - "integrity": "sha512-eGj4HNfXqBWtSnvItNkn7B6icqH14i3CiCGbzMKs3BAPTq62pp9NBYsBgyN4cA+qssqo9r26lW4JSvlaUUWbgw==", + "version": "1.77.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.1.tgz", + "integrity": "sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -5415,9 +5415,9 @@ } }, "node_modules/semver": { - "version": "7.6.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.1.tgz", - "integrity": "sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==", + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz", + "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==", "dev": true, "bin": { "semver": "bin/semver.js" @@ -6198,9 +6198,9 @@ } }, "node_modules/vue-component-type-helpers": { - "version": "2.0.16", - "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.16.tgz", - "integrity": "sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==", + "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==", "dev": true }, "node_modules/vue-eslint-parser": { @@ -6238,13 +6238,13 @@ } }, "node_modules/vue-tsc": { - "version": "2.0.16", - "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.16.tgz", - "integrity": "sha512-/gHAWJa216PeEhfxtAToIbxdWgw01wuQzo48ZUqMYVEyNqDp+OYV9xMO5HaPS2P3Ls0+EsjguMZLY4cGobX4Ew==", + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.17.tgz", + "integrity": "sha512-RRZsiCBD1hvATQb321xV+SkRDKsK5hgFQ4WXy5wuYsyyjz8xAK4DjxHkpH7PFoJKUbZTbeW8KzhejzXZS49Tzw==", "dev": true, "dependencies": { - "@volar/typescript": "~2.2.0", - "@vue/language-core": "2.0.16", + "@volar/typescript": "~2.2.2", + "@vue/language-core": "2.0.17", "semver": "^7.5.4" }, "bin": { diff --git a/src/components/Game.vue b/src/components/Game.vue index c4d8ca9..15daee8 100644 --- a/src/components/Game.vue +++ b/src/components/Game.vue @@ -1,10 +1,15 @@ @@ -14,6 +19,8 @@ import { Game, Scene } from 'phavuer' import World from '@/components/World.vue' import Pointer = Phaser.Input.Pointer import { useSocketStore } from '@/stores/socket' +import Hud from '@/components/game/Hud.vue' +import Chat from '@/components/game/Chat.vue' const socket = useSocketStore(); @@ -65,5 +72,6 @@ const bootScene = (scene: Phaser.Scene) => { justify-content: center; align-items: center; height: 100vh; + padding:30px } \ No newline at end of file diff --git a/src/components/World.vue b/src/components/World.vue index 356f57b..9425997 100644 --- a/src/components/World.vue +++ b/src/components/World.vue @@ -47,35 +47,41 @@ const zoneStore = useZoneStore(); const socket = useSocketStore(); // Watch for changes in the zoneStore and update the layer -watch (() => zoneStore.loaded, () => { +watch (() => zoneStore.loaded, () => { // @TODO : change to tiles for when loading other maps zoneStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y))); }, { deep: true }) // Load the zone from the server onBeforeMount(() => { - socket.socket?.emit('player:connect'); - socket.socket?.emit('player:getMap'); + socket.socket?.emit('character:connect'); + socket.socket?.emit('character:zone:load'); }) // Listen for the zone event from the server and load the zone -socket.socket?.on('zone', (data) => { - zoneStore.loadTiles(data.tiles) +socket.socket?.on('character:zone:load', (data) => { + console.log('character:zone:load', data.data); + zoneStore.loadTiles(data.data.tiles) + socket.socket?.emit('character:zone:load:players', { zoneId: data.data.id }); /** * @TODO * bug , when 2nd player joins, the first player is not added to the zone */ - console.log(data.players); + // console.log(data.players); + // console.log(data.players[1]); // key is user id + // + // // remove self from the players list + // delete data.players[socket.socket?.id]; + // + // zoneStore.addPlayers(data.players); +}) - console.log(data.players[1]); // key is user id - - // remove self from the players list - delete data.players[socket.socket?.id]; - - zoneStore.addPlayers(data.players); +socket.socket?.on('character:zone:load:players', (data) => { + console.log('character:zone:load:players', data.data); + // zoneStore.addPlayers(data.players); }) // Listen for player join events diff --git a/src/components/game/Chat.vue b/src/components/game/Chat.vue new file mode 100644 index 0000000..024f7ab --- /dev/null +++ b/src/components/game/Chat.vue @@ -0,0 +1,33 @@ + + + + + \ No newline at end of file diff --git a/src/components/game/Hud.vue b/src/components/game/Hud.vue new file mode 100644 index 0000000..04a0f45 --- /dev/null +++ b/src/components/game/Hud.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/components/game/Menu.vue b/src/components/game/Menu.vue new file mode 100644 index 0000000..04a0f45 --- /dev/null +++ b/src/components/game/Menu.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/components/screens/CharacterSelection.vue b/src/components/screens/CharacterSelection.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/stores/socket.ts b/src/stores/socket.ts index 7f61f63..ebf2732 100644 --- a/src/stores/socket.ts +++ b/src/stores/socket.ts @@ -4,20 +4,18 @@ * https://runthatline.com/pinia-watch-state-getters-inside-vue-components/ * https://pinia.vuejs.org/ */ -import { defineStore } from 'pinia'; -import {useZoneStore} from '@/stores/zone' +import { defineStore, type StoreDefinition } from 'pinia' import { io, Socket } from 'socket.io-client'; import config from '@/config'; import axios from 'axios'; -export const useSocketStore = defineStore('socket', { +export const useSocketStore: StoreDefinition = defineStore('socket', { state: () => ({ isAuthenticated: false, socket: null as Socket | null, }), getters: { - auth: (state) => state.isAuthenticated, - sockett: (state) => state.socket, + auth: (state: any) => state.isAuthenticated, }, actions: { async register(username: string, password: string) { @@ -55,10 +53,6 @@ export const useSocketStore = defineStore('socket', { transports: ['websocket'] }); - this.socket.on('connect', () => { - console.log('Socket connected!'); - }); - this.socket.on('message', (message) => { console.log('Received message:', message); }); @@ -69,6 +63,7 @@ export const useSocketStore = defineStore('socket', { if (this.socket) { this.socket.disconnect(); this.socket = null; + this.isAuthenticated = false; } }, }