From ff2f890cb69ff5f825f545857fc6bf518d4280b3 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 7 Jul 2024 01:12:23 +0200
Subject: [PATCH] Converted more Tailwind

---
 src/components/gui/Menu.vue                   | 56 +++++++------------
 .../utilities/assetManager/AssetManager.vue   | 14 +----
 .../assetManager/partials/ObjectList.vue      |  2 +-
 .../assetManager/partials/TileList.vue        |  2 +-
 src/components/utilities/zoneEditor/Tiles.vue | 10 +---
 .../utilities/zoneEditor/Toolbar.vue          | 36 +++---------
 6 files changed, 34 insertions(+), 86 deletions(-)

diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index 0549aa9..81d8a3a 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -1,56 +1,40 @@
 <template>
   <ul class="list-none flex gap-2.5 items-center">
-    <li class="menu-item relative">
-      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
+    <li class="menu-item group relative">
+      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>
-        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
-        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
+      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
       </a>
     </li>
-    <li class="menu-item relative">
-      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
+    <li class="menu-item group relative">
+      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p>
-        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
-        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
+      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
       </a>
     </li>
-    <li class="menu-item relative">
-      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
+    <li class="menu-item group relative">
+      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p>
-        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
-        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
+      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
       </a>
     </li>
-    <li class="menu-item relative">
-      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
+    <li class="menu-item group relative">
+      <div class="group-hover:block absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p>
-        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
+        <div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
       </div>
-      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
-        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
+      <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+        <img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
       </a>
     </li>
   </ul>
 </template>
-
-<style scoped lang="scss">
-.menu-item:hover {
-  div {
-    @apply block;
-  }
-
-  a {
-    @apply bg-gray bg-opacity-70 cursor-pointer;
-
-    img {
-      @apply drop-shadow-default;
-    }
-  }
-}
-</style>
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index ecbae3f..00964c7 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -2,11 +2,11 @@
   <div class="flex h-full w-full relative">
     <div class="w-[15%] flex flex-col relative">
       <!-- Asset Categories -->
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span>Tiles</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
         <span>Objects</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
@@ -77,13 +77,3 @@ function toTop() {
   })
 }
 </script>
-
-<style lang="scss">
-.category,
-.asset,
-.image-container {
-  &.selected {
-    @apply bg-cyan bg-opacity-80;
-  }
-}
-</style>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index 12ffab4..28d7b3f 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -7,7 +7,7 @@
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <a class="relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
+  <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
     <div class="flex items-center gap-2.5">
       <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
         <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 7b8fa19..f591ea4 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -7,7 +7,7 @@
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
   </div>
-  <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+  <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
     <div class="flex items-center gap-2.5">
       <!--      TODO make all img have same width so text aligns nicely -->
       <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index bdbc79e..4ac6698 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -20,7 +20,7 @@
               src="/assets/zone/blank_tile.png"
               alt="Blank tile"
               @click="zoneEditorStore.setSelectedTile('blank_tile')"
-              :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
+              :class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
             />
             <img
               class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
@@ -29,7 +29,7 @@
               :src="`${config.server_endpoint}/assets/tiles/${tile}.png`"
               alt="Tile"
               @click="zoneEditorStore.setSelectedTile(tile)"
-              :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
+              :class="{ 'border-2 border-solid border-red': zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
             />
           </div>
         </div>
@@ -56,9 +56,3 @@ onMounted(async () => {
   })
 })
 </script>
-
-<style lang="scss">
-img.selected {
-  @apply border-2 border-solid border-red;
-}
-</style>
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index a2c5dbb..1405081 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -2,18 +2,18 @@
   <div class="flex justify-center m-2.5">
     <div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
       <div class="tools flex gap-2.5">
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
         </button>
 
         <div class="w-[1px] bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
           <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
-            <div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
+            <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
               {{ zoneEditorStore.drawMode }}
-              <img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
+              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
             <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
               <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
@@ -35,12 +35,12 @@
 
         <div class="w-[1px] bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
           <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
-            <div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
+            <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
               {{ zoneEditorStore.drawMode }}
-              <img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
+              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
             <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
               <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
@@ -62,7 +62,7 @@
 
         <div class="w-[1px] bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
         </button>
 
@@ -152,23 +152,3 @@ function clear() {
   zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
 }
 </script>
-
-<style scoped lang="scss">
-.toolbar {
-  .tools {
-    .active {
-      @apply border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5;
-
-      .select {
-        .select-trigger {
-          &.open {
-            img {
-              @apply rotate-180;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>