Removed GM tools, added event listener for shift + G to open GM panel

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <Notifications />
-  <GmTools v-if="gameStore.character?.role === 'gm'" />
   <GmPanel v-if="gameStore.character?.role === 'gm'" />
   <component :is="currentScreen" />
 </template>
@@ -44,4 +43,16 @@ addEventListener('click', (event) => {
   const audio = new Audio('/assets/music/click-btn.mp3')
   audio.play()
 })
+
+// Watch for "G" key press and toggle the gm panel
+addEventListener('keydown', (event) => {
+  if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm
+
+  // Check if no input is active
+  if (event.repeat || event.isComposing || event.defaultPrevented) return
+
+  if (event.key === 'G') {
+    gameStore.toggleGmPanel()
+  }
+})
 </script>

src/components/gameMaster/GmPanel.vue

@@ -6,6 +6,8 @@
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
         <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
+
       </div>
     </template>
     <template #modalBody>
@@ -21,8 +23,10 @@ import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 
 const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
 
 let toggle = ref('asset-manager')
 </script>

src/components/gameMaster/GmTools.vue

@@ -1,44 +0,0 @@
-<template>
-  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
-    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">GM tools</h3>
-    </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="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>
-  </Modal>
-</template>
-<script setup lang="ts">
-import Modal from '@/components/utilities/Modal.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref } from 'vue'
-
-const zoneEditorStore = useZoneEditorStore()
-const gameStore = useGameStore()
-const modalWidth = ref(200)
-const modalHeight = ref(170)
-
-let posXY = ref({ x: 0, y: 0 })
-
-onMounted(() => {
-  window.addEventListener('resize', () => {
-    posXY.value = customPositionGmPanel(modalWidth.value)
-  })
-})
-
-const customPositionGmPanel = (modalWidth: number) => {
-  const padding = 25
-  const width = window.innerWidth
-
-  const x = width - (modalWidth + 4) - 25
-  const y = padding
-
-  return { x, y }
-}
-
-posXY.value = customPositionGmPanel(modalWidth.value)
-</script>