From 922ae6474e43890aae0a0525eac4e06b82f3af99 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 7 Jul 2024 14:27:21 +0200
Subject: [PATCH] Fix select styling tiles and synced styling with objects

---
 src/components/utilities/zoneEditor/Objects.vue |  5 +++--
 src/components/utilities/zoneEditor/Tiles.vue   | 14 ++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index a2d0ff6..73e3934 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/src/components/utilities/zoneEditor/Objects.vue
@@ -21,12 +21,13 @@
           <div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
             <div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="mb-4">
               <img
+                class="border-2 border-solid"
                 :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
                 alt="Object"
                 @click="zoneEditorStore.setSelectedObject(object)"
                 :class="{
-                  'w-full h-auto cursor-pointer border-2 transition-all duration-300': true,
-                  'border-2 border-solid border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
+                  'w-full h-auto cursor-pointer transition-all duration-300': true,
+                  'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
                   'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
                 }"
               />
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index 4ac6698..f8cdd02 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -16,20 +16,26 @@
         <div class="m-[15px]">
           <div class="flex flex-wrap gap-2.5">
             <img
-              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
+              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition-all ease duration-300"
               src="/assets/zone/blank_tile.png"
               alt="Blank tile"
               @click="zoneEditorStore.setSelectedTile('blank_tile')"
-              :class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
+              :class="{ 
+                'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile === 'blank_tile', 
+                'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile !== 'blank_tile' 
+              }"
             />
             <img
-              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
+              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid transition-all ease duration-300"
               v-for="(tile, index) in zoneEditorStore.tileList"
               :key="index"
               :src="`${config.server_endpoint}/assets/tiles/${tile}.png`"
               alt="Tile"
               @click="zoneEditorStore.setSelectedTile(tile)"
-              :class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
+              :class="{ 
+                'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile === tile, 
+                'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile !== tile 
+              }"
             />
           </div>
         </div>