From de5b29fb1a45bbe46dc091baa93c06fc11d19c7f Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Mon, 17 Jun 2024 23:42:49 +0200
Subject: [PATCH] Styled assetmanager modal

---
 public/assets/placeholders/wall-1.png         | Bin 0 -> 3809 bytes
 .../utilities/AssetManager/AssetManager.vue   | 159 +++++++++++++++++-
 2 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/placeholders/wall-1.png

diff --git a/public/assets/placeholders/wall-1.png b/public/assets/placeholders/wall-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b4f525847768e12f3086e7008bb9e5d58aaf522
GIT binary patch
literal 3809
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
X^r9e(Pqo0a00000NkvXXu0mjfjbTa6

literal 0
HcmV?d00001

diff --git a/src/components/utilities/AssetManager/AssetManager.vue b/src/components/utilities/AssetManager/AssetManager.vue
index 5e35f87..06a1c0b 100644
--- a/src/components/utilities/AssetManager/AssetManager.vue
+++ b/src/components/utilities/AssetManager/AssetManager.vue
@@ -1,10 +1,72 @@
 <template>
-  <Modal :isModalOpen="true" :modal-width="800" :modal-height="560">
+  <Modal :isModalOpen="true" :modal-width="800" :modal-height="630">
     <template #modalHeader>
       <h3 class="modal-title">Asset manager</h3>
     </template>
     <template #modalBody>
+      <div class="assets-container">
+        <div class="asset-categories">
+          <!-- TODO: Asset categories, replace with loop -->
+          <a class="category">
+            <span class="category-name">Tiles</span>
+          </a>
+          <!-- Example selected category -->
+          <a class="category selected">
+            <span class="category-name">Walls</span>
+          </a>
+          <a class="category">
+            <span class="category-name">Weapons</span>
+          </a>
+          <a class="category">
+            <span class="category-name">NPC's</span>
+          </a>
+        </div>
 
+        <!-- TODO: Show content based on selected category, replace with loop -->
+        <div class="assets tiles">
+          
+        </div>
+        <!-- Example selected category & asset -->
+        <div class="assets walls active">
+          <a class="asset selected">
+            <span class="asset-name">Wall #1</span>
+          </a>
+        </div>
+        <div class="assets weapons">
+          
+        </div>
+        <div class="assets npcs">
+
+        </div>
+
+        <div class="asset-info">
+          <div class="image-container">
+            <img src="/assets/placeholders/wall-1.png"/>
+          </div>
+          <div class="modal-form asset-manager">
+            <form class="form-fields">
+              <div class="form-field name">
+                <label for="name">Name</label>
+                <input class="input-cyan" type="text" name="name" placeholder="Wall #1">
+              </div>
+
+              <div class="form-field">
+                <label for="originX">OriginX</label>
+                <input class="input-cyan" type="number" name="originX" placeholder="0">
+              </div>
+
+              <div class="form-field">
+                <label for="originY">OriginY</label>
+                <input class="input-cyan" type="number" name="originY" placeholder="0">
+              </div>
+
+              <div class="submit">
+                <button class="btn-cyan" type="submit">SAVE</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
     </template>
   </Modal>
 </template>
@@ -14,5 +76,100 @@ import Modal from '@/components/utilities/Modal.vue'
 </script>
 
 <style lang="scss">
+@import '@/assets/scss/main';
 
+.assets-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  
+  .asset-categories {
+    width: calc(15% - 15px);
+    padding-right: 15px;
+    display: flex;
+  }
+
+  .assets {
+    width: calc(25% - 30px);
+    padding: 0 15px;
+    display: none;
+    &.active {
+      display: flex;
+    }
+  }
+  .asset-info {
+    display: flex;
+    width: calc(60% - 15px);
+    padding-left: 15px;
+    &::after {
+      display: none;
+    }
+    .image-container {
+      text-align: center;
+      img {
+        height: 200px;
+        padding-right: 15px;
+        margin: 30px 0;
+      }
+    }
+    .modal-form {
+      &.asset-manager {
+        .form-fields {
+          display: flex;
+          gap: 15px;
+          flex-wrap: wrap;
+
+          .form-field {
+            width: calc(50% - 15px);
+            &.name {
+              width: calc(100% - 15px);
+            }
+          }
+          .submit {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .asset-categories, .assets, .asset-info {
+    gap: 30px;
+    flex-direction: column;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      width: 1px;
+      height: calc(100% + 30px);
+      top: -15px;
+      background-color: $dark-cyan;
+    }
+    .category, .asset, .image-container {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        left: -15px;
+        bottom: -15px;
+        width: calc(100% + 30px);
+        height: 1px;
+        background-color: $dark-cyan;
+      }
+      &.selected {
+        &::before {
+          content: '';
+          position: absolute;
+          width: calc(100% + 30px);
+          height: calc(100% + 30px);
+          left: -15px;
+          top: -15px;
+          background-color: rgba($cyan, 0.8);
+          z-index: -1;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file