Optimization, small tailwind tweaks

src/components/utilities/zoneEditor/Objects.vue

@@ -5,10 +5,10 @@
         <h3 class="text-lg">Objects</h3>
         <div class="flex">
           <div class="w-full flex gap-1.5 flex-row">
-           <div>
-             <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-             <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
-           </div>
+            <div>
+              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
+            </div>
             <div>
               <label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
               <input @mousedown.stop class="input-cyan" type="number" name="z-index" placeholder="Z-index" />
@@ -56,4 +56,4 @@ onMounted(async () => {
     zoneEditorStore.setObjectList(response)
   })
 })
-</script>
+</script>

src/components/utilities/zoneEditor/Tiles.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true"  :modal-width="645" :modal-height="260">
+    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
       <template #modalHeader>
         <h3 class="m-0 font-medium shrink-0">Tiles</h3>
         <div class="flex">
@@ -15,8 +15,22 @@
       <template #modalBody>
         <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" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
-            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition 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="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
+            <img
+              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
+              src="/assets/zone/blank_tile.png"
+              alt="Blank tile"
+              @click="zoneEditorStore.setSelectedTile('blank_tile')"
+              :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
+            />
+            <img
+              class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition 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="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
+            />
           </div>
         </div>
       </template>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -133,7 +133,7 @@ watch(objectList, (newObjects) => {
       object: newObject
     }
   })
-});
+})
 
 onBeforeMount(() => {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -53,4 +53,4 @@ watch(width, (value) => {
 watch(height, (value) => {
   zoneEditorStore.setHeight(parseInt(value))
 })
-</script>
+</script>