From 7542fd70ed272b1bc7ad650016bb881eaf4779b4 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 7 Feb 2025 00:23:13 +0100
Subject: [PATCH] #351 : Added map editor settings modal

---
 public/assets/icons/mapEditor/settings.svg    | 59 +++++++++++++++++++
 .../gameMaster/mapEditor/partials/Toolbar.vue | 40 +++++++++----
 2 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 public/assets/icons/mapEditor/settings.svg

diff --git a/public/assets/icons/mapEditor/settings.svg b/public/assets/icons/mapEditor/settings.svg
new file mode 100644
index 0000000..f6c6fa2
--- /dev/null
+++ b/public/assets/icons/mapEditor/settings.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M490.667,405.333h-56.811C424.619,374.592,396.373,352,362.667,352s-61.931,22.592-71.189,53.333H21.333
+			C9.557,405.333,0,414.891,0,426.667S9.557,448,21.333,448h270.144c9.237,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,405.333,490.667,405.333z M362.667,458.667
+			c-17.643,0-32-14.357-32-32s14.357-32,32-32s32,14.357,32,32S380.309,458.667,362.667,458.667z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,64h-56.811c-9.259-30.741-37.483-53.333-71.189-53.333S300.736,33.259,291.477,64H21.333
+			C9.557,64,0,73.557,0,85.333s9.557,21.333,21.333,21.333h270.144C300.736,137.408,328.96,160,362.667,160
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,64,490.667,64z M362.667,117.333
+			c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32s32,14.357,32,32C394.667,102.976,380.309,117.333,362.667,117.333z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,234.667H220.523c-9.259-30.741-37.483-53.333-71.189-53.333s-61.931,22.592-71.189,53.333H21.333
+			C9.557,234.667,0,244.224,0,256c0,11.776,9.557,21.333,21.333,21.333h56.811c9.259,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h270.144c11.797,0,21.333-9.557,21.333-21.333C512,244.224,502.464,234.667,490.667,234.667z
+			 M149.333,288c-17.643,0-32-14.357-32-32s14.357-32,32-32c17.643,0,32,14.357,32,32S166.976,288,149.333,288z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/components/gameMaster/mapEditor/partials/Toolbar.vue b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
index 8a92fca..9c3bf8a 100644
--- a/src/components/gameMaster/mapEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
@@ -72,8 +72,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
-        <input @change="handleCheck" v-model="checkboxValue" type="checkbox" />
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="isMapEditorSettingsModalOpen = !isMapEditorSettingsModalOpen"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/settings.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(S)</span></button>
       </div>
 
       <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
@@ -84,9 +83,22 @@
       </div>
     </div>
   </div>
+
+  <Modal :isModalOpen="isMapEditorSettingsModalOpen" @modal:close="() => (isMapEditorSettingsModalOpen = false)" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Map editor settings</h3>
+    </template>
+    <template #modalBody>
+      <div class="m-4 flex items-center space-x-2">
+        <input id="continuous-drawing" @change="handleCheck" v-model="checkboxValue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
+        <label for="continuous-drawing" class="text-sm font-medium text-gray-200 cursor-pointer"> Continuous Drawing </label>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
+import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { onClickOutside } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
@@ -95,17 +107,14 @@ const mapEditor = useMapEditorComposable()
 
 const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list', 'close-lists'])
 
-// track when clicked outside of toolbar items
+// States
 const toolbar = ref(null)
-
-// track select state
-let selectPencilOpen = ref(false)
-let selectEraserOpen = ref(false)
-
-let tileListShown = ref(false)
-let mapObjectListShown = ref(false)
-
-let checkboxValue = ref<Boolean>(false)
+const isMapEditorSettingsModalOpen = ref(false)
+const selectPencilOpen = ref(false)
+const selectEraserOpen = ref(false)
+const tileListShown = ref(false)
+const mapObjectListShown = ref(false)
+const checkboxValue = ref<Boolean>(false)
 
 defineExpose({ tileListShown, mapObjectListShown })
 
@@ -143,6 +152,10 @@ function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
 }
 
 function handleClick(tool: string) {
+  if (tool === 'mapEditorSettings') {
+    isMapEditorSettingsModalOpen.value = true
+    emit('close-lists')
+  }
   if (tool === 'settings') {
     emit('open-settings')
     emit('close-lists')
@@ -180,7 +193,8 @@ function initKeyShortcuts(event: KeyboardEvent) {
     p: 'pencil',
     e: 'eraser',
     b: 'paint',
-    z: 'settings'
+    z: 'settings',
+    s: 'mapEditorSettings'
   }
 
   if (keyActions.hasOwnProperty(event.key)) {