Small styling fixes, added better filter options in zone editor, added tags to objects, npm update

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

@@ -20,6 +20,10 @@
           <label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
           <input v-model="objectOriginY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
         </div>
+        <div class="w-full flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
+          <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
+        </div>
         <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
       </form>
     </div>
@@ -28,11 +32,12 @@
 
 <script setup lang="ts">
 import type { Object } from '@/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGameStore } from '@/stores/game'
 import config from '@/config'
+import ChipsInput from '@/components/forms/ChipsInput.vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@@ -41,6 +46,7 @@ const zoneEditorStore = useZoneEditorStore()
 const selectedObject = computed(() => assetManagerStore.selectedObject)
 
 const objectName = ref('')
+const objectTags = ref([] as string[])
 const objectOriginX = ref(0)
 const objectOriginY = ref(0)
 
@@ -50,19 +56,13 @@ if (!selectedObject.value) {
 
 if (selectedObject.value) {
   objectName.value = selectedObject.value.name
+  objectTags.value = selectedObject.value.tags
   objectOriginX.value = selectedObject.value.origin_x
   objectOriginY.value = selectedObject.value.origin_y
 }
 
-watch(selectedObject, (object: Object | null) => {
-  if (!object) return
-  objectName.value = object.name
-  objectOriginX.value = object.origin_x
-  objectOriginY.value = object.origin_y
-})
-
 function removeObject() {
-  gameStore.connection.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
+  gameStore.connection?.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to remove object')
       return
@@ -72,7 +72,7 @@ function removeObject() {
 }
 
 function refreshObjectList() {
-  gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
+  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
     assetManagerStore.setObjectList(response)
     assetManagerStore.setSelectedObject(null)
 
@@ -89,11 +89,13 @@ function saveObject() {
     return
   }
 
-  gameStore.connection.emit(
+  console.log(objectTags.value)
+  gameStore.connection?.emit(
     'gm:object:update',
     {
       id: selectedObject.value.id,
       name: objectName.value,
+      tags: objectTags.value,
       origin_x: objectOriginX.value,
       origin_y: objectOriginY.value
     },
@@ -107,6 +109,14 @@ function saveObject() {
   )
 }
 
+watch(selectedObject, (object: Object | null) => {
+  if (!object) return
+  objectName.value = object.name
+  objectTags.value = object.tags
+  objectOriginX.value = object.origin_x
+  objectOriginY.value = object.origin_y
+})
+
 onMounted(() => {
   if (!selectedObject.value) return
 })
@@ -114,4 +124,5 @@ onMounted(() => {
 onBeforeUnmount(() => {
   assetManagerStore.setSelectedObject(null)
 })
+
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload object(s)
     </label>

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

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import type { Tile } from '@/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGameStore } from '@/stores/game'

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

@@ -1,6 +1,6 @@
 <template>
   <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload tile(s)
     </label>