Initial pass at Golden Pack.

web/src/components/BattlePhase.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 import { createPortal } from 'react-dom'
-import type { BattleEvent, Card, ClientMessage, GameView } from '../types'
+import type { BattleEvent, Card, ClientMessage, GameView, PendingBattleDecision } from '../types'
 import { CardView } from './CardView'
 import { DiceRoll, ROLL_MS } from './DiceRoll'
 
@@ -52,6 +52,8 @@ const EVENT_MS: Record<BattleEvent['type'], number> = {
   heal: 900,
   setaside: 700,
   release: 500,
+  trumpet: 800,
+  prevent: 900,
 }
 
 const appleCount = (foods: Card[]) => foods.filter((f) => f.food === 'apple').length
@@ -86,6 +88,25 @@ function replay(events: BattleEvent[], stackSizes: number[], upto: number): Side
         break
       case 'reveal': {
         const s = sides[ev.seat!]
+        // The Golden Retriever is summoned straight into play, not flipped off
+        // the deck, so it doesn't decrement the stack.
+        if (ev.card?.name === 'Golden Retriever') {
+          const trumpets = ev.count ?? 0
+          s.unit = {
+            card: ev.card!,
+            // Show the Trumpets that powered it, fanned like food tokens.
+            foods: Array.from({ length: trumpets }, (_, i) => ({
+              id: `${ev.card!.id}-t${i}`,
+              kind: 'food' as const,
+              name: 'Trumpet',
+              food: 'trumpet',
+            })),
+            bonus: 0,
+            damage: 0,
+            dying: false,
+          }
+          break
+        }
         s.stack--
         const card = ev.card!
         if (card.kind === 'food') {
@@ -164,6 +185,14 @@ function replay(events: BattleEvent[], stackSizes: number[], upto: number): Side
       }
       case 'shield':
         break // pure animation; no state change
+      case 'trumpet':
+        break // pure animation; the pool isn't drawn on the board
+      case 'prevent': {
+        // Cone Snail shaved damage off the hit; the reduced total rides along.
+        const u = sides[ev.seat!].unit
+        if (u) u.damage = ev.damageAfter ?? u.damage
+        break
+      }
       case 'setaside':
         if (ev.card) sides[ev.seat!].setAside.push(ev.card)
         break
@@ -194,6 +223,11 @@ function unitPop(ev: BattleEvent | null, seat: number, events: BattleEvent[], st
     }
     case 'shield':
       return ev.seat === seat ? '🛡️' : null
+    case 'prevent':
+      return ev.seat === seat ? `🛡️ −${ev.count}` : null
+    case 'trumpet':
+      if (ev.seat !== seat) return null
+      return (ev.count ?? 0) >= 0 ? `🎺 +${ev.count}` : `🎺 ${ev.count}`
     case 'eat':
       return ev.seat === seat ? '🍎' : null
     case 'heal':
@@ -519,37 +553,94 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
           )
         })()}
 
-      {done && (
-        <div className={`battle-result ${draw ? 'is-draw' : won ? 'is-win' : 'is-loss'}`}>
-          <div className="battle-result-title">
-            {draw ? 'Draw!' : won ? 'Victory!' : 'Defeat…'}
-          </div>
-          {!draw && (
-            <div className="battle-result-sub">
-              {view.players[battle.winnerSeat]?.name} wins{' '}
-              {'🏆'.repeat(battle.trophies)}
+      {done && view.pendingBattle ? (
+        <BattleDecision
+          pd={view.pendingBattle}
+          youSeat={youSeat}
+          oppName={opp?.name ?? 'Opponent'}
+          send={send}
+        />
+      ) : (
+        done && (
+          <div className={`battle-result ${draw ? 'is-draw' : won ? 'is-win' : 'is-loss'}`}>
+            <div className="battle-result-title">
+              {draw ? 'Draw!' : won ? 'Victory!' : 'Defeat…'}
             </div>
-          )}
-          {draw && <div className="battle-result-sub">No trophies awarded</div>}
-          {acked ? (
-            <p className="muted">Waiting for opponent…</p>
-          ) : (
-            <button
-              className="btn btn-primary btn-big"
-              onClick={() => {
-                setAcked(true)
-                send({ type: 'ready' })
-              }}
-            >
-              {battle.round >= view.maxRounds ? 'See final results' : 'Next round →'}
-            </button>
-          )}
-        </div>
+            {!draw && (
+              <div className="battle-result-sub">
+                {view.players[battle.winnerSeat]?.name} wins{' '}
+                {'🏆'.repeat(battle.trophies)}
+              </div>
+            )}
+            {draw && <div className="battle-result-sub">No trophies awarded</div>}
+            {acked ? (
+              <p className="muted">Waiting for opponent…</p>
+            ) : (
+              <button
+                className="btn btn-primary btn-big"
+                onClick={() => {
+                  setAcked(true)
+                  send({ type: 'ready' })
+                }}
+              >
+                {battle.round >= view.maxRounds ? 'See final results' : 'Next round →'}
+              </button>
+            )}
+          </div>
+        )
       )}
     </div>
   )
 }
 
+// BattleDecision is the mid-battle prompt (Golden pack: Nurse Shark). The
+// deciding player picks how many Trumpets to spend; the other player waits.
+function BattleDecision({
+  pd,
+  youSeat,
+  oppName,
+  send,
+}: {
+  pd: PendingBattleDecision
+  youSeat: number
+  oppName: string
+  send: (msg: ClientMessage) => void
+}) {
+  const [sent, setSent] = useState(false)
+  // Reset when a fresh decision arrives (e.g. a second Nurse Shark).
+  useEffect(() => setSent(false), [pd.seat, pd.trumpets, pd.max])
+  if (pd.seat !== youSeat) {
+    return (
+      <div className="battle-result">
+        <p className="muted">{oppName} is deciding {pd.petName}…</p>
+      </div>
+    )
+  }
+  return (
+    <div className="battle-result battle-decision">
+      <div className="battle-result-title">{pd.petName}</div>
+      <div className="battle-result-sub">
+        Spend Trumpets to throw 2 🪨 each — you hold {pd.trumpets} 🎺
+      </div>
+      <div className="battle-decision-options">
+        {Array.from({ length: pd.max + 1 }, (_, n) => (
+          <button
+            key={n}
+            className="btn btn-primary"
+            disabled={sent}
+            onClick={() => {
+              setSent(true)
+              send({ type: 'battleChoose', value: n })
+            }}
+          >
+            {n === 0 ? 'Spend none' : `${n} 🎺 → ${2 * n} 🪨`}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 // clashDamageTaken computes how much damage a seat's pet took in the clash
 // at event index `idx` (its damage total there minus its total beforehand).
 function clashDamageTaken(events: BattleEvent[], idx: number, seat: number): number {