From dedae28456e120ac2bd547438be15a4474d71917 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 4 Jul 2024 21:57:07 +0200
Subject: [PATCH] There is no god

---
 src/components/forms/ChipsInput.vue           |  10 +-
 src/components/utilities/GmPanel.vue          |   2 +-
 .../utilities/assetManager/AssetManager.vue   | 175 +++---------------
 .../assetManager/partials/ObjectDetails.vue   |  25 +--
 .../assetManager/partials/ObjectList.vue      |  10 +-
 .../assetManager/partials/TileDetails.vue     |  17 +-
 .../assetManager/partials/TileList.vue        |  11 +-
 tailwind.config.js                            |   4 +
 8 files changed, 70 insertions(+), 184 deletions(-)

diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index cf50419..2ac6b78 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -4,7 +4,7 @@
       <span>{{ chip }}</span>
       <i class="delete-icon" @click="deleteChip(i)">X</i>
     </div>
-    <input v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
+    <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
   </div>
 </template>
 
@@ -62,13 +62,5 @@ const backspaceDelete = (event) => {
       }
     }
   }
-
-  input {
-    border: none;
-    outline: none;
-    padding: 4px;
-    margin: 4px;
-    color: white;
-  }
 }
 </style>
diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue
index bd1e4fe..841692a 100644
--- a/src/components/utilities/GmPanel.vue
+++ b/src/components/utilities/GmPanel.vue
@@ -10,7 +10,7 @@
       </div>
     </template>
     <template #modalBody>
-      <div class="container gm-panel">
+      <div class="container gm-panel h-full margin-0">
         <AssetManager v-if="toggle == 'asset-manager'" />
       </div>
     </template>
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 70a57d8..0748171 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -1,35 +1,39 @@
 <template>
-  <div class="assets-container">
-    <div class="asset-categories">
+  <div class="flex h-full w-full relative">
+    <div class="w-[15%] flex flex-col relative">
       <!-- Asset Categories -->
-      <a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+      <a class="category relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span class="category-name">Tiles</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+      <a class="category relative p-2.5  hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
         <span class="category-name">Objects</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="category">
+      <a class="category relative p-2.5 hover:cursor-pointer">
         <span class="category-name">Loot</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="category">
+      <a class="category relative p-2.5 hover:cursor-pointer">
         <span class="category-name">NPC's</span>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
     </div>
-    <div class="divider categories"></div>
+    <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
 
     <!-- Assets list -->
-    <div class="assets" ref="elementToScroll" @scroll="onScroll">
+    <div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
       <TileList v-if="selectedCategory === 'tiles'" />
       <ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
     </div>
 
-    <button class="back-to-top" v-show="hasScrolled" @click="toTop">
-      <img src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    <button class="back-to-top absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
-    <div class="divider assets-list"></div>
+    <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
 
     <!-- Asset details -->
-    <div class="asset-info">
+    <div class="flex w-1/2 after:hidden flex-col relative">
       <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
       <ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
     </div>
