Add random faction deal and prediction draft

components/faction-allocation.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { FACTIONS } from '@/game/catalog';
+import type { Action, GameView } from '@/game/engine';
+import { Button } from '@/components/ui/button';
+
+/** Lobby allocation uses public seat identities only. The engine owns the
+ * randomized order and validates every pick again at commitment. */
+export function FactionAllocation({ game, send, busy }: {
+  game: GameView;
+  send: (action: Action) => Promise<void>;
+  busy: boolean;
+}) {
+  if (game.status !== 'lobby') return null;
+  const draft = game.factionDraft;
+  const isHost = game.host === game.me;
+  const seatName = (id: string) => {
+    const player = game.players.find((candidate) => candidate.id === id);
+    return player ? `${player.name}${player.bot ? ' (AI)' : ''}` : 'Unknown player';
+  };
+  if (!draft) return <section className="notice" aria-label="Faction allocation">
+    <h2>Choose factions</h2>
+    <p>Players can choose their own factions. The host can also randomly deal factions or start a prediction-card draft.</p>
+    {isHost && <>
+      <p className="fine">Random dealing changes the current choices immediately. Draft choices replace the current factions only after everyone has picked. Either option clears human readiness.</p>
+      {game.players.length < 2 && <p className="fine">At least two faction seats are needed to allocate factions.</p>}
+      <div className="flex flex-wrap gap-2">
+        <Button type="button" disabled={busy || game.players.length < 2} onClick={() => void send({ type: 'factionAllocation', mode: 'random' })}>
+          Deal random factions
+        </Button>
+        <Button type="button" variant="outline" disabled={busy || game.players.length < 2} onClick={() => void send({ type: 'factionAllocation', mode: 'draft' })}>
+          Draft factions by prediction card
+        </Button>
+      </div>
+    </>}
+  </section>;
+
+  const next = draft.order[draft.picks.length];
+  const picked = new Map(draft.picks.map((pick) => [pick.player, pick.faction]));
+  const used = new Set(draft.picks.map((pick) => pick.faction));
+  const available = FACTIONS.filter((faction) =>
+    (faction.expansion === 'base' || game.expansions.includes(faction.expansion)) && !used.has(faction.id));
+  const isTurn = next?.player === game.me;
+  return <section className="notice" aria-label="Faction draft">
+    <h2>Prediction-card faction draft</h2>
+    <p>Highest prediction card chooses first. Existing factions remain in place until every seat has picked; other lobby changes wait for the draft to finish.</p>
+    <ol>
+      {draft.order.map((entry) => {
+        const choice = picked.get(entry.player);
+        const faction = FACTIONS.find((item) => item.id === choice);
+        return <li key={entry.player}>
+          {seatName(entry.player)} · prediction {entry.card}: {faction ? faction.name : next?.player === entry.player ? 'choosing now' : 'waiting'}
+        </li>;
+      })}
+    </ol>
+    {isTurn ? <>
+      <h3>Choose your faction</h3>
+      <p className="fine">Choose one of the remaining factions. Each faction can be chosen only once.</p>
+      <div className="flex flex-wrap gap-2">
+        {available.map((faction) => <Button key={faction.id} type="button" variant="outline" disabled={busy}
+          onClick={() => void send({ type: 'factionDraftPick', event: draft.event, faction: faction.id })}>
+          {faction.name}
+        </Button>)}
+      </div>
+    </> : next && <p>Waiting for {seatName(next.player)} to choose a faction{game.players.find((player) => player.id === next.player)?.bot ? '; the AI will choose automatically' : ''}.</p>}
+    {isHost && <Button type="button" variant="outline" disabled={busy} onClick={() => void send({ type: 'factionDraftCancel', event: draft.event })}>
+      Cancel faction draft
+    </Button>}
+  </section>;
+}