Worked on zone objects, tile tags and searching

src/components/utilities/assetManager/AssetManager.vue

@@ -31,16 +31,18 @@
     <!-- Asset details -->
     <div class="asset-info">
       <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
+      <ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 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 ObjectDetails from '@/components/utilities/assetManager/partials/ObjectDetails.vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 
 const socket = useSocketStore()

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="object-manager">
+    <div class="image-container">
+      <img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
+    </div>
+    <div class="modal-form asset-manager">
+      <form class="form-fields" @submit.prevent>
+        <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 name">
+          <label for="name">Origin X</label>
+          <!-- @TODO only allow numbers here -->
+          <input class="input-cyan" type="text" name="name" placeholder="Origin X" />
+        </div>
+        <div class="form-field name">
+          <label for="name">Origin Y</label>
+          <!-- @TODO only allow numbers here -->
+          <input class="input-cyan" type="text" name="name" placeholder="Origin Y" />
+        </div>
+        <div class="submit">
+          <button class="btn-cyan" type="button" @click="removeObject">Save</button>
+          <button class="btn-bordeaux" type="button" @click="removeObject">Remove</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManager'
+import { useSocketStore } from '@/stores/socket'
+import config from '@/config'
+
+const socket = useSocketStore()
+const assetManagerStore = useAssetManagerStore()
+const selectedObject = computed(() => assetManagerStore.selectedObject)
+const objectImageUrl = computed(() => `${config.server_endpoint}/assets/objects/${selectedObject.value}.png`)
+const objectDetails = computed(() => assetManagerStore.objectDetails)
+
+function removeObject() {
+  socket.connection.emit('gm:object:remove', { object: selectedObject.value }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove object')
+      return
+    }
+    refreshObjectList()
+  })
+}
+
+function refreshObjectList() {
+  socket.connection.emit('gm:object:list', {}, (response: string[]) => {
+    assetManagerStore.setObjectList(response)
+    assetManagerStore.setSelectedObject('')
+  })
+}
+
+onMounted(() => {
+  if (!selectedObject.value) {
+    return
+  }
+  socket.connection.emit('gm:object:details', { object: selectedObject.value }, (response: any) => {
+    assetManagerStore.setObjectDetails(response)
+  })
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedObject('')
+})
+</script>
+
+<style lang="scss">
+/**
+  * @TODO when scrolling here, the vertical line is cut off
+ */
+.modal-form {
+  padding: 10px; // @TODO why dis no work?  fixme
+}
+</style>

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

@@ -1,45 +1,47 @@
 <template>
-  <div class="asset">
+  <div class="asset add-new">
+    <label for="upload-asset" class="file-upload">
+      <input id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+      Upload object(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.selectedObject === object }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object)">
     <div class="asset-details">
-      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
-      <span class="asset-name">{{ tile }}</span>
+      <img :src="`${config.server_endpoint}/assets/objects/${object}.png`" alt="Object" />
+      <span class="asset-name">{{ object }}</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 objectUploadField = ref(null)
+const assetManagerStore = useAssetManagerStore()
 
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
+  socket.connection.emit('gm:object:upload', files, (response: boolean) => {
     if (!response) {
-      console.error('Failed to upload tile')
+      if (config.development) console.error('Failed to upload object')
       return
     }
-    socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-      tiles.value = response
+    socket.connection.emit('gm:object:list', {}, (response: string[]) => {
+      assetManagerStore.setObjectList(response)
     })
   })
 }
 
 onMounted(() => {
-  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response
+  socket.connection.emit('gm:object:list', {}, (response: string[]) => {
+    if (config.development) console.log(response)
+    assetManagerStore.setObjectList(response)
   })
 })
 </script>
@@ -48,9 +50,10 @@ onMounted(() => {
 @import '@/assets/scss/main';
 
 .asset {
+  cursor: pointer;
+
   &.add-new {
     display: flex;
-    align-items: center;
     gap: 10px 20px;
     flex-wrap: wrap;
     .asset-name {

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

@@ -1,45 +1,94 @@
 <template>
-  <div class="image-container">
-    <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}.png`" alt="Tile" />
-  </div>
-  <div class="modal-form asset-manager">
-    <form class="form-fields" @submit.prevent>
-      <div class="form-field name">
-        <label for="name">Name</label>
-        <input class="input-cyan" type="text" name="name" placeholder="E.g. grass" />
-      </div>
-      <div class="form-field tags">
-        <label for="tags">Tags</label>
-        <ChipsInput />
-      </div>
-      <div class="submit">
-        <button class="btn-cyan" type="submit">Save</button>
-        <button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
-      </div>
-    </form>
+  <div class="tile-manager">
+    <div class="image-container">
+      <img :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
+    </div>
+    <div class="modal-form asset-manager">
+      <form class="form-fields" @submit.prevent>
+        <div class="form-field tags">
+          <label for="tags">Tags</label>
+          <ChipsInput v-model="tags" @update:modelValue="handleTagsUpdate" />
+        </div>
+        <div class="submit">
+          <button class="btn-bordeaux" type="button" @click="removeTile">Remove</button>
+        </div>
+      </form>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import config from '@/config'
+import { ref, computed, watch, onBeforeUnmount, onMounted } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useSocketStore } from '@/stores/socket'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
+import config from '@/config'
 
 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('')
-    })
+const tags = ref<string[]>([])
+
+const selectedTile = computed(() => assetManagerStore.selectedTile)
+
+const tileImageUrl = computed(() => `${config.server_endpoint}/assets/tiles/${selectedTile.value}.png`)
+
+watch(selectedTile, fetchTileTags)
+
+function fetchTileTags(tile: string) {
+  if (config.development) console.log('P241 selectedTile', tile)
+  socket.connection.emit('gm:tile:tags', { tile }, (response: string[]) => {
+    tags.value = response
   })
 }
+
+function handleTagsUpdate(newTags: string[]) {
+  if (config.development) console.log(newTags)
+  saveTags(newTags)
+}
+
+function saveTags(tagsToSave: string[]) {
+  socket.connection.emit(
+    'gm:tile:tags:update',
+    {
+      tile: selectedTile.value,
+      tags: tagsToSave
+    },
+    (response: boolean) => {
+      if (!response) console.error('Failed to save tags')
+    }
+  )
+}
+
+function removeTile() {
+  socket.connection.emit('gm:tile:remove', { tile: selectedTile.value }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove tile')
+      return
+    }
+    refreshTileList()
+  })
+}
+
+function refreshTileList() {
+  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+    assetManagerStore.setTileList(response)
+    assetManagerStore.setSelectedTile('')
+  })
+}
+
+onMounted(() => {
+  if (!selectedTile.value) return
+  fetchTileTags(selectedTile.value)
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedTile('')
+})
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.modal-form {
+  padding: 10px; // @TODO why dis no work?  fixme
+}
+</style>

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

@@ -29,7 +29,7 @@ const handleFileUpload = (e: Event) => {
   if (!files) return
   socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
     if (!response) {
-      console.error('Failed to upload tile')
+      if (config.development) console.error('Failed to upload tile')
       return
     }
     socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
@@ -40,6 +40,7 @@ const handleFileUpload = (e: Event) => {
 
 onMounted(() => {
   socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+    if (config.development) console.log(response)
     assetManagerStore.setTileList(response)
   })
 })