Hot reload for objects when updated inside asset manager so no page reload is required

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

@@ -29,11 +29,14 @@
 import type { Object } from '@/types'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useSocketStore } from '@/stores/socket'
 import config from '@/config'
 
 const socket = useSocketStore()
 const assetManagerStore = useAssetManagerStore()
+const zoneEditorStore = useZoneEditorStore()
+
 const selectedObject = computed(() => assetManagerStore.selectedObject)
 
 const objectName = ref('')
@@ -71,6 +74,11 @@ function refreshObjectList() {
   socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
     assetManagerStore.setObjectList(response)
     assetManagerStore.setSelectedObject(null)
+
+    if (zoneEditorStore.active) {
+      console.log('Refreshing object list for zone store')
+      zoneEditorStore.setObjectList(response)
+    }
   })
 }
 

src/components/utilities/zoneEditor/Objects.vue

@@ -13,7 +13,7 @@
       <template #modalBody>
         <div class="my-[15px] mx-auto">
           <div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
-            <div v-for="(object, index) in objects" :key="index" class="mb-4">
+            <div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="mb-4">
               <img
                 :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
                 alt="Object"
@@ -41,14 +41,13 @@ import Modal from '@/components/utilities/Modal.vue'
 import type { Object } from '@/types'
 
 const socket = useSocketStore()
-const objects = ref<Object[]>([])
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 
 onMounted(async () => {
   isModalOpen.value = true
   socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
-    objects.value = response
+    zoneEditorStore.setObjectList(response)
   })
 })
 </script>

src/components/utilities/zoneEditor/Tiles.vue

@@ -8,7 +8,7 @@
         <div class="m-[15px]">
           <div class="flex flex-wrap gap-2.5">
             <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
-            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
+            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in zoneEditorStore.tileList" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
           </div>
         </div>
       </template>
@@ -24,14 +24,13 @@ import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
 
 const socket = useSocketStore()
-const tiles = ref<string[]>([])
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 
 onMounted(async () => {
   isModalOpen.value = true
   socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response
+    zoneEditorStore.tileList = response
   })
 })
 </script>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -17,7 +17,7 @@ import config from '@/config'
 import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, toRaw } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
@@ -28,6 +28,7 @@ import { placeTile, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
 import type { Object } from '@/types'
+import { storeToRefs } from 'pinia'
 
 const scene = useScene()
 const socket = useSocketStore()
@@ -95,10 +96,9 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 
   if (zoneEditorStore.drawMode === 'object') {
     if (zoneEditorStore.selectedObject === null) return
-    console.log('zoneObjects.value', zoneObjects.value)
     zoneObjects.value.push({
       id: Math.random().toString(10),
-      object: zoneEditorStore.selectedObject,
+      object: toRaw(zoneEditorStore.selectedObject),
       position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
       position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
     })
@@ -121,6 +121,20 @@ function save() {
   })
 }
 
+const { objectList } = storeToRefs(zoneEditorStore)
+
+watch(objectList, (newObjects) => {
+  // update objects inside zoneObjects and keep the position
+  zoneObjects.value = zoneObjects.value.map((object) => {
+    const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
+    if (!newObject) return object
+    return {
+      ...object,
+      object: newObject
+    }
+  })
+});
+
 onBeforeMount(() => {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })

src/stores/assets.ts

@@ -1,10 +1,12 @@
 import { defineStore } from 'pinia'
-import { type Asset } from '@/types'
+import { type Asset, type Object } from '@/types'
 import config from '@/config'
 
 export const useAssetStore = defineStore('assets', {
   state: () => ({
-    assets: [] as Asset[]
+    assets: [] as Asset[],
+    tiles: [] as string[],
+    objects: [] as Object[],
   }),
   actions: {
     setAssets(assets: Asset[]) {
@@ -13,6 +15,12 @@ export const useAssetStore = defineStore('assets', {
     addAsset(asset: Asset) {
       this.assets.push(asset)
     },
+    setTiles(tiles: string[]) {
+      this.tiles = tiles
+    },
+    setObjects(objects: Object[]) {
+      this.objects = objects
+    },
     fetchAssets() {
       fetch(config.server_endpoint + '/assets')
         .then((response) => response.json())

src/stores/zoneEditor.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { Object } from '@/types'
+import type { Object, ZoneObject } from '@/types'
 
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
@@ -7,8 +7,10 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     name: '',
     width: 10,
     height: 10,
+    tileList: [] as string[],
     tiles: [] as string[][],
-    objects: [] as Object[],
+    objectList: [] as Object[],
+    objects: [] as ZoneObject[],
     tool: 'move',
     drawMode: 'tile',
     selectedTile: '',
@@ -28,16 +30,22 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setHeight(height: number) {
       this.height = height
     },
+    setTileList(tiles: string[]) {
+      this.tileList = tiles
+    },
     setTiles(tiles: string[][]) {
       this.tiles = tiles
     },
     updateTile(x: number, y: number, tile: string) {
       this.tiles[y][x] = tile
     },
-    setObjects(objects: Object[]) {
+    setObjectList(objects: Object[]) {
+      this.objectList = objects
+    },
+    setObjects(objects: ZoneObject[]) {
       this.objects = objects
     },
-    updateObject(index: number, object: Object) {
+    updateObject(index: number, object: ZoneObject) {
       this.objects[index] = object
     },
     setTool(tool: string) {
@@ -59,7 +67,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.name = ''
       this.width = 10
       this.height = 10
+      this.tileList = []
       this.tiles = []
+      this.objectList = []
       this.objects = []
       this.tool = 'move'
       this.drawMode = 'tile'