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

src/components/utilities/zoneEditor/Objects.vue

@@ -18,6 +18,17 @@
       </template>
       <template #modalBody>
         <div class="m-[15px]">
+          <div class="mb-4 flex flex-wrap gap-2">
+            <button
+              v-for="tag in uniqueTags"
+              :key="tag"
+              @click="toggleTag(tag)"
+              class="btn-cyan"
+              :class="{ 'opacity-50': !selectedTags.includes(tag) }"
+            >
+              {{ tag }}
+            </button>
+          </div>
           <div class="flex justify-between flex-wrap gap-2.5 items-center">
             <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
               <img
@@ -52,18 +63,33 @@ const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
 const objectDepth = ref(0)
+const selectedTags = ref<string[]>([])
 
 watch(objectDepth, (depth) => {
   zoneEditorStore.setObjectDepth(depth)
 })
 
-const filteredObjects = computed(() => {
-  if (!searchQuery.value) {
-    return zoneEditorStore.objectList
-  }
-  return zoneEditorStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+const uniqueTags = computed(() => {
+  const allTags = zoneEditorStore.objectList.flatMap(obj => obj.tags || [])
+  return Array.from(new Set(allTags))
 })
 
+const filteredObjects = computed(() => {
+  return zoneEditorStore.objectList.filter((object) => {
+    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase());
+    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some(tag => object.tags.includes(tag)));
+    return matchesSearch && matchesTags;
+  })
+});
+
+const toggleTag = (tag: string) => {
+  if (selectedTags.value.includes(tag)) {
+    selectedTags.value = selectedTags.value.filter(t => t !== tag)
+  } else {
+    selectedTags.value.push(tag)
+  }
+}
+
 onMounted(async () => {
   zoneEditorStore.setObjectDepth(0)
 
@@ -72,4 +98,4 @@ onMounted(async () => {
     zoneEditorStore.setObjectList(response)
   })
 })
-</script>
+</script>

src/components/utilities/zoneEditor/Tiles.vue

@@ -14,6 +14,17 @@
       </template>
       <template #modalBody>
         <div class="m-[15px]">
+          <div class="mb-4 flex flex-wrap gap-2">
+            <button
+              v-for="tag in uniqueTags"
+              :key="tag"
+              @click="toggleTag(tag)"
+              class="btn-cyan"
+              :class="{ 'opacity-50': !selectedTags.includes(tag) }"
+            >
+              {{ tag }}
+            </button>
+          </div>
           <div class="flex justify-between flex-wrap gap-2.5 items-center">
             <div v-for="(tile, index) in filteredTiles" :key="index" class="max-w-[25%] inline-block">
               <img
@@ -37,7 +48,7 @@
 
 <script setup lang="ts">
 import config from '@/config'
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGameStore } from '@/stores/game'
 import Modal from '@/components/utilities/Modal.vue'
@@ -47,13 +58,28 @@ const gameStore = useGameStore()
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
+const selectedTags = ref<string[]>([])
+
+const uniqueTags = computed(() => {
+  const allTags = zoneEditorStore.tileList.flatMap(tile => tile.tags || [])
+  return Array.from(new Set(allTags))
+})
 
 const filteredTiles = computed(() => {
-  if (!searchQuery.value) {
-    return zoneEditorStore.tileList
+  return zoneEditorStore.tileList.filter((tile) => {
+    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase());
+    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some(tag => tile.tags.includes(tag)));
+    return matchesSearch && matchesTags;
+  })
+});
+
+const toggleTag = (tag: string) => {
+  if (selectedTags.value.includes(tag)) {
+    selectedTags.value = selectedTags.value.filter(t => t !== tag)
+  } else {
+    selectedTags.value.push(tag)
   }
-  return zoneEditorStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
-})
+}
 
 onMounted(async () => {
   isModalOpen.value = true
@@ -61,4 +87,4 @@ onMounted(async () => {
     zoneEditorStore.setTileList(response)
   })
 })
-</script>
+</script>