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 4ca311e..a667245 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-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)) {