@@ -72,144 +76,23 @@ function toTop() {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/main';
 
-.container {
-  &.gm-panel {
-    height: 100%;
-    margin: 0 !important;
+button.back-to-top {
+  // @TODO: find Tailwind alternative as calc() doesnt work
+  left: calc(50% - 60px);
+}
+.modal-form {
+  &.asset-manager {
+    // @TODO: find Tailwind alternative as calc() doesnt work
+    width: calc(100% - 40px);
   }
 }
-.assets-container {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  position: relative;
 
-  .divider {
-    position: absolute;
-    width: 1px;
-    background-color: $dark-cyan;
-    height: 100%;
-    top: 0;
-    &.categories {
-      left: 15%; //width % of .asset-categories
-    }
-    &.assets-list {
-      left: 50%; //width % of .asset-categories + .assets
-    }
-  }
-
-  button.back-to-top {
-    position: absolute;
-    left: calc(50% - 60px);
-    bottom: 10px;
-    min-width: unset;
-    width: 50px;
-    height: 50px;
-    border-radius: 8px;
-    background-color: rgba($cyan, 0.5);
-    padding: 0;
-    img {
-      position: absolute;
-      filter: invert(100%);
-      width: 30px;
-      height: 30px;
-      left: 50%;
-      top: 50%;
-      transform: translateX(-50%) translateY(-50%) rotateX(180deg);
-    }
-
-    &:hover {
-      background-color: rgba($cyan, 0.8);
-    }
-  }
-
-  .asset-categories {
-    width: 15%;
-    display: flex;
-  }
-
-  .assets {
-    overflow: auto;
-    height: 100%;
-    width: 35%;
-    display: flex;
-  }
-  .asset-info {
-    display: flex;
-    width: 50%;
-    &::after {
-      display: none;
-    }
-    .image-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 300px;
-      img {
-        max-height: 280px;
-      }
-    }
-    .modal-form {
-      &.asset-manager {
-        margin: 10px;
-        padding: 10px;
-        width: calc(100% - 40px);
-        display: block;
-
-        .form-fields {
-          display: flex;
-          gap: 10px;
-          flex-wrap: wrap;
-          
-          .submit {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  .asset-details {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    img {
-      height: 28px;
-    }
-  }
-
-  .category {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .asset-categories,
-  .assets,
-  .asset-info {
-    flex-direction: column;
-    position: relative;
-
-    .category,
-    .asset,
-    .image-container {
-      position: relative;
-      padding: 10px;
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: 1px;
-        background-color: $dark-cyan;
-      }
-      &.selected {
-        background-color: rgba($cyan, 0.8);
-      }
-    }
+.category,
+.asset,
+.image-container {
+  &.selected {
+    @apply bg-cyan bg-opacity-80;
   }
 }
 </style>
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 9d00749..770282c 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -1,25 +1,26 @@
 <template>
   <div class="object-manager">
-    <div class="image-container">
-      <img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
+    <div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
+      <img class="max-h-[280px]" :src="objectImageUrl" :alt="'Object ' + selectedObject" />
+      <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
     </div>
-    <div class="modal-form asset-manager">
-      <form class="form-fields" @submit.prevent>
-        <div class="form-field col-12">
-          <label for="name">Name</label>
+    <div class="modal-form asset-manager m-2.5 p-2.5 block">
+      <form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
+        <div class="form-field w-full flex flex-col mb-[20px]">
+          <label class="mb-1.5 font-titles" for="name">Name</label>
           <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
         </div>
-        <div class="form-field">
-          <label for="origin-x">Origin X</label>
+        <div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
+          <label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
           <input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
         </div>
-        <div class="form-field">
-          <label for="origin-y">Origin Y</label>
+        <div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
+          <label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
           <input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
         </div>
         <div class="submit">
-          <button class="btn-cyan" type="button" @click="removeObject">Save</button>
-          <button class="btn-bordeaux" type="button" @click="removeObject">Remove</button>
+          <button class="btn-cyan px-[15px] py-1.5" type="button" @click="removeObject">Save</button>
+          <button class="btn-bordeaux ml-2.5 px-[15px] py-1.5" type="button" @click="removeObject">Remove</button>
         </div>
       </form>
     </div>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index c0594e7..f243a3b 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="asset add-new">
+  <div class="asset add-new relative p-2.5">
     <label for="upload-asset" class="file-upload">
       <input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload object(s)
     </label>
     <input class="input-cyan search-field" placeholder="Search..." />
+    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <a class="asset" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
-    <div class="asset-details">
+  <a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
+    <div class="asset-details flex items-center gap-2.5">
       <!--      @TODO make all img have same width so text aligns nicely -->
-      <img :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
+      <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
       <span class="asset-name">{{ object.name }}</span>
     </div>
+    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </a>
 </template>
 
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 86e2fe6..9572fe4 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="tile-manager">
-    <div class="image-container">
-      <img :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
+    <div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
+      <img class="max-h-[280px]" :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
+      <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
     </div>
-    <div class="modal-form asset-manager">
-      <form class="form-fields" @submit.prevent>
-        <div class="form-field tags">
-          <label for="tags">Tags</label>
+    <div class="modal-form asset-manager m-2.5 p-2.5 block">
+      <form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
+        <div class="form-field tags flex flex-col mb-[20px]">
+          <label class="mb-1.5 font-titles" for="tags">Tags</label>
           <ChipsInput v-model="tags" @update:modelValue="handleTagsUpdate" />
         </div>
-        <div class="submit">
-          <button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
+        <div class="submit w-full">
+          <button class="btn-bordeaux px-[15px] py-1.5" type="button" @click="removeTile">Remove</button>
         </div>
       </form>
     </div>
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 96c927e..5de8548 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="asset add-new">
+  <div class="asset add-new relative p-2.5">
     <label for="upload-asset" class="file-upload">
       <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload tile(s)
     </label>
     <input class="input-cyan search-field" placeholder="Search..." />
+    <div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
   </div>
-  <a class="asset" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
-    <div class="asset-details">
-      <img :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
+  <a class="asset relative p-2.5" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+    <div class="asset-details 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" />
       <span class="asset-name">{{ tile }}</span>
     </div>
+    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </a>
 </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index e407a67..a756f14 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,10 @@ export default {
   content: [],
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
+    fontFamily: {
+      'titles': ['Poppins', 'serif'],
+      'default': ['Inter', 'serif']
+    },
     extend: {
       colors: {
         red: {