Stabilize idle unit animations

scripts/verify-flow.mjs

@@ -75,8 +75,8 @@ try {
   }
 
   const readyUnits = result.battleState.units.filter((unit) => !unit.acted);
-  if (!readyUnits.some((unit) => unit.animating && unit.animationKey?.includes('-walk-'))) {
-    throw new Error(`Expected ready units to loop walk frames: ${JSON.stringify(readyUnits)}`);
+  if (!readyUnits.some((unit) => unit.animating && unit.animationKey?.includes('-idle-'))) {
+    throw new Error(`Expected ready units to loop idle frames: ${JSON.stringify(readyUnits)}`);
   }
 
   console.log(`Verified title-to-battle flow and debug API at ${targetUrl}`);

src/game/scenes/BattleScene.ts

@@ -1434,6 +1434,12 @@ export class BattleScene extends Phaser.Scene {
     view.sprite.play(`${view.textureBase}-walk-${direction}`, true);
   }
 
+  private playUnitIdle(view: UnitView, direction: UnitDirection) {
+    view.direction = direction;
+    view.sprite.setFlipX(false);
+    view.sprite.play(`${view.textureBase}-idle-${direction}`, true);
+  }
+
   private stopUnitWalk(view: UnitView, direction: UnitDirection) {
     view.direction = direction;
     view.sprite.stop();
@@ -1451,7 +1457,7 @@ export class BattleScene extends Phaser.Scene {
       return;
     }
 
-    this.playUnitWalk(view, direction);
+    this.playUnitIdle(view, direction);
   }
 
   private setUnitDirectionFrame(view: UnitView, direction: UnitDirection) {

src/game/scenes/BootScene.ts

@@ -21,6 +21,8 @@ type UnitDirection = 'south' | 'east' | 'north' | 'west';
 
 const unitWalkFrameCount = 4;
 const unitSheetFrameSize = 313;
+const unitWalkFrameRate = 8;
+const unitIdleFrameRate = 4;
 const unitSheetRows: Record<UnitDirection, number> = {
   south: 0,
   east: 1,
@@ -82,20 +84,30 @@ export class BootScene extends Phaser.Scene {
   private createUnitAnimations() {
     unitSheets.forEach(({ key }) => {
       (['south', 'east', 'north', 'west'] as UnitDirection[]).forEach((direction) => {
-        const animationKey = `${key}-walk-${direction}`;
-        if (this.anims.exists(animationKey)) {
-          return;
+        const frames = Array.from({ length: unitWalkFrameCount }, (_, frameIndex) => ({
+          key,
+          frame: unitSheetRows[direction] * unitWalkFrameCount + frameIndex
+        }));
+        const walkAnimationKey = `${key}-walk-${direction}`;
+        const idleAnimationKey = `${key}-idle-${direction}`;
+
+        if (!this.anims.exists(walkAnimationKey)) {
+          this.anims.create({
+            key: walkAnimationKey,
+            frames,
+            frameRate: unitWalkFrameRate,
+            repeat: -1
+          });
         }
 
-        this.anims.create({
-          key: animationKey,
-          frames: Array.from({ length: unitWalkFrameCount }, (_, frameIndex) => ({
-            key,
-            frame: unitSheetRows[direction] * unitWalkFrameCount + frameIndex
-          })),
-          frameRate: 8,
-          repeat: -1
-        });
+        if (!this.anims.exists(idleAnimationKey)) {
+          this.anims.create({
+            key: idleAnimationKey,
+            frames,
+            frameRate: unitIdleFrameRate,
+            repeat: -1
+          });
+        }
       });
     });
   }