Hot reload after adding new objects

src/components/utilities/zoneEditor/Objects.vue

@@ -7,7 +7,14 @@
       <template #modalBody>
         <div class="container objects">
           <div class="objects">
-            <img v-for="(object, index) in objects" :key="index" :src="`${config.server_endpoint}/assets/objects/${object}.png`" alt="Object" @click="zoneEditorStore.setSelectedObject(object)" :class="{ selected: zoneEditorStore.selectedObject && zoneEditorStore.selectedObject === object }" />
+            <img
+              v-for="(object, index) in objects"
+              :key="index"
+              :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
+              alt="Object"
+              @click="zoneEditorStore.setSelectedObject(object.id)"
+              :class="{ selected: zoneEditorStore.selectedObject && zoneEditorStore.selectedObject === object.id }"
+            />
           </div>
         </div>
       </template>
@@ -21,15 +28,16 @@ import { ref, onMounted } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
+import type { Object } from '@/types'
 
 const socket = useSocketStore()
-const objects = ref<string[]>([])
+const objects = ref<Object[]>([])
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 
 onMounted(async () => {
   isModalOpen.value = true
-  socket.connection.emit('gm:object:list', {}, (response: string[]) => {
+  socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
     objects.value = response
   })
 })

src/components/utilities/zoneEditor/Toolbar.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import { useScene } from 'phavuer'
 import { getTile } from '@/services/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -19,7 +19,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, onMounted, ref, toRaw } from 'vue'
+import { onBeforeMount, onBeforeUnmount, onMounted, 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'
@@ -96,7 +96,7 @@ console.log(pos)
 function eraser(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
     placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
-    zoneEditorStore.updateTile(tile.x, tile.y, 0)
+    zoneEditorStore.updateTile(tile.x, tile.y, 'blank_tile')
   }
 
   // if (zoneEditorStore.drawMode === 'wall') {
@@ -127,7 +127,9 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 }
 
 function paint(tile: Phaser.Tilemaps.Tile) {
+  console.log('yoo')
   if (!zoneEditorStore.selectedTile) return
+  console.log('placing tile', tile.x, tile.y, zoneEditorStore.selectedTile)
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, zoneEditorStore.selectedTile)))
 }
 
@@ -142,7 +144,25 @@ function save() {
   })
 }
 
-onMounted(() => {})
+onMounted(() => {
+  watch(
+    () => assetStore.assets,
+    () => {
+      toRaw(assetStore.assets).forEach((asset) => {
+        if (asset.type === 'link') {
+          scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
+        }
+        if (asset.type === 'base64') {
+          scene.textures.addBase64(asset.key, asset.value)
+        }
+      })
+
+      scene.load.start()
+    },
+    { deep: true }
+  )
+})
+
 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 })