npm update, cleaned code

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -47,7 +47,6 @@ import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportM
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
-
 /**
  * @TODO:
  * Clean all the code in this file
@@ -88,7 +87,7 @@ function createTileLayer() {
   const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
 
   layer.setDepth(0)
-  
+
   return layer
 }
 

src/components/sprites/Character.vue

@@ -158,7 +158,7 @@ const createText = (text: Phaser.GameObjects.Text) => {
 
 onMounted(() => {
   if (props.character) {
-    updatePosition(props.character.positionX, props.character.positionY, Direction.Positive)
+    updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
   }
 })
 

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

src/stores/assets.ts

@@ -27,11 +27,11 @@ export const useAssetStore = defineStore('assets', {
         .then((response) => response.json())
         .then((assets) => {
           this.setAssets(assets)
-          successCallback();
+          successCallback()
           return true
         })
         .catch((error) => {
-          errorCallback();
+          errorCallback()
           console.error('Error fetching assets:', error)
           return false
         })