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>;
+}

components/two-player-controls.tsx

@@ -8,11 +8,12 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 
 export function TwoPlayerControls({
-  game, disabled, pendingEntry, entryRoom, entryProblem, retryDisabled,
+  game, disabled, draftLocked = false, pendingEntry, entryRoom, entryProblem, retryDisabled,
   onModeChange, onSwitch, onAdd, onRetry, onAddBot, onAddControlledBot,
 }: {
   game: GameView;
   disabled: boolean;
+  draftLocked?: boolean;
   pendingEntry: boolean;
   entryRoom?: string;
   entryProblem: string;
@@ -29,6 +30,7 @@ export function TwoPlayerControls({
   const [botChoice, setBotChoice] = useState('');
   const [botDifficulty, setBotDifficulty] = useState<Difficulty>('Medium');
   const mode = game.twoPlayerControllers;
+  const lobbyLocked = disabled || draftLocked;
   const controlled = game.controlledFactionSeats ?? [];
   const modeLocked = !!mode?.controllers.some((controller) => controller.seats.length > 1);
   const botController = mode?.controllers.find((controller) =>
@@ -46,7 +48,7 @@ export function TwoPlayerControls({
     <section className="notice" aria-label="Two-player faction controls">
       {game.status === 'lobby' && game.host === game.me && (
         <label className="checkbox-row">
-          <input type="checkbox" checked={!!mode} disabled={disabled || modeLocked} onChange={(event) => onModeChange(event.target.checked)} />
+          <input type="checkbox" checked={!!mode} disabled={lobbyLocked || modeLocked} onChange={(event) => onModeChange(event.target.checked)} />
           Two players, two factions each
         </label>
       )}
@@ -72,33 +74,33 @@ export function TwoPlayerControls({
         </label>}
         {game.status === 'lobby' && controlled.length === 1 && <form onSubmit={(event) => {
           event.preventDefault();
-          if (choice && name.trim() && available.some((item) => item.id === choice)) onAdd(name.trim(), choice);
+          if (!lobbyLocked && choice && name.trim() && available.some((item) => item.id === choice)) onAdd(name.trim(), choice);
         }}>
           <h3>Add your second faction</h3>
           <label htmlFor="second-faction-seat-name">Seat name</label>
-          <Input id="second-faction-seat-name" value={name} maxLength={32} disabled={disabled} onChange={(event) => setName(event.target.value)} />
-          <label>Faction <select value={choice} disabled={disabled} onChange={(event) => setChoice(event.target.value)}>
+          <Input id="second-faction-seat-name" value={name} maxLength={32} disabled={lobbyLocked} onChange={(event) => setName(event.target.value)} />
+          <label>Faction <select value={choice} disabled={lobbyLocked} onChange={(event) => setChoice(event.target.value)}>
             <option value="">Choose a faction</option>
             {available.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
           </select></label>
-          <Button type="submit" disabled={disabled || !name.trim() || !available.some((item) => item.id === choice)}>Add second faction</Button>
+          <Button type="submit" disabled={lobbyLocked || !name.trim() || !available.some((item) => item.id === choice)}>Add second faction</Button>
         </form>}
         {showBotForm && <form onSubmit={(event) => {
           event.preventDefault();
-          if (disabled || !available.some((item) => item.id === botChoice)) return;
+          if (lobbyLocked || !available.some((item) => item.id === botChoice)) return;
           if (botController) onAddControlledBot(botController.id, botChoice, botDifficulty);
           else if (canAddBotController) onAddBot(botChoice, botDifficulty);
         }}>
           <h3>{botController ? 'Add the AI player’s second faction' : 'Add an AI player'}</h3>
           <p className="fine">The AI plays each faction independently. Choose a difficulty for this faction; its settings can be changed in the lobby.</p>
-          <label>AI faction <select value={botChoice} disabled={disabled} onChange={(event) => setBotChoice(event.target.value)}>
+          <label>AI faction <select value={botChoice} disabled={lobbyLocked} onChange={(event) => setBotChoice(event.target.value)}>
             <option value="">Choose a faction</option>
             {available.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
           </select></label>
-          <label>AI difficulty <select value={botDifficulty} disabled={disabled} onChange={(event) => setBotDifficulty(event.target.value as Difficulty)}>
+          <label>AI difficulty <select value={botDifficulty} disabled={lobbyLocked} onChange={(event) => setBotDifficulty(event.target.value as Difficulty)}>
             {DIFFICULTIES.map((difficulty) => <option key={difficulty} value={difficulty}>{difficulty}</option>)}
           </select></label>
-          <Button type="submit" disabled={disabled || !available.some((item) => item.id === botChoice)}>{botController ? 'Add AI second faction' : 'Add AI player'}</Button>
+          <Button type="submit" disabled={lobbyLocked || !available.some((item) => item.id === botChoice)}>{botController ? 'Add AI second faction' : 'Add AI player'}</Button>
         </form>}
       </>}
       {pendingEntry && <div>