96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import type { Action, GameView } from '@/game/engine';
|
|
import { CardInspector, CardRules } from './card-inspector';
|
|
import { Button } from './ui/button';
|
|
|
|
export function SemutaReaction({
|
|
game,
|
|
act,
|
|
busy,
|
|
}: {
|
|
game: GameView;
|
|
act: (action: Action) => void;
|
|
busy: boolean;
|
|
}) {
|
|
const reaction = game.semutaReaction;
|
|
if (!reaction) return null;
|
|
|
|
return (
|
|
<section aria-label="Semuta Drug response" className="notice min-w-0 space-y-3">
|
|
<h4>Fresh Treachery discard</h4>
|
|
<p className="fine">
|
|
Response event <code>{reaction.event}</code>
|
|
</p>
|
|
{reaction.stage === 'offer' ? (
|
|
<>
|
|
<p>A Treachery card was just discarded. Continue when you are ready.</p>
|
|
{reaction.blocked && <p className="fine">{reaction.blocked}</p>}
|
|
{reaction.passBlocked && <p className="fine">{reaction.passBlocked}</p>}
|
|
{reaction.passed ? (
|
|
<p aria-live="polite">You continued. Waiting for other seats.</p>
|
|
) : (
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
className="game-action min-h-11 whitespace-normal"
|
|
disabled={busy || !!reaction.passBlocked}
|
|
onClick={() => {
|
|
if (!busy && !reaction.passBlocked) act({ type: 'semutaPass', event: reaction.event });
|
|
}}
|
|
>
|
|
Continue
|
|
</Button>
|
|
{reaction.canCommit && (
|
|
<Button
|
|
className="game-action min-h-11 whitespace-normal"
|
|
disabled={busy}
|
|
onClick={() => {
|
|
if (!busy) act({ type: 'semutaCommit', event: reaction.event });
|
|
}}
|
|
>
|
|
Commit Semuta Drug
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : reaction.candidates.length ? (
|
|
<>
|
|
<p>
|
|
You committed Semuta Drug. Choose one eligible freshly discarded
|
|
Treachery card to claim. This choice cannot be declined or canceled.
|
|
</p>
|
|
<div
|
|
className="grid min-w-0 gap-4"
|
|
style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 16rem), 1fr))' }}
|
|
>
|
|
{reaction.candidates.map((card) => (
|
|
<article
|
|
key={card.id}
|
|
className="flex min-w-0 flex-col gap-3 rounded-lg border border-[#65644b] p-4"
|
|
>
|
|
<h5 className="m-0 break-words font-serif text-lg">{card.name}</h5>
|
|
<p className="fine">Card ID: {card.id}</p>
|
|
<CardRules card={card} />
|
|
<CardInspector card={card} />
|
|
<Button
|
|
className="game-action min-h-11 whitespace-normal"
|
|
disabled={busy}
|
|
onClick={() => {
|
|
if (!busy)
|
|
act({ type: 'semutaSelect', event: reaction.event, card: card.id });
|
|
}}
|
|
>
|
|
Claim {card.name} ({card.id})
|
|
</Button>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p aria-live="polite">Waiting for the Semuta Drug claim to finish.</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|