object stuff

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

@@ -1,6 +1,7 @@
 <template>
   <div class="object-manager">
     <div class="image-container">
+<!--      @TODO show img with width100% to keep quality and show it center with padding around it, preferably the window wont jump if a larger object is selected -->
       <img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
     </div>
     <div class="modal-form asset-manager">

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

@@ -6,10 +6,11 @@
     </label>
     <input class="input-cyan search-field" placeholder="Search..." />
   </div>
-  <a class="asset" :class="{ active: assetManagerStore.selectedObject === object }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object)">
+  <a class="asset" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
     <div class="asset-details">
-      <img :src="`${config.server_endpoint}/assets/objects/${object}.png`" alt="Object" />
-      <span class="asset-name">{{ object }}</span>
+<!--      @TODO make all img have same width so text aligns nicely -->
+      <img :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
+      <span class="asset-name">{{ object.name }}</span>
     </div>
   </a>
 </template>
@@ -19,6 +20,7 @@ import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
 import { onMounted, ref } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
+import type { Object } from '@/types'
 
 const socket = useSocketStore()
 const objectUploadField = ref(null)
@@ -32,14 +34,14 @@ const handleFileUpload = (e: Event) => {
       if (config.development) console.error('Failed to upload object')
       return
     }
-    socket.connection.emit('gm:object:list', {}, (response: string[]) => {
+    socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
       assetManagerStore.setObjectList(response)
     })
   })
 }
 
 onMounted(() => {
-  socket.connection.emit('gm:object:list', {}, (response: string[]) => {
+  socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
     if (config.development) console.log(response)
     assetManagerStore.setObjectList(response)
   })

src/components/utilities/zoneEditor/Toolbar.vue

@@ -70,6 +70,7 @@ import { onBeforeUnmount, ref, watch } from 'vue'
 import { useScene } from 'phavuer'
 import { getTile } from '@/services/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 const zoneEditorStore = useZoneEditorStore()
 
@@ -98,7 +99,7 @@ function drawTile(pointer: Phaser.Input.Pointer) {
   const px = scene.cameras.main.worldView.x + pointer.x
   const py = scene.cameras.main.worldView.y + pointer.y
 
-  const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
+  const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
   if (!pointer_tile) {
     return
   }

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -57,7 +57,7 @@ type ZoneObject = {
 const zoneObjects = ref<ZoneObject[]>([])
 
 /**
- * Walk through tiles and add them to the zone as tilesetImages
+ * Walk through object and add them to the zone as tilesetImages
  */
 let tileCount = 1
 toRaw(assetStore.assets).forEach((asset) => {
@@ -78,10 +78,10 @@ console.log(pos)
 
 // Watch for changes in the zoneStore and update the layer
 // watch(
-//   () => zoneEditorStore.tiles,
+//   () => zoneEditorStore.object,
 //   () => {
 //     // @TODO : change to zone for when loading other maps
-//     zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
+//     zoneEditorStore.object.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
 //   },
 //   { deep: true }
 // )

src/stores/assetManager.ts

@@ -1,9 +1,10 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
+import type { Object } from '@/types'
 
 export const useAssetManagerStore = defineStore('assetManager', () => {
   const tileList = ref<string[]>([])
-  const objectList = ref<string[]>([])
+  const objectList = ref<Object[]>([])
   const selectedTile = ref<string | null>(null)
   const selectedObject = ref<string | null>(null)
   const objectDetails = ref<Record<string, any>>({})
@@ -12,7 +13,7 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     tileList.value = tiles
   }
 
-  function setObjectList(objects: string[]) {
+  function setObjectList(objects: Object[]) {
     objectList.value = objects
   }