diff --git a/package-lock.json b/package-lock.json index e8e4b8f..be46ed7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" + } } } } diff --git a/package.json b/package.json index fcaca29..e939340 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.vue b/src/App.vue index 4b92742..3317109 100644 --- a/src/App.vue +++ b/src/App.vue @@ -17,11 +17,11 @@ const screen:Ref = 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) { diff --git a/src/components/Game.vue b/src/components/Game.vue index 27b1e18..3b7fd84 100644 --- a/src/components/Game.vue +++ b/src/components/Game.vue @@ -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'); diff --git a/src/components/World.vue b/src/components/World.vue index 6db40e7..4ea3ff7 100644 --- a/src/components/World.vue +++ b/src/components/World.vue @@ -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) }) diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue index 4017b59..d6ef903 100644 --- a/src/components/screens/Characters.vue +++ b/src/components/screens/Characters.vue @@ -26,7 +26,7 @@ import { useSocketStore } from '@/stores/socket' const socket = useSocketStore(); -socket.getSocket.emit('characters:get'); +socket.connection.emit('characters:get');