From 1e3fc2b0f8aa9b1efb40dcd73c872f9ffd15d462 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 17 Nov 2024 00:39:28 +0100
Subject: [PATCH] Added disableBgTexture option to modals

---
 package-lock.json                      | 18 +++++++++---------
 src/components/gameMaster/GmPanel.vue  |  2 +-
 src/components/utilities/Accordion.vue |  2 +-
 src/components/utilities/Modal.vue     | 20 +++++++++++++++++---
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 443b310..d28cf44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3523,9 +3523,9 @@
       }
     },
     "node_modules/dexie": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.9.tgz",
-      "integrity": "sha512-VQG1huEVSAdDZssb9Bb9mFy+d3jAE0PT4d1nIRYlT46ip1fzbs1tXi0SlUayRDgV3tTbJG8ZRqAo2um49gtynA==",
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.10.tgz",
+      "integrity": "sha512-eM2RzuR3i+M046r2Q0Optl3pS31qTWf8aFuA7H9wnsHTwl8EPvroVLwvQene/6paAs39Tbk6fWZcn2aZaHkc/w==",
       "license": "Apache-2.0"
     },
     "node_modules/didyoumean": {
@@ -3621,9 +3621,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.60",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.60.tgz",
-      "integrity": "sha512-HcraRUkTKJ+8yA3b10i9qvhUlPBRDlKjn1XGek1zDGVfAKcvi8TsUnImGqLiEm9j6ZulxXIWWIo9BmbkbCTGgA==",
+      "version": "1.5.62",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.62.tgz",
+      "integrity": "sha512-t8c+zLmJHa9dJy96yBZRXGQYoiCEnHYgFwn1asvSPZSUdVxnB62A4RASd7k41ytG3ErFBA0TpHlKg9D9SQBmLg==",
       "dev": true,
       "license": "ISC"
     },
@@ -5827,9 +5827,9 @@
       }
     },
     "node_modules/phaser3-rex-plugins": {
-      "version": "1.80.10",
-      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.10.tgz",
-      "integrity": "sha512-7qpWkpFmXobkpMSFEIRcVnotpAYZDksGzgCuZrzDAy+vtmKex5bTdSEZ8UDYYwYgkuAhVoMsveFF6oDfGOSY4Q==",
+      "version": "1.80.11",
+      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.11.tgz",
+      "integrity": "sha512-it+rV0ElkAd0jjSLqSewLBk91vFzb+P/HxOfFhs9xdc+HfANDmNTLwFxiBIvuXEn84nyiCn1VR08Fcnyw7DuyQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index d0a8690..15717fd 100644
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="gameStore.uiSettings.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" :disable-bg-texture="true">
     <template #modalHeader>
       <div class="flex gap-1.5 flex-wrap">
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
diff --git a/src/components/utilities/Accordion.vue b/src/components/utilities/Accordion.vue
index 5871d9d..c4bf912 100644
--- a/src/components/utilities/Accordion.vue
+++ b/src/components/utilities/Accordion.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4 flex flex-col gap-3">
-    <div @click="toggle" class="p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-white font-default cursor-pointer">
+    <div @click="toggle" class="p-3 bg-gray-200 bg-opacity-50 rounded hover:bg-gray-300 text-white font-default cursor-pointer">
       <slot name="header" />
     </div>
     <transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index f1ad742..92ce6e1 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -3,7 +3,13 @@
     <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
       <!-- Header -->
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
-        <div class="rounded-t absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90" />
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-gray-700': disableBgTexture
+          }"
+          class="rounded-t absolute w-full h-full top-0 left-0"
+        />
         <div class="relative z-10">
           <slot name="modalHeader" />
         </div>
@@ -19,7 +25,13 @@
 
       <!-- Body -->
       <div class="overflow-hidden grow relative">
-        <div class="rounded-b absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90" />
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-gray-700': disableBgTexture
+          }"
+          class="rounded-b absolute w-full h-full top-0 left-0"
+        />
         <div class="relative z-10 h-full">
           <slot name="modalBody" />
         </div>
@@ -41,6 +53,7 @@ interface ModalProps {
   modalPositionY?: number
   modalWidth?: number
   modalHeight?: number
+  disableBgTexture?: boolean
 }
 
 interface Position {
@@ -58,7 +71,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
   modalPositionX: 0,
   modalPositionY: 0,
   modalWidth: 500,
-  modalHeight: 280
+  modalHeight: 280,
+  disableBgTexture: false
 })
 
 const emit = defineEmits<{