npm update, cleaned code

src/screens/Game.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { watch, ref, onBeforeUnmount, onMounted, inject } from 'vue'
+import { watch, ref, onBeforeUnmount, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
@@ -51,7 +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';
+import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin.js'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
@@ -60,17 +60,26 @@ const isLoaded = ref(false)
 const assetsLoaded = ref(false)
 const { assets } = storeToRefs(assetStore)
 
+/**
+ * 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)
+})
+
 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
-    }]
+    global: [
+      {
+        key: 'rexAwaitLoader',
+        plugin: AwaitLoaderPlugin,
+        start: true
+      }
+    ]
   },
   render: {
     pixelArt: true,
@@ -89,15 +98,6 @@ 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;
-})
-
 const preloadScene = (scene: Phaser.Scene) => {
   /**
    * Create loading bar
@@ -137,7 +137,7 @@ const preloadScene = (scene: Phaser.Scene) => {
   /**
    * Load the assets into the Phaser scene
    */
-  loadAssets(scene);
+  loadAssets(scene)
 
   scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
   scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
@@ -150,30 +150,7 @@ 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({
@@ -184,14 +161,12 @@ const createScene = (scene: Phaser.Scene) => {
     })
   })
 
-
-
   /**
    * Watch for changes in assets and reload them
    */
   watch(assets, (newAssets) => {
     newAssets.forEach(() => {
-      loadAssets(scene);
+      loadAssets(scene)
     })
 
     scene.load.start()
@@ -199,6 +174,24 @@ const createScene = (scene: Phaser.Scene) => {
   })
 }
 
+const loadAssets = (scene: 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)
+      }
+    } else {
+      scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
+      scene.load.image(asset.key, config.server_endpoint + asset.url)
+    }
+  })
+}
+
+onMounted(async () => {
+  await assetStore.fetchAssetsByZoneId(gameStore.character?.zoneId)
+  assetsLoaded.value = true
+})
+
 onBeforeUnmount(() => {
   gameStore.disconnectSocket()
 })