asset mngr stuff

src/components/utilities/assetManager/AssetManager.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="assets-container">
     <div class="asset-categories">
-
       <!-- Asset Categories -->
-      <a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => selectedCategory = 'tiles'">
+      <a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span class="category-name">Tiles</span>
       </a>
-      <a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => selectedCategory = 'objects'">
+      <a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
         <span class="category-name">Objects</span>
       </a>
       <a class="category">
-        <span class="category-name">Weapons</span>
+        <span class="category-name">Loot</span>
       </a>
       <a class="category">
         <span class="category-name">NPC's</span>
@@ -20,7 +19,8 @@
 
     <!-- Assets list -->
     <div class="assets" ref="elementToScroll" @scroll="onScroll">
-      <TileList :name="selectedCategory" />
+      <TileList v-if="selectedCategory === 'tiles'" />
+      <ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
     </div>
 
     <button class="back-to-top" v-show="hasScrolled" @click="toTop">
@@ -30,22 +30,25 @@
 
     <!-- Asset details -->
     <div class="asset-info">
-      <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles'" />
+      <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import {useSocketStore} from '@/stores/socket'
+import { useSocketStore } from '@/stores/socket'
 import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
 import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
+import ObjectList from '@/components/utilities/assetManager/partials/ObjectList.vue'
+import { useAssetManagerStore } from '@/stores/assetManager'
 
 const socket = useSocketStore()
+const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
 const selectedTile = ref('')
 const hasScrolled = ref(false)
-const elementToScroll = ref() 
+const elementToScroll = ref()
 
 const onScroll = (e: Event) => {
   let scrollTop = (e.target as HTMLBodyElement).scrollTop
@@ -61,8 +64,8 @@ function toTop() {
   elementToScroll.value.scrollTo({
     top: 0,
     left: 0,
-    behavior: "smooth",
-  });
+    behavior: 'smooth'
+  })
 }
 </script>
 
