Added logic that allows socket events to exist in sub directories, moved said events for better DX, added logics for tile management (upload & read), started working on (zone) object logics too

src/components/utilities/assetManager/AssetManager.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="assets-container">
+    <div class="asset-categories">
+
+      <!-- Asset Categories -->
+      <a class="category selected">
+        <span class="category-name">Tiles</span>
+      </a>
+      <a class="category">
+        <span class="category-name">Objects</span>
+      </a>
+      <a class="category">
+        <span class="category-name">Weapons</span>
+      </a>
+      <a class="category">
+        <span class="category-name">NPC's</span>
+      </a>
+    </div>
+
+    <!-- Assets -->
+    <div class="assets active">
+      <a 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>
+      </a>
+    </div>
+    <div class="assets">
+      <a class="asset selected">
+        <span class="asset-name">Wall #1</span>
+      </a>
+    </div>
+    <div class="assets">
+      
+    </div>
+    <div class="assets">
+
+    </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="submit">
+            <button class="btn-cyan" type="submit">Save</button>
+            <button class="btn-bordeaux" type="submit">Remove</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import {useSocketStore} from '@/stores/socket'
+
+const socket = useSocketStore()
+const tileUploadField = ref(null)
+const tiles = ref()
+
+const handleFileUpload = (e: Event) => {
+  const files = (e.target as HTMLInputElement).files
+  if (!files) return
+  socket.connection.emit('gm:tile:upload', files)
+}
+
+onMounted(() => {
+  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+    tiles.value = response
+  })
+})
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/main';
+
+.container {
+  &.gm-panel {
+    height: calc(100% - 20px);
+    margin: 0!important;
+  }
+}
+.assets-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  
+  .asset-categories {
+    width: 15%;
+    display: flex;
+  }
+
+  .assets {
+    width: 35%;
+    display: none;
+    &.active {
+      display: flex;
+    }
+  }
+  .asset-info {
+    display: flex;
+    width: 60%;
+    &::after {
+      display: none;
+    }
+    .image-container {
+      text-align: center;
+      img {
+        height: 200px;
+        padding-right: 10px;
+        margin: 20px 0;
+      }
+    }
+    .modal-form {
+      &.asset-manager {
+        margin: 10px;
+        width: calc(100% - 20px);
+        height: 100%;
+        .form-fields {
+          display: flex;
+          gap: 10px;
+          flex-wrap: wrap;
+
+          .form-field {
+            width: calc(50% - 5px);
+            &.name {
+              width: 100%;
+            }
+          }
+          .submit {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .asset-categories, .assets, .asset-info {
+    flex-direction: column;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      width: 1px;
+      height: calc(100% + 20px);
+      top: 0;
+      background-color: $dark-cyan;
+    }
+    .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);
+      }
+    }
+  }
+  
+}
+</style>