From 9bbaeb856d8f2356fd8313cc2f69c851996c06ed Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 23 Jun 2024 01:53:11 +0200
Subject: [PATCH] Code improvements

---
 public/assets/zone/tile_2.png                 | Bin 0 -> 3056 bytes
 .../utilities/assetManager/AssetManager.vue   |  46 +++++++++++++++---
 2 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 public/assets/zone/tile_2.png

diff --git a/public/assets/zone/tile_2.png b/public/assets/zone/tile_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a41fa145e7a251485981620d225606fb5075d41
GIT binary patch
literal 3056
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

literal 0
HcmV?d00001

diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 022daff..a068df8 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -19,12 +19,25 @@
 
     <!-- Assets -->
     <div class="assets active">
-      <a class="asset">
+      <div class="asset">
+        <!-- @TODO: can this pls be less html, make input 100% and fix the spacing below -->
+        <div class="modal-form">
+          <div class="form-fields">
+            <div class="form-field">
+              <input class="input-cyan" placeholder="Search..." />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="asset">
         <span class="asset-name">Upload new</span>
         <input ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
-      </a>
-      <a class="asset">
-        <span class="asset-name" v-for="(tile, index) in tiles" :key="index">{{ tile }}</span>
+      </div>
+      <a class="asset" v-for="(tile, index) in tiles" :key="index">
+        <div class="asset-details">
+          <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
+          <span class="asset-name">{{ tile }}</span>
+        </div>
       </a>
     </div>
     <div class="assets">
@@ -63,6 +76,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import {useSocketStore} from '@/stores/socket'
+import config from '@/config'
 
 const socket = useSocketStore()
 const tileUploadField = ref(null)
@@ -71,7 +85,15 @@ const tiles = ref()
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  socket.connection.emit('gm:tile:upload', files)
+  socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to upload tile')
+      return
+    }
+    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+      tiles.value = response
+    })
+  })
 }
 
 onMounted(() => {
@@ -81,7 +103,7 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scroped>
 @import '@/assets/scss/main';
 
 .container {
@@ -101,6 +123,7 @@ onMounted(() => {
   }
 
   .assets {
+    overflow:auto;
     width: 35%;
     display: none;
     &.active {
@@ -145,6 +168,16 @@ onMounted(() => {
     }
   }
 
+  .asset-details {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    img {
+      height: 28px;
+    }
+  }
+
   .asset-categories, .assets, .asset-info {
     flex-direction: column;
     position: relative;
@@ -158,6 +191,7 @@ onMounted(() => {
       background-color: $dark-cyan;
     }
     .category, .asset, .image-container {
+
       position: relative;
       padding: 10px;
       &::after {