#216: Added tile & object picker in map editor

src/components/gameMaster/zoneEditor/partials/ObjectList.vue

@@ -42,23 +42,18 @@
 
 <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/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import type { Object } from '@/types'
+import type { Object, ZoneObject } from '@/types'
 
 const gameStore = useGameStore()
 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 uniqueTags = computed(() => {
   const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
@@ -81,8 +76,6 @@ const toggleTag = (tag: string) => {
 }
 
 onMounted(async () => {
-  zoneEditorStore.setObjectDepth(0)
-
   isModalOpen.value = true
   gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
     zoneEditorStore.setObjectList(response)

src/components/gameMaster/zoneEditor/partials/TileList.vue

@@ -52,7 +52,7 @@
                 class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                 :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
                 :alt="selectedGroup.parent.name"
-                @click="selectTile(selectedGroup.parent)"
+                @click="selectTile(selectedGroup.parent.id)"
                 :class="{
                   'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
                   'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
@@ -65,7 +65,7 @@
                 class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                 :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
                 :alt="childTile.name"
-                @click="selectTile(childTile)"
+                @click="selectTile(childTile.id)"
                 :class="{
                   'border-cyan shadow-lg scale-105': isActiveTile(childTile),
                   'border-transparent hover:border-gray-300': !isActiveTile(childTile)
@@ -218,7 +218,7 @@ function closeGroup() {
   selectedGroup.value = null
 }
 
-function selectTile(tile: Tile) {
+function selectTile(tile: string) {
   zoneEditorStore.setSelectedTile(tile)
 }