@@ -72,7 +75,7 @@ function toTop() {
 .container {
   &.gm-panel {
     height: 100%;
-    margin: 0!important;
+    margin: 0 !important;
   }
 }
 .assets-container {
@@ -103,7 +106,7 @@ function toTop() {
     width: 50px;
     height: 50px;
     border-radius: 8px;
-    background-color: rgba($cyan, 0.5); 
+    background-color: rgba($cyan, 0.5);
     padding: 0;
     img {
       position: absolute;
@@ -119,14 +122,14 @@ function toTop() {
       background-color: rgba($cyan, 0.8);
     }
   }
-  
+
   .asset-categories {
     width: 15%;
     display: flex;
   }
 
   .assets {
-    overflow:auto;
+    overflow: auto;
     height: 100%;
     width: 35%;
     display: flex;
@@ -171,7 +174,6 @@ function toTop() {
 
   .asset-details {
     display: flex;
-    justify-content: center;
     align-items: center;
     gap: 10px;
     img {
@@ -185,11 +187,15 @@ function toTop() {
     }
   }
 
-  .asset-categories, .assets, .asset-info {
+  .asset-categories,
+  .assets,
+  .asset-info {
     flex-direction: column;
     position: relative;
 
-    .category, .asset, .image-container {
+    .category,
+    .asset,
+    .image-container {
       position: relative;
       padding: 10px;
       &::after {
@@ -204,9 +210,7 @@ function toTop() {
       &.selected {
         background-color: rgba($cyan, 0.8);
       }
-      
     }
   }
-  
 }
-</style>
+</style>

src/components/utilities/assetManager/partials/ObjectList.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="asset">
+    <input class="input-cyan search-field" placeholder="Search..." />
+  </div>
+
+  <!-- TODO: use the passed :name in props to switch out assets-->
+  <a class="asset" :class="{ active: name === 'tiles' }" 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>
+</template>
+
+<script setup lang="ts">
+import { useSocketStore } from '@/stores/socket'
+import config from '@/config'
+import { onMounted, ref, defineProps } from 'vue'
+
+const props = defineProps<{ name: string }>()
+
+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, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to upload tile')
+      return
+    }
+    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+      tiles.value = response
+    })
+  })
+}
+
+onMounted(() => {
+  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+    tiles.value = response
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/main';
+
+.asset {
+  &.add-new {
+    display: flex;
+    align-items: center;
+    gap: 10px 20px;
+    flex-wrap: wrap;
+    .asset-name {
+      flex-shrink: 0;
+    }
+  }
+  .search-field {
+    width: calc(100% - 20px);
+  }
+  .file-upload {
+    background-color: rgba($cyan, 0.5);
+    border: 1px solid $white;
+    border-radius: 5px;
+    text-shadow: 0 3px 6px rgba($black, 0.2);
+    padding: 6px 15px;
+    display: inline-flex;
+
+    &:hover {
+      background-color: $cyan;
+      cursor: pointer;
+    }
+    input[type='file'] {
+      display: none;
+    }
+  }
+}
+</style>

src/components/utilities/assetManager/partials/TileDetails.vue

@@ -1,28 +1,41 @@
 <template>
   <div class="image-container">
-    <img src="/assets/placeholders/wall-1.png" />
+    <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}`" alt="Tile" />
   </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" />
+        <input class="input-cyan" type="text" name="name" placeholder="E.g. grass" />
       </div>
 
       <div class="submit">
         <button class="btn-cyan" type="submit">Save</button>
-        <button class="btn-bordeaux" type="submit">Remove</button>
+        <button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
       </div>
     </form>
   </div>
 </template>
 
 <script setup lang="ts">
-const properties = defineProps({
-  tile: String
-});
+import config from '@/config'
+import { useAssetManagerStore } from '@/stores/assetManager'
+import { useSocketStore } from '@/stores/socket'
+
+const socket = useSocketStore()
+const assetManagerStore = useAssetManagerStore()
+
+function removeTile() {
+  socket.connection.emit('gm:tile:remove', { tile: assetManagerStore.selectedTile }, (response: boolean) => {
+    if (!response) {
+      return
+    }
+    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+      assetManagerStore.setTileList(response)
+      assetManagerStore.setSelectedTile('')
+    })
+  })
+}
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>

src/components/utilities/assetManager/partials/TileList.vue

@@ -1,34 +1,28 @@
 <template>
-  <div class="asset">
-    <input class="input-cyan search-field" placeholder="Search..." />
-  </div>
   <div class="asset add-new">
-    <span class="asset-name">Upload new</span>
     <label for="upload-asset" class="file-upload">
       <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
-      Choose file
+      Upload tile(s)
     </label>
+    <input class="input-cyan search-field" placeholder="Search..." />
   </div>
-
-  <!-- TODO: use the passed :name in props to switch out assets-->
-  <a class="asset" :class="{ active: name === 'tiles' }" v-for="(tile, index) in tiles" :key="index">
+  <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}`" />
+      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" alt="Tile" />
       <span class="asset-name">{{ tile }}</span>
     </div>
   </a>
 </template>
 
 <script setup lang="ts">
-import {useSocketStore} from '@/stores/socket'
 import config from '@/config'
-import { onMounted, ref, defineProps } from 'vue'
-
-const props = defineProps<{ name: string }>()
+import { useSocketStore } from '@/stores/socket'
+import { onMounted, ref } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManager'
 
 const socket = useSocketStore()
 const tileUploadField = ref(null)
-const tiles = ref()
+const assetManagerStore = useAssetManagerStore()
 
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
@@ -39,14 +33,14 @@ const handleFileUpload = (e: Event) => {
       return
     }
     socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-      tiles.value = response
+      assetManagerStore.setTileList(response)
     })
   })
 }
 
 onMounted(() => {
   socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response
+    assetManagerStore.setTileList(response)
   })
 })
 </script>
@@ -55,9 +49,10 @@ onMounted(() => {
 @import '@/assets/scss/main';
 
 .asset {
+  cursor: pointer;
+
   &.add-new {
     display: flex;
-    align-items: center;
     gap: 10px 20px;
     flex-wrap: wrap;
     .asset-name {
@@ -79,9 +74,9 @@ onMounted(() => {
       background-color: $cyan;
       cursor: pointer;
     }
-    input[type="file"] {
+    input[type='file'] {
       display: none;
     }
   }
 }
-</style>
+</style>