Removed gmPanel store and moved its logics to gameStore

src/components/utilities/GmPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="gmPanelStore.isOpen" @modal:close="() => gmPanelStore.toggle()" :modal-width="1000" :modal-height="650">
+  <Modal :isModalOpen="gameStore.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">GM Panel</h3>
       <div class="flex gap-1.5 flex-wrap">
@@ -21,9 +21,9 @@
 import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
-import { useGmPanelStore } from '@/stores/gmPanel'
+import { useGameStore } from '@/stores/game'
 
-const gmPanelStore = useGmPanelStore()
+const gameStore = useGameStore()
 
 let toggle = ref('asset-manager')
 </script>

src/components/utilities/GmTools.vue

@@ -5,7 +5,7 @@
     </template>
     <template #modalBody>
       <div class="content flex flex-col gap-2.5 m-4 h-20">
-        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
+        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="gameStore.toggleGmPanel()">Toggle GM panel</button>
         <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
       </div>
     </template>
@@ -14,8 +14,8 @@
 <script setup lang="ts">
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useGmPanelStore } from '@/stores/gmPanel'
+import { useGameStore } from '@/stores/game'
 
 const zoneEditorStore = useZoneEditorStore()
-const gmPanelStore = useGmPanelStore()
+const gameStore = useGameStore()
 </script>

src/components/utilities/zoneEditor/partials/ZoneSettings.vue

@@ -10,19 +10,22 @@
           <div class="gap-2.5 flex flex-wrap">
             <div class="w-full flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Name</label>
-              <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
+              <input class="input-cyan" v-model="name" name="name" id="name" />
             </div>
             <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Width</label>
-              <input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
+              <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
             </div>
             <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
               <label class="mb-1.5 font-titles" for="name">Height</label>
-              <input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
+              <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
             </div>
             <div class="w-full flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">PVP enabled</label>
+              <label class="mb-1.5 font-titles" for="pvp">PVP enabled</label>
-              <input class="input-cyan max-w-64" name="name" id="name" />
+              <select class="input-cyan" name="pvp" id="pvp">
+                <option value="0">No</option>
+                <option value="1">Yes</option>
+              </select>
             </div>
           </div>
         </form>

src/stores/game.ts

@@ -10,12 +10,25 @@ export const useGameStore = defineStore('game', {
     token: '' as string | null,
     connection: null as Socket | null,
     user: null as User | null,
-    character: null as Character | null
+    character: null as Character | null,
+    isGmPanelOpen: false
   }),
   actions: {
     setScreen(screen: string) {
       this.screen = screen
     },
+    setToken(token: string) {
+      this.token = token
+    },
+    setUser(user: User | null) {
+      this.user = user
+    },
+    setCharacter(character: Character | null) {
+      this.character = character
+    },
+    toggleGmPanel() {
+      this.isGmPanelOpen = !this.isGmPanelOpen
+    },
     initConnection() {
       this.connection = io(config.server_endpoint, {
         secure: !config.development,
@@ -49,14 +62,5 @@ export const useGameStore = defineStore('game', {
 
       useCookies().remove('token')
     },
-    setToken(token: string) {
-      this.token = token
-    },
-    setUser(user: User | null) {
-      this.user = user
-    },
-    setCharacter(character: Character | null) {
-      this.character = character
-    }
   }
 })

src/stores/gmPanel.ts

@@ -1,20 +0,0 @@
-import { defineStore } from 'pinia'
-import type { Character } from '@/types'
-import config from '@/config'
-
-export const useGmPanelStore = defineStore('gmPanel', {
-  state: () => ({
-    isOpen: false
-  }),
-  actions: {
-    toggle() {
-      this.isOpen = !this.isOpen
-    },
-    open() {
-      this.isOpen = true
-    },
-    close() {
-      this.isOpen = false
-    }
-  }
-})