Animate ready battle units

scripts/verify-flow.mjs

@@ -74,6 +74,11 @@ try {
     throw new Error(`Debug battle state was not available: ${JSON.stringify(result.battleState)}`);
   }
 
+  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)}`);
+  }
+
   console.log(`Verified title-to-battle flow and debug API at ${targetUrl}`);
 } finally {
   await browser?.close();

src/game/scenes/BattleScene.ts

@@ -275,7 +275,9 @@ export class BattleScene extends Phaser.Scene {
       });
       label.setOrigin(0.5, 0);
       label.setDepth(7);
-      this.unitViews.set(unit.id, { sprite, label, textureBase, direction: 'south' });
+      const view = { sprite, label, textureBase, direction: 'south' as UnitDirection };
+      this.unitViews.set(unit.id, view);
+      this.syncUnitMotion(unit, view);
     });
   }
 
@@ -783,8 +785,11 @@ export class BattleScene extends Phaser.Scene {
       view.sprite.postFX.clear();
       view.sprite.clearTint();
       view.sprite.setAlpha(1);
-      view.sprite.stop();
-      this.setUnitDirectionFrame(view, view.direction);
+      if (unit) {
+        this.syncUnitMotion(unit, view);
+      } else {
+        this.stopUnitWalk(view, view.direction);
+      }
       view.label.setAlpha(1);
       view.label.setColor(unit?.faction === 'ally' ? '#e7edf7' : '#ffebe7');
       view.label.setBackgroundColor('');
@@ -964,7 +969,7 @@ export class BattleScene extends Phaser.Scene {
       y: targetY,
       duration,
       ease: 'Sine.easeInOut',
-      onComplete: () => this.stopUnitWalk(view, direction)
+      onComplete: () => this.syncUnitMotion(unit, view, direction)
     });
     this.tweens.add({
       targets: view.label,
@@ -994,6 +999,20 @@ export class BattleScene extends Phaser.Scene {
     this.setUnitDirectionFrame(view, direction);
   }
 
+  private syncUnitMotion(unit: UnitData, view = this.unitViews.get(unit.id), direction = view?.direction) {
+    if (!view || !direction) {
+      return;
+    }
+
+    view.direction = direction;
+    if (this.actedUnitIds.has(unit.id) || unit.hp <= 0) {
+      this.stopUnitWalk(view, direction);
+      return;
+    }
+
+    this.playUnitWalk(view, direction);
+  }
+
   private setUnitDirectionFrame(view: UnitView, direction: UnitDirection) {
     view.sprite.setTexture(view.textureBase, this.unitFrameIndex(direction));
     view.sprite.setFlipX(false);
@@ -1501,7 +1520,9 @@ export class BattleScene extends Phaser.Scene {
         maxHp: unit.maxHp,
         x: unit.x,
         y: unit.y,
-        acted: this.actedUnitIds.has(unit.id)
+        acted: this.actedUnitIds.has(unit.id),
+        animating: this.unitViews.get(unit.id)?.sprite.anims.isPlaying ?? false,
+        animationKey: this.unitViews.get(unit.id)?.sprite.anims.currentAnim?.key ?? null
       })),
       bonds: Array.from(this.bondStates.values()).map((bond) => ({
         id: bond.id,