Map editor fixes (select & move), character sprites are now dynamically loaded and cached, moved repeated code into a composable, updated types

src/composables/gameComposable.ts

@@ -0,0 +1,62 @@
+import type { AssetDataT, Sprite } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
+import { AssetStorage } from '@/storage/assetStorage'
+import config from '@/config'
+
+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(assetData.key)) {
+    return true
+  }
+
+  // Check if the asset is already cached
+  let asset = await assetStorage.get(assetData.key)
+
+  // If asset is not found, download it
+  if (!asset) {
+    await assetStorage.download(assetData)
+    asset = await assetStorage.get(assetData.key)
+  }
+
+  // If asset is found, add it to the scene
+  if (asset) {
+    return new Promise<boolean>((resolve) => {
+      console.log(asset.data)
+      scene.textures.addBase64(asset.key, asset.data)
+      scene.textures.once(`addtexture-${asset.key}`, () => {
+        gameStore.game.loadedAssets.push(asset)
+        resolve(true)
+      })
+    })
+  }
+
+  return false
+}
+
+export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
+  const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
+  for await (const sprite_action of sprite_actions) {
+    await loadTexture(scene, {
+      key: sprite_action.key,
+      data: sprite_action.data,
+      group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
+      updatedAt: sprite_action.updatedAt,
+      frameCount: sprite_action.frameCount,
+      frameWidth: sprite_action.frameWidth,
+      frameHeight: sprite_action.frameHeight
+    } as AssetDataT)
+
+    if (sprite_action.isAnimated) {
+      scene.anims.create({
+        key: sprite_action.key,
+        frameRate: 7,
+        frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
+        repeat: -1
+      })
+    }
+  }
+  return true
+}

src/composables/zoneComposable.ts

@@ -4,8 +4,7 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
 import type { AssetDataT, Zone as ZoneT } from '@/types'
-import { AssetStorage } from '@/storage/assetStorage'
-import { useGameStore } from '@/stores/gameStore'
+import { loadTexture } from '@/composables/gameComposable'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
   const tile = layer.getTileAtWorldXY(x, y)
@@ -95,36 +94,3 @@ export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
     await loadTexture(scene, tile)
   }
 }
-
-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(assetData.key)) {
-    return true
-  }
-
-  // Check if the asset is already cached
-  let asset = await assetStorage.get(assetData.key)
-
-  // If asset is not found, download it
-  if (!asset) {
-    await assetStorage.download(assetData)
-    asset = await assetStorage.get(assetData.key)
-  }
-
-  // If asset is found, add it to the scene
-  if (asset) {
-    return new Promise<boolean>((resolve) => {
-      console.log(asset.data)
-      scene.textures.addBase64(asset.key, asset.data)
-      scene.textures.once(`addtexture-${asset.key}`, () => {
-        gameStore.game.loadedAssets.push(asset)
-        resolve(true)
-      })
-    })
-  }
-
-  return false
-}