Merge remote-tracking branch 'origin/main' into feature/#321

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-80 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-lists', '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 })
 
@@ -142,6 +151,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')
@@ -179,7 +192,8 @@ function initKeyShortcuts(event: KeyboardEvent) {
     p: 'pencil',
     e: 'eraser',
     b: 'paint',
-    z: 'settings'
+    z: 'settings',
+    s: 'mapEditorSettings'
   }
 
   if (keyActions.hasOwnProperty(event.key)) {