Continues asset loading

src/screens/Game.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { watch, ref, onBeforeUnmount, onMounted } from 'vue'
+import { watch, ref, onBeforeUnmount, onMounted, inject } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
@@ -51,6 +51,7 @@ import GmTools from '@/components/gameMaster/GmTools.vue'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Inventory from '@/components/gui/UserPanel.vue'
+import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin.js';
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
@@ -64,6 +65,13 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
+  plugins: {
+    global: [{
+      key: 'rexAwaitLoader',
+      plugin: AwaitLoaderPlugin,
+      start: true
+    }]
+  },
   render: {
     pixelArt: true,
     antialias: true,
@@ -82,6 +90,10 @@ const createGame = (game: Phaser.Game) => {
 }
 
 onMounted(async () => {
+  gameStore.connection?.on('zone:character:load_assets', async (zoneId: number) => {
+    console.log('new assets')
+    await assetStore.fetchAssetsByZoneId(zoneId);
+  });
   await assetStore.fetchAssetsByZoneId(gameStore.character?.zoneId);
   assetsLoaded.value = true;
 })
@@ -125,16 +137,7 @@ const preloadScene = (scene: Phaser.Scene) => {
   /**
    * Load the assets into the Phaser scene
    */
-  assets.value.forEach((asset) => {
-    if (asset.group === 'sprite_animations') {
-      if (!asset.frameWidth || !asset.frameHeight) {
-        console.error('Frame width and height must be defined for spritesheets', asset)
-      }
-      scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
-    } else {
-      scene.load.image(asset.key, config.server_endpoint + asset.url)
-    }
-  })
+  loadAssets(scene);
 
   scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
   scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
@@ -147,7 +150,30 @@ const preloadScene = (scene: Phaser.Scene) => {
   )
 }
 
+const loadAssets = (scene: Phaser.Scene, add = false) => {
+  assets.value.forEach((asset) => {
+    if (asset.group === 'sprite_animations') {
+      if (!asset.frameWidth || !asset.frameHeight) {
+        console.error('Frame width and height must be defined for spritesheets', asset)
+      }
+      if(add) {
+        scene.add.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
+      } else {
+        scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
+      }
+    } else {
+      if(add) {
+        scene.add.image(asset.key, config.server_endpoint + asset.url)
+      } else {
+        scene.load.image(asset.key, config.server_endpoint + asset.url)
+      }
+    }
+  })
+}
+
 const createScene = (scene: Phaser.Scene) => {
+
+
   assets.value.forEach((asset) => {
     if (asset.group !== 'sprite_animations') return
     scene.anims.create({
@@ -158,15 +184,17 @@ const createScene = (scene: Phaser.Scene) => {
     })
   })
 
+
+
   /**
    * Watch for changes in assets and reload them
    */
   watch(assets, (newAssets) => {
-    // newAssets.forEach((asset) => {
-    //   scene.load.image(asset.key, config.server_endpoint + asset.url)
-    // })
+    newAssets.forEach(() => {
+      loadAssets(scene);
+    })
 
-    // scene.load.start()
+    scene.load.start()
     // scene.load.once('complete', () => {})
   })
 }

src/stores/assets.ts

@@ -22,7 +22,21 @@ export const useAssetStore = defineStore('assets', {
           return false
         })
     },
-    fetchAssetsByZoneId(zoneId: number) {
+    fetchAssetsByZoneId2(zoneId: number, successCallback, errorCallback) {
+      fetch(config.server_endpoint + '/assets/' + zoneId)
+        .then((response) => response.json())
+        .then((assets) => {
+          this.setAssets(assets)
+          successCallback();
+          return true
+        })
+        .catch((error) => {
+          errorCallback();
+          console.error('Error fetching assets:', error)
+          return false
+        })
+    },
+    async fetchAssetsByZoneId(zoneId: number) {
       return fetch(config.server_endpoint + '/assets/' + zoneId)
         .then((response) => response.json())
         .then((assets) => {