npm update, improved gameStore structure

package-lock.json

@@ -5470,9 +5470,9 @@
       }
     },
     "node_modules/phaser3-rex-plugins": {
-      "version": "1.80.7",
+      "version": "1.80.8",
-      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.7.tgz",
+      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.8.tgz",
-      "integrity": "sha512-49OrMj2j2WYnv2SPIQDuDlDEQk1pjR9z6k1Ixe2Ctq3CiaPrLfvf4+qwN+2ITXYw8B336kHamrzRveYJBlQ6RA==",
+      "integrity": "sha512-/uZMauVrOC/uiywQF37yH5Q6eUMOL2knMCnfEDWnc5ek40jvQOKjsenjB6q6hYuMvV54C8m0q2p1oL6B/rz12g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

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">

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>

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>

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,
+    gameSettings: {
-    isChatOpen: false,
+      isCameraFollowingCharacter: false
-    isUserPanelOpen: 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.gameSettings.isCameraFollowingCharacter = false
-      this.isUserPanelOpen = false
+      this.uiSettings.isChatOpen = false
+      this.uiSettings.isUserPanelOpen = false
     }
   }
 })