Initial commit.

2026-07-22 23:07:29 -04:00
commit 612a4e6227
38 changed files with 6106 additions and 0 deletions
@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { BattleEvent, BattleUnit, ClientMessage, GameView } from '../types'
+import { CardView } from './CardView'
+
+interface Props {
+  view: GameView
+  send: (msg: ClientMessage) => void
+}
+
+const STEP_MS = 1400
+
+interface UnitState {
+  unit: BattleUnit
+  index: number
+  damage: number
+  dead: boolean // died in an earlier step (gone)
+  dying: boolean // died in the step just played (animate out)
+}
+
+// applyEvents replays the first `step` events onto a seat's lineup.
+function applyEvents(view: GameView, seat: number, step: number): UnitState[] {
+  const battle = view.battle!
+  const events = battle.events ?? []
+  const states: UnitState[] = (battle.lineups[seat] ?? []).map((u, i) => ({
+    unit: u,
+    index: i,
+    damage: 0,
+    dead: false,
+    dying: false,
+  }))
+  const seatPos = seat === 0 ? 0 : 1
+  for (let k = 0; k < step && k < events.length; k++) {
+    const ev = events[k]
+    const s = states[ev.units[seatPos]]
+    if (!s) continue
+    s.damage = ev.damage[seatPos]
+    if (ev.died[seatPos]) {
+      s.dying = k === step - 1
+      s.dead = k < step - 1
+    }
+  }
+  return states
+}
+
+// BattlePhase plays back the battle log: front pets clash, damage numbers
+// fly, the fallen fade out, then the round result lands.
+export function BattlePhase({ view, send }: Props) {
+  const battle = view.battle!
+  const events = battle.events ?? []
+  const [step, setStep] = useState(0)
+  const [acked, setAcked] = useState(false)
+  const done = step >= events.length
+
+  useEffect(() => {
+    if (done) return
+    const t = window.setTimeout(() => setStep((s) => s + 1), STEP_MS)
+    return () => window.clearTimeout(t)
+  }, [step, done])
+
+  const youSeat = view.youSeat
+  const oppSeat = view.players.find((p) => p.seat !== youSeat)?.seat ?? 1
+
+  const yourLine = useMemo(
+    () => applyEvents(view, youSeat, step),
+    [view, youSeat, step],
+  )
+  const oppLine = useMemo(
+    () => applyEvents(view, oppSeat, step),
+    [view, oppSeat, step],
+  )
+
+  const lastEvent = step > 0 ? events[step - 1] : null
+
+  function renderSide(line: UnitState[], side: 'left' | 'right', seat: number) {
+    const seatPos = seat === 0 ? 0 : 1
+    const frontIdx = line.find((s) => !s.dead && !s.dying)?.index
+    return (
+      <div className={`battle-side battle-side-${side}`}>
+        {line
+          .filter((s) => !s.dead)
+          .map((s) => {
+            const isFront = s.index === frontIdx
+            const clashing =
+              !done && lastEvent !== null && lastEvent.units[seatPos] === s.index
+            return (
+              <div
+                key={`${s.unit.card.id}-${clashing ? step : 'idle'}`}
+                className={[
+                  'battle-unit',
+                  clashing ? `clash-${side}` : '',
+                  s.dying ? 'unit-dying' : '',
+                  isFront && !s.dying ? 'is-front' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                <CardView
+                  card={s.unit.card}
+                  bonus={s.unit.bonus}
+                  damage={s.damage}
+                  dead={s.dying}
+                />
+                {clashing && (
+                  <div className="damage-pop">
+                    −{lastEvent!.damage[seatPos] -
+                      prevDamage(events, step - 1, seatPos, s.index)}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    )
+  }
+
+  const you = view.players[youSeat]
+  const opp = view.players[oppSeat]
+  const won = battle.winnerSeat === youSeat
+  const draw = battle.winnerSeat < 0
+
+  return (
+    <div className="battle">
+      <div className="battle-header">
+        <h2>Battle! Round {battle.round}</h2>
+        {!done && (
+          <button className="btn btn-ghost btn-sm" onClick={() => setStep(events.length)}>
+            Skip ⏭
+          </button>
+        )}
+      </div>
+
+      <div className="battle-names">
+        <span>{you?.name} (you)</span>
+        <span className="battle-vs">VS</span>
+        <span>{opp?.name}</span>
+      </div>
+
+      <div className="battlefield">
+        {renderSide(yourLine, 'left', youSeat)}
+        <div className="battle-center" aria-hidden>
+          ⚡
+        </div>
+        {renderSide(oppLine, 'right', oppSeat)}
+      </div>
+
+      {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)}
+            </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>
+  )
+}
+
+// prevDamage finds the damage a unit had before the given event, so the
+// floating number shows just this clash's hit.
+function prevDamage(
+  events: BattleEvent[],
+  upto: number,
+  seatPos: number,
+  unitIndex: number,
+): number {
+  let dmg = 0
+  for (let k = 0; k < upto; k++) {
+    const ev = events[k]
+    if (ev.units[seatPos] === unitIndex) dmg = ev.damage[seatPos]
+  }
+  return dmg
+}