From d81c889426fcc7190a0160202416322ece044441 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 5 Nov 2024 20:53:39 +0100
Subject: [PATCH] Removed GM tools, added event listener for shift + G to open
GM panel
---
src/App.vue | 13 +++++++-
src/components/gameMaster/GmPanel.vue | 4 +++
src/components/gameMaster/GmTools.vue | 44 ---------------------------
3 files changed, 16 insertions(+), 45 deletions(-)
delete mode 100644 src/components/gameMaster/GmTools.vue
diff --git a/src/App.vue b/src/App.vue
index db25e50..3179c4f 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index d4ace4d..4f16ea4 100644
--- a/src/components/gameMaster/GmPanel.vue
+++ b/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>
diff --git a/src/components/gameMaster/GmTools.vue b/src/components/gameMaster/GmTools.vue
deleted file mode 100644
index 4bc7bc5..0000000
--- a/src/components/gameMaster/GmTools.vue
+++ /dev/null
@@ -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>