71 lines
3.7 KiB
TypeScript
71 lines
3.7 KiB
TypeScript
'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>;
|
|
}
|