From 85537840ab42547238c55be7e8f4a52d5629291f Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 28 Jan 2025 05:14:37 +0100
Subject: [PATCH] Improved code

---
 .../gameMaster/mapEditor/partials/Toolbar.vue | 44 ++++++-------------
 1 file changed, 13 insertions(+), 31 deletions(-)

diff --git a/src/components/gameMaster/mapEditor/partials/Toolbar.vue b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
index 927acd9..09e466e 100644
--- a/src/components/gameMaster/mapEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/mapEditor/partials/Toolbar.vue
@@ -16,29 +16,19 @@
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
             </div>
             <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && mapEditor.tool.value === 'pencil'">
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('tile'); setPencilMode">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'pencil')">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('map_object'); setPencilMode">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('map_object', 'pencil')">
                 Map object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('teleport'); setPencilMode">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('teleport', 'pencil')">
                 Teleport
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('blocking tile'); setPencilMode"
-                >Blocking tile</span
-              >
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('blocking tile', 'pencil')">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -53,32 +43,19 @@
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
             </div>
             <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('tile'); setEraserMode"
-              >
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'eraser')">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('map_object'); setEraserMode"
-              >
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('map_object', 'eraser')">
                 Map object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('teleport'); setEraserMode"
-              >
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('teleport', 'eraser')">
                 Teleport
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span
-                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
-                @click="setDrawMode('blocking tile'); setEraserMode"
-                >Blocking tile</span
-              >
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('blocking tile', 'eraser')">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -154,6 +131,11 @@ function setEraserMode() {
   selectEraserOpen.value = false
 }
 
+function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
+  setDrawMode(mode)
+  type === 'pencil' ? setPencilMode() : setEraserMode()
+}
+
 function handleClick(tool: string) {
   if (tool === 'settings') {
     emit('open-settings')