Hot reload after adding new objects

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

@@ -1,7 +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 -->
+      <!--      @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

@@ -8,7 +8,7 @@
   </div>
   <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">
-<!--      @TODO make all img have same width so text aligns nicely -->
+      <!--      @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>
@@ -20,11 +20,13 @@ import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
 import { onMounted, ref } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
+import { useAssetStore } from '@/stores/assets'
 import type { Object } from '@/types'
 
 const socket = useSocketStore()
 const objectUploadField = ref(null)
 const assetManagerStore = useAssetManagerStore()
+const assetStore = useAssetStore()
 
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
@@ -34,6 +36,9 @@ const handleFileUpload = (e: Event) => {
       if (config.development) console.error('Failed to upload object')
       return
     }
+
+    assetStore.fetchAssets()
+
     socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
       assetManagerStore.setObjectList(response)
     })

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

@@ -19,10 +19,12 @@ import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
 import { onMounted, ref } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
+import { useAssetStore } from '@/stores/assets'
 
 const socket = useSocketStore()
 const tileUploadField = ref(null)
 const assetManagerStore = useAssetManagerStore()
+const assetStore = useAssetStore()
 
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
@@ -32,6 +34,8 @@ const handleFileUpload = (e: Event) => {
       if (config.development) console.error('Failed to upload tile')
       return
     }
+
+    assetStore.fetchAssets()
     socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
       assetManagerStore.setTileList(response)
     })

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 })

src/screens/Game.vue

@@ -94,8 +94,6 @@ const preloadScene = (scene: Phaser.Scene) => {
   scene.load.spritesheet('characterW', '/assets/avatar/default/walk.png', { frameWidth: 36, frameHeight: 94 })
 }
 
-const playScene = (scene: Phaser.Scene) => {}
-
 const createScene = (scene: Phaser.Scene) => {
   scene.anims.create({
     key: 'walk',