From 236aac0b9b247d163df3dcddbafced7e60883990 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Tue, 10 Sep 2024 13:13:52 +0200 Subject: [PATCH] Removed unnecessary complexity in App.vue --- package-lock.json | 106 ++++++++++++++++++++++----------------------- src/App.vue | 37 ++++++---------- src/stores/game.ts | 4 -- 3 files changed, 66 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index f3b4a1c..ef51ae8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2121,39 +2121,39 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.3.tgz", - "integrity": "sha512-adAfy9boPkP233NTyvLbGEqVuIfK/R0ZsBsIOW4BZNfb4BRpRW41Do1u+ozJpsb+mdoy80O20IzAsHaihRb5qA==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.4.tgz", + "integrity": "sha512-oNwn+BAt3n9dK9uAYvI+XGlutwuTq/wfj4xCBaZCqwwVIGtD7D6ViihEbyYZrDHIHTDE3Q6oL3/hqmAyFEy9DQ==", "license": "MIT", "dependencies": { "@babel/parser": "^7.25.3", - "@vue/shared": "3.5.3", + "@vue/shared": "3.5.4", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "node_modules/@vue/compiler-dom": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.3.tgz", - "integrity": "sha512-wnzFArg9zpvk/811CDOZOadJRugf1Bgl/TQ3RfV4nKfSPok4hi0w10ziYUQR6LnnBAUlEXYLUfZ71Oj9ds/+QA==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.4.tgz", + "integrity": "sha512-yP9RRs4BDLOLfldn6ah+AGCNovGjMbL9uHvhDHf5wan4dAHLnFGOkqtfE7PPe4HTXIqE7l/NILdYw53bo1C8jw==", "license": "MIT", "dependencies": { - "@vue/compiler-core": "3.5.3", - "@vue/shared": "3.5.3" + "@vue/compiler-core": "3.5.4", + "@vue/shared": "3.5.4" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.3.tgz", - "integrity": "sha512-P3uATLny2tfyvMB04OQFe7Sczteno7SLFxwrOA/dw01pBWQHB5HL15a8PosoNX2aG/EAMGqnXTu+1LnmzFhpTQ==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.4.tgz", + "integrity": "sha512-P+yiPhL+NYH7m0ZgCq7AQR2q7OIE+mpAEgtkqEeH9oHSdIRvUO+4X6MPvblJIWcoe4YC5a2Gdf/RsoyP8FFiPQ==", "license": "MIT", "dependencies": { "@babel/parser": "^7.25.3", - "@vue/compiler-core": "3.5.3", - "@vue/compiler-dom": "3.5.3", - "@vue/compiler-ssr": "3.5.3", - "@vue/shared": "3.5.3", + "@vue/compiler-core": "3.5.4", + "@vue/compiler-dom": "3.5.4", + "@vue/compiler-ssr": "3.5.4", + "@vue/shared": "3.5.4", "estree-walker": "^2.0.2", "magic-string": "^0.30.11", "postcss": "^8.4.44", @@ -2161,13 +2161,13 @@ } }, "node_modules/@vue/compiler-ssr": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.3.tgz", - "integrity": "sha512-F/5f+r2WzL/2YAPl7UlKcJWHrvoZN8XwEBLnT7S4BXwncH25iDOabhO2M2DWioyTguJAGavDOawejkFXj8EM1w==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.4.tgz", + "integrity": "sha512-acESdTXsxPnYr2C4Blv0ggx5zIFMgOzZmYU2UgvIff9POdRGbRNBHRyzHAnizcItvpgerSKQbllUc9USp3V7eg==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.3", - "@vue/shared": "3.5.3" + "@vue/compiler-dom": "3.5.4", + "@vue/shared": "3.5.4" } }, "node_modules/@vue/devtools-api": { @@ -2287,53 +2287,53 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.3.tgz", - "integrity": "sha512-2w61UnRWTP7+rj1H/j6FH706gRBHdFVpIqEkSDAyIpafBXYH8xt4gttstbbCWdU3OlcSWO8/3mbKl/93/HSMpw==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.4.tgz", + "integrity": "sha512-HKKbEuP7tYSGCq4e4nK6ZW6l5hyG66OUetefBp4budUyjvAYsnQDf+bgFzg2RAgnH0CInyqXwD9y47jwJEHrQw==", "license": "MIT", "dependencies": { - "@vue/shared": "3.5.3" + "@vue/shared": "3.5.4" } }, "node_modules/@vue/runtime-core": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.3.tgz", - "integrity": "sha512-5b2AQw5OZlmCzSsSBWYoZOsy75N4UdMWenTfDdI5bAzXnuVR7iR8Q4AOzQm2OGoA41xjk53VQKrqQhOz2ktWaw==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.4.tgz", + "integrity": "sha512-f3ek2sTA0AFu0n+w+kCtz567Euqqa3eHewvo4klwS7mWfSj/A+UmYTwsnUFo35KeyAFY60JgrCGvEBsu1n/3LA==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.3", - "@vue/shared": "3.5.3" + "@vue/reactivity": "3.5.4", + "@vue/shared": "3.5.4" } }, "node_modules/@vue/runtime-dom": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.3.tgz", - "integrity": "sha512-wPR1DEGc3XnQ7yHbmkTt3GoY0cEnVGQnARRdAkDzZ8MbUKEs26gogCQo6AOvvgahfjIcnvWJzkZArQ1fmWjcSg==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.4.tgz", + "integrity": "sha512-ofyc0w6rbD5KtjhP1i9hGOKdxGpvmuB1jprP7Djlj0X7R5J/oLwuNuE98GJ8WW31Hu2VxQHtk/LYTAlW8xrJdw==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.3", - "@vue/runtime-core": "3.5.3", - "@vue/shared": "3.5.3", + "@vue/reactivity": "3.5.4", + "@vue/runtime-core": "3.5.4", + "@vue/shared": "3.5.4", "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.3.tgz", - "integrity": "sha512-28volmaZVG2PGO3V3+gBPKoSHvLlE8FGfG/GKXKkjjfxLuj/50B/0OQGakM/g6ehQeqCrZYM4eHC4Ks48eig1Q==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.4.tgz", + "integrity": "sha512-FbjV6DJLgKRetMYFBA1UXCroCiED/Ckr53/ba9wivyd7D/Xw9fpo0T6zXzCnxQwyvkyrL7y6plgYhWhNjGxY5g==", "license": "MIT", "dependencies": { - "@vue/compiler-ssr": "3.5.3", - "@vue/shared": "3.5.3" + "@vue/compiler-ssr": "3.5.4", + "@vue/shared": "3.5.4" }, "peerDependencies": { - "vue": "3.5.3" + "vue": "3.5.4" } }, "node_modules/@vue/shared": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.3.tgz", - "integrity": "sha512-Jp2v8nylKBT+PlOUjun2Wp/f++TfJVFjshLzNtJDdmFJabJa7noGMncqXRM1vXGX+Yo2V7WykQFNxusSim8SCA==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.4.tgz", + "integrity": "sha512-L2MCDD8l7yC62Te5UUyPVpmexhL9ipVnYRw9CsWfm/BGRL5FwDX4a25bcJ/OJSD3+Hx+k/a8LDKcG2AFdJV3BA==", "license": "MIT" }, "node_modules/@vue/test-utils": { @@ -7072,16 +7072,16 @@ } }, "node_modules/vue": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.3.tgz", - "integrity": "sha512-xvRbd0HpuLovYbOHXRHlSBsSvmUJbo0pzbkKTApWnQGf3/cu5Z39mQeA5cZdLRVIoNf3zI6MSoOgHUT5i2jO+Q==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.4.tgz", + "integrity": "sha512-3yAj2gkmiY+i7+22A1PWM+kjOVXjU74UPINcTiN7grIVPyFFI0lpGwHlV/4xydDmobaBn7/xmi+YG8HeSlCTcg==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.3", - "@vue/compiler-sfc": "3.5.3", - "@vue/runtime-dom": "3.5.3", - "@vue/server-renderer": "3.5.3", - "@vue/shared": "3.5.3" + "@vue/compiler-dom": "3.5.4", + "@vue/compiler-sfc": "3.5.4", + "@vue/runtime-dom": "3.5.4", + "@vue/server-renderer": "3.5.4", + "@vue/shared": "3.5.4" }, "peerDependencies": { "typescript": "*" diff --git a/src/App.vue b/src/App.vue index b7e41f6..1376845 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@
- +
@@ -12,33 +12,22 @@ import { useGameStore } from '@/stores/game' import Notifications from '@/components/utilities/Notifications.vue' import Login from '@/screens/Login.vue' -import Register from '@/screens/Register.vue' +// import Register from '@/screens/Register.vue' import Characters from '@/screens/Characters.vue' import Game from '@/screens/Game.vue' -import { storeToRefs } from 'pinia' +import { computed } from 'vue' const gameStore = useGameStore() -const { screen } = storeToRefs(gameStore) -gameStore.$subscribe( - (mutation, state) => { - let newScreen = screen.value - - if (!state.connection) { - newScreen = 'login' - } else if (state.token && state.connection) { - newScreen = 'characters' - - if (state.character) { - newScreen = 'game' - } +const screen = computed(() => { + if (!gameStore.connection) { + return 'login' + } else if (gameStore.token && gameStore.connection) { + if (gameStore.character) { + return 'game' } - - // Update screen.value only if it's different from the new state - if (screen.value !== newScreen) { - screen.value = newScreen - } - }, - { detached: true } -) + return 'characters' + } + return 'login' // default fallback +}) diff --git a/src/stores/game.ts b/src/stores/game.ts index 1ae4f98..069890b 100644 --- a/src/stores/game.ts +++ b/src/stores/game.ts @@ -6,7 +6,6 @@ import { useCookies } from '@vueuse/integrations/useCookies' export const useGameStore = defineStore('game', { state: () => ({ - screen: 'login', token: '' as string | null, connection: null as Socket | null, user: null as User | null, @@ -17,9 +16,6 @@ export const useGameStore = defineStore('game', { isUserPanelOpen: false }), actions: { - setScreen(screen: string) { - this.screen = screen - }, setToken(token: string) { this.token = token },