Improved battle animations.

web/src/components/BattlePhase.tsx

@@ -293,6 +293,20 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
     const summoning = !done && lastEvent?.type === 'summon' && lastEvent.seat === seat
     const milling = !done && lastEvent?.type === 'mill' && lastEvent.seat === seat
     const revealing = !done && lastEvent?.type === 'reveal' && lastEvent.seat === seat
+    // A food (apple) that just landed on this side's fan — reveal off the deck or
+    // a Battle Prep hand-out — animates in from the deck rather than popping.
+    const newFoodId =
+      !done &&
+      lastEvent?.seat === seat &&
+      (lastEvent.type === 'prep' ||
+        (lastEvent.type === 'reveal' && lastEvent.card?.kind === 'food'))
+        ? lastEvent.card?.id
+        : null
+    // A pet just set aside rises up from the arena into the set-aside row.
+    const newSetAsideId =
+      !done && lastEvent?.type === 'setaside' && lastEvent.seat === seat
+        ? lastEvent.card?.id
+        : null
     // Hold the −N / miss! pop until the dice settle.
     const pop = done || (showingRock && !rockSettled) ? null : unitPop(lastEvent, seat, events, step)
 
@@ -344,7 +358,9 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
         {s.setAside.map((c) => (
           <div
             key={c.id}
-            className={`setaside-card ${s.leaving.includes(c.id) ? 'is-leaving' : ''}`}
+            className={`setaside-card ${s.leaving.includes(c.id) ? 'is-leaving' : ''} ${
+              c.id === newSetAsideId ? 'setaside-in' : ''
+            }`}
           >
             <CardView card={c} size="sm" />
           </div>
@@ -361,7 +377,9 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
         {foods.map((f, i) => (
           <div
             key={f.id}
-            className={`food-fan-card ${s.leaving.includes(f.id) ? 'is-leaving' : ''}`}
+            className={`food-fan-card ${s.leaving.includes(f.id) ? 'is-leaving' : ''} ${
+              f.id === newFoodId ? `food-in food-in-${dir}` : ''
+            }`}
             style={{ zIndex: i + 1 }}
           >
             <CardView card={f} size="sm" />
@@ -381,7 +399,7 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
               'battle-unit',
               clashing || clashDying ? `clash-${dir}` : '',
               s.unit.dying ? 'unit-dying' : '',
-              revealing ? 'unit-reveal' : '',
+              revealing ? `unit-reveal unit-reveal-${dir}` : '',
             ]
               .filter(Boolean)
               .join(' ')}