From d214bd37ad2d49cf55dc56b935e4449fefcfa875 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 29 Sep 2024 15:12:20 +0200
Subject: [PATCH] npm update, improved gameStore structure

---
 package-lock.json                     |  6 +++---
 src/components/gameMaster/GmPanel.vue |  2 +-
 src/components/gui/Chat.vue           |  2 +-
 src/components/gui/UserPanel.vue      |  2 +-
 src/stores/gameStore.ts               | 29 ++++++++++++++++-----------
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index feeb199..2974a03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5470,9 +5470,9 @@
       }
     },
     "node_modules/phaser3-rex-plugins": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.7.tgz",
-      "integrity": "sha512-49OrMj2j2WYnv2SPIQDuDlDEQk1pjR9z6k1Ixe2Ctq3CiaPrLfvf4+qwN+2ITXYw8B336kHamrzRveYJBlQ6RA==",
+      "version": "1.80.8",
+      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.8.tgz",
+      "integrity": "sha512-/uZMauVrOC/uiywQF37yH5Q6eUMOL2knMCnfEDWnc5ek40jvQOKjsenjB6q6hYuMvV54C8m0q2p1oL6B/rz12g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index f7f9b93..f39e048 100644
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="gameStore.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
+  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">GM Panel</h3>
       <div class="flex gap-1.5 flex-wrap">
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 84c9ff1..df5eab6 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col">
-    <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen">
+    <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.uiSettings.isChatOpen">
       <div v-for="message in chats" class="flex-col py-2 items-center p-3">
         <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm">{{ message.character.name }}</span>
         <p class="text-gray-50 m-0">{{ message.message }}</p>
diff --git a/src/components/gui/UserPanel.vue b/src/components/gui/UserPanel.vue
index 69d3b1f..769870f 100644
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isUserPanelOpen">
+  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen">
     <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
       <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200">
         <h3 class="m-0 font-medium shrink-0">Game menu</h3>
diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts
index 6af343e..f39552d 100644
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@@ -12,11 +12,15 @@ export const useGameStore = defineStore('game', {
     connection: null as Socket | null,
     user: null as User | null,
     character: null as Character | null,
-    isGmPanelOpen: false,
     isPlayerDraggingCamera: false,
-    isCameraFollowingCharacter: false,
-    isChatOpen: false,
-    isUserPanelOpen: false
+    gameSettings: {
+      isCameraFollowingCharacter: false
+    },
+    uiSettings: {
+      isChatOpen: false,
+      isUserPanelOpen: false,
+      isGmPanelOpen: false
+    }
   }),
   getters: {
     getNotifications: (state: any) => state.notifications,
@@ -92,7 +96,7 @@ export const useGameStore = defineStore('game', {
       this.character = character
     },
     toggleGmPanel() {
-      this.isGmPanelOpen = !this.isGmPanelOpen
+      this.uiSettings.isGmPanelOpen = !this.uiSettings.isGmPanelOpen
     },
     togglePlayerDraggingCamera() {
       this.isPlayerDraggingCamera = !this.isPlayerDraggingCamera
@@ -101,16 +105,16 @@ export const useGameStore = defineStore('game', {
       this.isPlayerDraggingCamera = moving
     },
     toggleCameraFollowingCharacter() {
-      this.isCameraFollowingCharacter = !this.isCameraFollowingCharacter
+      this.gameSettings.isCameraFollowingCharacter = !this.gameSettings.isCameraFollowingCharacter
     },
     setCameraFollowingCharacter(following: boolean) {
-      this.isCameraFollowingCharacter = following
+      this.gameSettings.isCameraFollowingCharacter = following
     },
     toggleChat() {
-      this.isChatOpen = !this.isChatOpen
+      this.uiSettings.isChatOpen = !this.uiSettings.isChatOpen
     },
     toggleUserPanel() {
-      this.isUserPanelOpen = !this.isUserPanelOpen
+      this.uiSettings.isUserPanelOpen = !this.uiSettings.isUserPanelOpen
     },
     initConnection() {
       this.connection = io(config.server_endpoint, {
@@ -151,10 +155,11 @@ export const useGameStore = defineStore('game', {
       this.token = null
       this.user = null
       this.character = null
-      this.isGmPanelOpen = false
+      this.uiSettings.isGmPanelOpen = false
       this.isPlayerDraggingCamera = false
-      this.isChatOpen = false
-      this.isUserPanelOpen = false
+      this.gameSettings.isCameraFollowingCharacter = false
+      this.uiSettings.isChatOpen = false
+      this.uiSettings.isUserPanelOpen = false
     }
   }
 })