Fixes for dynamic zone asset loading

src/screens/Game.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="assetsLoaded" class="flex justify-center items-center h-dvh relative">
+  <div class="flex justify-center items-center h-dvh relative">
     <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <Inventory />
@@ -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 } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
@@ -50,28 +50,17 @@ 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()
 const assetStore = useAssetStore()
 const isLoaded = ref(false)
-const assetsLoaded = ref(false)
 
 const gameConfig = {
   name: 'New Quest',
   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,
@@ -143,6 +132,9 @@ const preloadScene = (scene: Phaser.Scene) => {
 }
 
 const createScene = (scene: Phaser.Scene) => {
+  /**
+   * Create sprite animations
+   */
   assetStore.assets.forEach((asset) => {
     if (asset.group !== 'sprite_animations') return
     scene.anims.create({
@@ -157,30 +149,25 @@ const createScene = (scene: Phaser.Scene) => {
   /**
    * Watch for changes in assets and reload them
    */
-  watch(() => assetStore.assets, (newAssets) => {
-    console.log('new assets', newAssets)
-    newAssets.forEach(() => {
-      loadAssets(scene)
-    }, { deep: true })
-
-    scene.load.start()
+  watch(() => assetStore.assets, async () => {
+    loadAssets(scene)
   })
 }
 
 const loadAssets = (scene: Phaser.Scene) => {
   assetStore.assets.forEach((asset) => {
+    console.log('asset', asset)
     if (asset.group === 'sprite_animations') {
       scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
     } else {
       scene.load.image(asset.key, config.server_endpoint + asset.url)
     }
   })
-}
 
-onMounted(async () => {
-  await assetStore.fetchAssetsByZoneId(gameStore.character!.zoneId)
-  assetsLoaded.value = true
-})
+  // scene.load.once(Phaser.Loader.Events.COMPLETE, () => {})
+
+  scene.load.start()
+}
 
 onBeforeUnmount(() => {
   gameStore.disconnectSocket()