33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useId, useState } from 'react';
|
|
import type { Action, GameView } from '@/game/engine';
|
|
|
|
/** The engine projects this opportunity only to the Emperor at a supported
|
|
* Guild timing decision. Its maximum already accounts for committed spice. */
|
|
export function EmperorTimingGift({ game, act, busy }: {
|
|
game: GameView;
|
|
act: (action: Action) => void;
|
|
busy: boolean;
|
|
}) {
|
|
const id = useId();
|
|
const [raw, setRaw] = useState('1');
|
|
const offer = game.emperorGuildTimingGift;
|
|
if (!offer) return null;
|
|
const amount = /^[1-9]\d*$/.test(raw) ? Number(raw) : NaN;
|
|
const canShare = !busy && Number.isSafeInteger(amount) && amount >= 1 && amount <= offer.maximum;
|
|
const recipient = game.players.find(player => player.id === offer.recipient)?.name ?? 'your ally';
|
|
|
|
return <section className="notice min-w-0 space-y-3 break-words" aria-label="Emperor spice gift">
|
|
<h3>Share spice with {recipient}</h3>
|
|
<p className="fine">The Guild timing decision resumes after the Karama response to your gift.</p>
|
|
<label htmlFor={`${id}-amount`}>Spice to share</label>
|
|
<input id={`${id}-amount`} type="number" inputMode="numeric" min={1} max={offer.maximum}
|
|
step={1} value={raw} disabled={busy} onChange={event => setRaw(event.target.value)} />
|
|
<button type="button" className="game-action" disabled={!canShare}
|
|
onClick={() => { if (canShare) act({type:'emperorGift', amount}); }}>
|
|
Share spice
|
|
</button>
|
|
</section>;
|
|
}
|