Fixes for dynamic zone asset loading

src/components/zone/Zone.vue

@@ -25,26 +25,32 @@ type zoneLoadData = {
   characters: CharacterT[]
 }
 
-gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character!.zoneId }, (response: zoneLoadData) => {
+gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character!.zoneId }, async (response: zoneLoadData) => {
+  await assetStore.fetchAssetsByZoneId(response.zone.id)
+
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)
 })
 
 // Event listeners
-/**
- * Fetch assets from the server when a new zone is loaded
- */
-gameStore.connection?.on('zone:character:load_assets', async (zoneId: number) => {
-  await assetStore.fetchAssetsByZoneId(zoneId)
-})
-
-gameStore.connection?.on('zone:teleport', (data: zoneLoadData) => {
+gameStore.connection?.on('zone:teleport', async (data: zoneLoadData) => {
   if (zoneStore.zone?.id === data.zone.id) return
+
+  /**
+   * @TODO : Update character via global event server-side, remove this and listen for it somewhere not here
+   */
+  gameStore.setCharacter({
+    ...gameStore.character!,
+    zoneId: data.zone.id
+  })
+
+  await assetStore.fetchAssetsByZoneId(data.zone.id)
+
   zoneStore.setZone(data.zone)
   zoneStore.setCharacters(data.characters)
 })
 
-gameStore.connection?.on('zone:character:join', (data: ExtendedCharacterT) => {
+gameStore.connection?.on('zone:character:join', async (data: ExtendedCharacterT) => {
   zoneStore.addCharacter(data)
 })
 
@@ -61,7 +67,6 @@ onBeforeMount(() => {})
 
 onBeforeUnmount(() => {
   zoneStore.reset()
-  gameStore.connection?.off('zone:character:load_assets')
   gameStore.connection?.off('zone:teleport')
   gameStore.connection?.off('zone:character:join')
   gameStore.connection?.off('zone:character:leave')

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