Removed broken logic @TODO. replace with working logic :(

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -247,7 +247,7 @@ function handleMove() {
   console.log('move btn clicked')
 }
 
-onBeforeMount(() => {
+onBeforeMount(async () => {
   tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
 
   if (zone.value?.tiles) {
@@ -256,7 +256,7 @@ onBeforeMount(() => {
   }
 
   zoneEventTiles = zone.value?.zoneEventTiles ?? []
-  zoneObjects = sortByIsometricDepth(zone.value?.zoneObjects ?? [], zoneTilemap.width)
+  zoneObjects = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
 
   // Center camera
   const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2

src/components/zone/Zone.vue

@@ -5,18 +5,22 @@
 </template>
 
 <script setup lang="ts">
+import { useGame, useScene } from 'phavuer'
 import { useAssetStore } from '@/stores/assets'
 import { useGameStore } from '@/stores/game'
 import { useZoneStore } from '@/stores/zone'
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
 import Tiles from '@/components/zone/Tiles.vue'
 import Objects from '@/components/zone/Objects.vue'
 import Characters from '@/components/zone/Characters.vue'
+import { loadAssets } from '@/services/zone'
 
 const assetStore = useAssetStore()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
+const game = useGame()
+const scene = useScene()
 
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 
@@ -25,15 +29,13 @@ type zoneLoadData = {
   characters: CharacterT[]
 }
 
-gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character!.zoneId }, async (response: zoneLoadData) => {
-  await assetStore.fetchAssetsByZoneId(response.zone.id)
-
+gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character!.zoneId }, (response: zoneLoadData) => {
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)
 })
 
 // Event listeners
-gameStore.connection?.on('zone:teleport', async (data: zoneLoadData) => {
+gameStore.connection?.on('zone:teleport', (data: zoneLoadData) => {
   if (zoneStore.zone?.id === data.zone.id) return
 
   /**
@@ -44,8 +46,6 @@ gameStore.connection?.on('zone:teleport', async (data: zoneLoadData) => {
     zoneId: data.zone.id
   })
 
-  await assetStore.fetchAssetsByZoneId(data.zone.id)
-
   zoneStore.setZone(data.zone)
   zoneStore.setCharacters(data.characters)
 })
@@ -55,7 +55,6 @@ gameStore.connection?.on('zone:character:join', async (data: ExtendedCharacterT)
 })
 
 gameStore.connection?.on('zone:character:leave', (character_id: number) => {
-  console.log('character left', character_id)
   zoneStore.removeCharacter(character_id)
 })
 
@@ -63,8 +62,6 @@ gameStore.connection?.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
-onBeforeMount(() => {})
-
 onBeforeUnmount(() => {
   zoneStore.reset()
   gameStore.connection?.off('zone:teleport')

src/screens/Game.vue

@@ -37,9 +37,10 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { watch, ref, onBeforeUnmount } from 'vue'
+import { watch, ref, onBeforeUnmount, onBeforeMount } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
+import { useZoneStore } from '@/stores/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useAssetStore } from '@/stores/assets'
 import Hud from '@/components/gui/Hud.vue'
@@ -50,8 +51,10 @@ 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 { loadAssets } from '@/services/zone'
 
 const gameStore = useGameStore()
+const zoneStore = useZoneStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
 const isLoaded = ref(false)
@@ -145,31 +148,6 @@ const createScene = (scene: Phaser.Scene) => {
       repeat: -1
     })
   })
-
-  /**
-   * Watch for changes in assets and reload them
-   */
-  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)
-    }
-  })
-
-  // scene.load.once(Phaser.Loader.Events.COMPLETE, () => {})
-
-  scene.load.start()
 }
 
 onBeforeUnmount(() => {

src/screens/Login.vue

@@ -37,7 +37,6 @@ import { useCookies } from '@vueuse/integrations/useCookies'
 
 const gameStore = useGameStore()
 const notifications = useNotificationStore()
-const assetStore = useAssetStore()
 const username = ref('')
 const password = ref('')
 
@@ -52,10 +51,6 @@ onMounted(async () => {
     gameStore.setToken(token)
     gameStore.initConnection()
   }
-
-  if (!(await assetStore.fetchAssets())) {
-    notifications.addNotification({ message: 'Failed to fetch assets, the server may be offline or in maintenance. Please try again later.' })
-  }
 })
 
 async function loginFunc() {

src/services/zone.ts

@@ -2,6 +2,7 @@ import config from '@/config'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
+import { useAssetStore } from '@/stores/assets'
 
 export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@@ -56,3 +57,16 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
     return calculateIsometricDepth(a.positionX, a.positionY, 0, 0) - calculateIsometricDepth(b.positionX, b.positionY, 0, 0)
   })
 }
+
+export const loadAssets = (scene: Phaser.Scene) => {
+  const assetStore = useAssetStore()
+  assetStore.assets.forEach((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)
+    }
+  })
+
+  scene.load.start()
+}