http improvements, fixed link

src/application/types.ts

@@ -18,7 +18,7 @@ export type AssetDataT = {
   originX?: number
   originY?: number
   isAnimated?: boolean
-  frameCount?: number
+  frameRate?: number
   frameWidth?: number
   frameHeight?: number
   frameRate?: number

src/components/screens/Characters.vue

@@ -79,7 +79,7 @@
                     v-for="hair in characterHairs"
                     class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                   >
-                    <img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" />
+                    <img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
                     <input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
                   </div>
                 </div>

src/composables/gameComposable.ts

@@ -1,4 +1,4 @@
-import type { AssetDataT, Sprite } from '@/application/types'
+import type { AssetDataT, HttpResponse, Sprite, SpriteAction } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
 import { AssetStorage } from '@/storage/assetStorage'
 import config from '@/application/config'
@@ -59,8 +59,10 @@ export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): P
 export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
   if (!sprite) return
 
-  const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
+  // @TODO: Fix this
-  for await (const sprite_action of sprite_actions) {
+  const sprite_actions: HttpResponse<any[]> = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
+  
+  for await (const sprite_action of sprite_actions.data ?? []) {
     await loadTexture(scene, {
       key: sprite_action.key,
       data: sprite_action.data,
@@ -72,7 +74,6 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
       frameWidth: sprite_action.frameWidth,
       frameHeight: sprite_action.frameHeight,
       frameRate: sprite_action.frameRate,
-      frameCount: sprite_action.frameCount
     } as AssetDataT)
 
     // If the sprite is not animated, skip
@@ -87,7 +88,7 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
     scene.anims.create({
       key: sprite_action.key,
       frameRate: sprite_action.frameRate,
-      frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
+      frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameRate! - 1 }),
       repeat: -1
     })
   }

src/composables/zoneComposable.ts

@@ -3,7 +3,7 @@ import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
-import type { AssetDataT, Zone as ZoneT } from '@/application/types'
+import type { AssetDataT, HttpResponse, Zone as ZoneT } from '@/application/types'
 import { loadTexture } from '@/composables/gameComposable'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
@@ -86,10 +86,10 @@ export function FlattenZoneArray(tiles: string[][]) {
 
 export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
   // 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())
+  const tileArray: HttpResponse<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) {
+  for (const tile of tileArray.data ?? []) {
     await loadTexture(scene, tile)
   }
 }

src/storage/assetStorage.ts

@@ -36,7 +36,7 @@ export class AssetStorage {
         frameWidth: asset.frameWidth,
         frameHeight: asset.frameHeight,
         frameRate: asset.frameRate,
-        frameCount: asset.frameCount
+        frameRate: asset.frameRate
       })
     } catch (error) {
       console.error(`Failed to add asset ${asset.key}:`, error)