From c228af7bb6c56aa0d6dabd0b40388c8f23315156 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 9 Feb 2025 22:29:24 +0100
Subject: [PATCH] Moved if logic into component for improved performance,
 inline value updating for select fields

---
 .../gameMaster/mapEditor/partials/MapObjectList.vue      | 4 ++--
 .../gameMaster/mapEditor/partials/TileList.vue           | 9 +++++----
 src/components/screens/MapEditor.vue                     | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue
index 4fcf2c7..dd8790d 100644
--- a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800" v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object'">
     <div class="flex flex-col gap-2.5 p-2.5">
       <div class="relative flex">
         <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
@@ -7,7 +7,7 @@
         <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
       </div>
       <div class="flex">
-        <select class="input-field w-full" name="lists">
+        <select class="input-field w-full" name="lists" v-model="mapEditor.drawMode.value" @change="(event: any) => mapEditor.setDrawMode(event.target.value)">
           <option value="tile">Tiles</option>
           <option value="map_object">Objects</option>
         </select>
diff --git a/src/components/gameMaster/mapEditor/partials/TileList.vue b/src/components/gameMaster/mapEditor/partials/TileList.vue
index c9de8bc..ae332bd 100644
--- a/src/components/gameMaster/mapEditor/partials/TileList.vue
+++ b/src/components/gameMaster/mapEditor/partials/TileList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800" v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'tile'">
     <div class="flex flex-col gap-2.5 p-2.5">
       <div class="relative flex">
         <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
@@ -7,7 +7,7 @@
         <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
       </div>
       <div class="flex">
-        <select class="input-field w-full" name="lists">
+        <select class="input-field w-full" name="lists" v-model="mapEditor.drawMode.value" @change="(event: any) => mapEditor.setDrawMode(event.target.value)">
           <option value="tile">Tiles</option>
           <option value="map_object">Objects</option>
         </select>
@@ -37,8 +37,9 @@
       </div>
       <div v-else class="h-full overflow-auto">
         <div class="p-4">
-          <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
-          <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
+          <div class="text-center mb-8">
+            <button @click="closeGroup" class="hover:text-white">Back to all tiles</button>
+          </div>
           <div class="grid grid-cols-4 gap-2 justify-items-center">
             <div class="flex flex-col items-center justify-center">
               <img
diff --git a/src/components/screens/MapEditor.vue b/src/components/screens/MapEditor.vue
index c559fee..82f4bb6 100644
--- a/src/components/screens/MapEditor.vue
+++ b/src/components/screens/MapEditor.vue
@@ -7,8 +7,8 @@
           <Map v-if="mapEditor.currentMap.value" :key="mapEditor.currentMap.value?.id" />
           <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @close-editor="mapEditor.toggleActive" />
           <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
-          <TileList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'tile'" />
-          <MapObjectList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object'" />
+          <TileList />
+          <MapObjectList />
           <MapSettings ref="mapSettingsModal" />
           <TeleportModal ref="teleportModal" />
         </div>