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/assets/scss/_variables.scss

@@ -12,6 +12,9 @@ $blue-gray: #778899;
 $cyan: #368f8b;
 $dark-cyan: #376362;
 $light-cyan: #00b3b3;
+$bordeaux: #800020;
+$dark-bordeaux: #4c0000;
+$light-bordeaux: #cc0033;
 $green: #09ad19;
 
 // Fonts

src/assets/scss/main.scss

@@ -79,11 +79,22 @@ button {
     border-radius: 5px;
     text-shadow: 0 3px 6px rgba($black, 0.2);
 
-    &:hover {
+    &.active, &:hover {
       background-color: $cyan;
     }
   }
 
+  &.btn-bordeaux {
+    background-color: rgba($bordeaux, 0.5);
+    border: 1px solid $white;
+    border-radius: 5px;
+    text-shadow: 0 3px 6px rgba($black, 0.2);
+
+    &.active, &:hover {
+      background-color: $bordeaux;
+    }
+  }
+
   &:hover {
     cursor: pointer;
   }

src/components/utilities/GmPanel.vue

@@ -1,11 +1,14 @@
 <template>
-    <Modal :isModalOpen="true" :modal-width="800" :modal-height="650">
+    <Modal :isModalOpen="true" :modal-width="1000" :modal-height="650">
         <template #modalHeader>
             <h3 class="modal-title">GM Panel</h3>
             <div class="gm-selector">
-                <button class="btn-cyan" @click="toggle = 'asset-manager'">Asset Manager</button>
-                <button class="btn-cyan" >Button 2</button>
-                <button class="btn-cyan" >Button 3</button>
+                <button class="btn-cyan">General</button>
+                <button class="btn-cyan">Users</button>
+                <button class="btn-cyan">Items</button>
+                <button class="btn-cyan">NPCs</button>
+                <button class="btn-cyan">Chats</button>
+                <button class="btn-cyan active">AM</button>
             </div>
         </template>
         <template #modalBody>
@@ -19,24 +22,20 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
-import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
+import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
 
 let toggle = ref('asset-manager');
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '@/assets/scss/main';
 
 .gm-selector {
     display: flex;
     gap: 5px;
-    align-self: end;
 
     button {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom: none;
         padding: 6px 15px;
         min-width: 100px;
     }

src/components/utilities/assetManager/AssetManager.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="assets-container">
     <div class="asset-categories">
-      <!-- TODO: Asset categories, replace with loop -->
-      <a class="category">
+
+      <!-- Asset Categories -->
+      <a class="category selected">
         <span class="category-name">Tiles</span>
       </a>
-      <!-- Example selected category -->
-      <a class="category selected">
-        <span class="category-name">Walls</span>
+      <a class="category">
+        <span class="category-name">Objects</span>
       </a>
       <a class="category">
         <span class="category-name">Weapons</span>
@@ -17,46 +17,42 @@
       </a>
     </div>
 
-    <!-- TODO: Show content based on selected category, replace with loop -->
-    <div class="assets tiles">
-      
+    <!-- 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>
-    <!-- Example selected category & asset -->
-    <div class="assets walls active">
+    <div class="assets">
       <a class="asset selected">
         <span class="asset-name">Wall #1</span>
       </a>
     </div>
-    <div class="assets weapons">
+    <div class="assets">
       
     </div>
-    <div class="assets npcs">
+    <div class="assets">
 
     </div>
 
     <div class="asset-info">
       <div class="image-container">
-        <img src="/assets/placeholders/wall-1.png"/>
+        <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">
+            <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-cyan" type="submit">Save</button>
+            <button class="btn-bordeaux" type="submit">Remove</button>
           </div>
         </form>
       </div>
@@ -65,6 +61,24 @@
 </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">
@@ -87,7 +101,7 @@
   }
 
   .assets {
-    width: 25%;
+    width: 35%;
     display: none;
     &.active {
       display: flex;

src/components/utilities/zoneEditor/Tiles.vue

@@ -21,6 +21,7 @@ import { ref, onMounted, nextTick } from 'vue'
 import config from '@/config'
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import JSZip from 'jszip'
 
 const tileWidth = config.tile_size.x
 const tileHeight = config.tile_size.y