Re-added resolution, minor improvements

src/components/zone/Zone.vue

@@ -32,7 +32,7 @@ gameStore.connection?.on('zone:character:load_assets', async (zoneId: number) =>
   await assetStore.fetchAssetsByZoneId(zoneId)
 })
 
-gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character?.zoneId }, (response: zoneLoadData) => {
+gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character!.zoneId }, (response: zoneLoadData) => {
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)
 })
@@ -61,6 +61,7 @@ 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

@@ -38,7 +38,6 @@
 import config from '@/config'
 import 'phaser'
 import { watch, ref, onBeforeUnmount, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
@@ -58,7 +57,6 @@ const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
 const isLoaded = ref(false)
 const assetsLoaded = ref(false)
-const { assets } = storeToRefs(assetStore)
 
 const gameConfig = {
   name: 'New Quest',
@@ -79,6 +77,7 @@ const gameConfig = {
     antialias: true,
     roundPixels: true
   },
+  resolution: 5,
   pixelArt: true
 }
 
@@ -144,11 +143,12 @@ const preloadScene = (scene: Phaser.Scene) => {
 }
 
 const createScene = (scene: Phaser.Scene) => {
-  assets.value.forEach((asset) => {
+  assetStore.assets.forEach((asset) => {
     if (asset.group !== 'sprite_animations') return
     scene.anims.create({
       key: asset.key,
       frameRate: 7,
+      /** @TODO: Fix end, which is total amount of frames */
       frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: 4 }),
       repeat: -1
     })
@@ -157,7 +157,7 @@ const createScene = (scene: Phaser.Scene) => {
   /**
    * Watch for changes in assets and reload them
    */
-  watch(assets, (newAssets) => {
+  watch(assetStore.assets, (newAssets) => {
     newAssets.forEach(() => {
       loadAssets(scene)
     })
@@ -167,12 +167,9 @@ const createScene = (scene: Phaser.Scene) => {
 }
 
 const loadAssets = (scene: Phaser.Scene) => {
-  assets.value.forEach((asset) => {
+  assetStore.assets.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 })
+      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)
     }
@@ -180,7 +177,7 @@ const loadAssets = (scene: Phaser.Scene) => {
 }
 
 onMounted(async () => {
-  await assetStore.fetchAssetsByZoneId(gameStore.character?.zoneId)
+  await assetStore.fetchAssetsByZoneId(gameStore.character!.zoneId)
   assetsLoaded.value = true
 })
 

src/stores/assets.ts

@@ -22,20 +22,6 @@ export const useAssetStore = defineStore('assets', {
           return false
         })
     },
-    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())