Refactor assetManager, renamed assetManager to assetStorage, renamed AssetT to AssetDataT, added better error handling in authentication service, continued working on dynamic asset loading for both maps and map editor

src/composables/game/scene/loaderComposable.ts

@@ -0,0 +1,34 @@
+export function createSceneLoader(scene: Phaser.Scene) {
+  const width = scene.cameras.main.width
+  const height = scene.cameras.main.height
+
+  const progressBox = scene.add.graphics()
+  const progressBar = scene.add.graphics()
+  progressBox.fillStyle(0x222222, 0.8)
+  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
+
+  const loadingText = scene.make.text({
+    x: width / 2,
+    y: height / 2 - 50,
+    text: 'Loading...',
+    style: {
+      font: '20px monospace',
+      // @ts-ignore
+      fill: '#ffffff'
+    }
+  })
+  loadingText.setOrigin(0.5, 0.5)
+
+  scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
+    progressBar.clear()
+    progressBar.fillStyle(0x368f8b, 1)
+    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
+  })
+
+  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
+    progressBar.destroy()
+    progressBox.destroy()
+    loadingText.destroy()
+    return true
+  })
+}

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -31,7 +31,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
     const { worldX, worldY } = pointer
     updateWaypoint(worldX, worldY)
 
-    if (gameStore.isPlayerDraggingCamera) {
+    if (gameStore.game.isPlayerDraggingCamera) {
       const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
 
       if (distance > dragThreshold) {

src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts

@@ -26,7 +26,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
   }
 
   function dragZone(pointer: Phaser.Input.Pointer) {
-    if (gameStore.isPlayerDraggingCamera) {
+    if (gameStore.game.isPlayerDraggingCamera) {
       const { x, y, prevPosition } = pointer
       const { scrollX, scrollY, zoom } = camera
       camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)

src/composables/zoneComposable.ts

@@ -3,8 +3,9 @@ import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
-import { useAssetManager } from '@/managers/assetManager'
-import type { AssetT, Zone as ZoneT } from '@/types'
+import type { AssetDataT, Zone as ZoneT } from '@/types'
+import { AssetStorage } from '@/storage/assetStorage'
+import { useGameStore } from '@/stores/gameStore'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
   const tile = layer.getTileAtWorldXY(x, y)
@@ -86,59 +87,40 @@ export function FlattenZoneArray(tiles: string[][]) {
 }
 
 export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
-  const tileArray: AssetT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
-  console.log(tileArray)
+  // Fetch the list of tiles from the server
+  const tileArray: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
+
+  // Load each tile into the scene
   for (const tile of tileArray) {
-    await loadZoneTileTexture(scene, tile.key, tile.updatedAt)
+    await loadTexture(scene, tile)
   }
 }
 
-export async function loadZoneTileTexture(scene: Phaser.Scene, textureId: string, updatedAt: Date): Promise<boolean> {
-  const assetManager = useAssetManager
+export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): Promise<boolean> {
+  const gameStore = useGameStore()
+  const assetStorage = new AssetStorage()
 
   // Check if the texture is already loaded in Phaser
-  if (scene.textures.exists(textureId)) {
+  if (scene.textures.exists(assetData.key)) {
     return true
   }
 
-  let assetData = await assetManager.getAsset(textureId)
+  // Check if the asset is already cached
+  let asset = await assetStorage.get(assetData.key)
 
-  if (!assetData) {
-    await assetManager.downloadAsset(textureId, `/assets/tiles/${textureId}.png`, 'tiles', updatedAt)
-    assetData = await assetManager.getAsset(textureId)
+  // If asset is not found, download it
+  if (!asset) {
+    await assetStorage.download(assetData)
+    asset = await assetStorage.get(assetData.key)
   }
 
-  if (assetData) {
+  // If asset is found, add it to the scene
+  if (asset) {
     return new Promise<boolean>((resolve) => {
-      scene.textures.addBase64(textureId, assetData.data)
-      scene.textures.once(`addtexture-${textureId}`, () => {
-        resolve(true)
-      })
-    })
-  }
-
-  return false
-}
-
-export async function loadZoneObjectTexture(scene: Phaser.Scene, textureId: string, updatedAt: Date): Promise<boolean> {
-  const assetManager = useAssetManager
-
-  // Check if the texture is already loaded in Phaser
-  if (scene.textures.exists(textureId)) {
-    return true
-  }
-
-  let assetData = await assetManager.getAsset(textureId)
-
-  if (!assetData) {
-    await assetManager.downloadAsset(textureId, `/assets/objects/${textureId}.png`, 'objects', updatedAt)
-    assetData = await assetManager.getAsset(textureId)
-  }
-
-  if (assetData) {
-    return new Promise<boolean>((resolve) => {
-      scene.textures.addBase64(textureId, assetData.data)
-      scene.textures.once(`addtexture-${textureId}`, () => {
+      console.log(asset.data)
+      scene.textures.addBase64(asset.key, asset.data)
+      scene.textures.once(`addtexture-${asset.key}`, () => {
+        gameStore.game.loadedAssets.push(asset)
         resolve(true)
       })
     })