57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
'use client';
|
||
|
||
import type { Action, GameView } from '@/game/engine';
|
||
import { Button } from './ui/button';
|
||
|
||
export function HomeworldEcazDuke({
|
||
game,
|
||
act,
|
||
busy,
|
||
}: {
|
||
game: GameView;
|
||
act: (action: Action) => void;
|
||
busy: boolean;
|
||
}) {
|
||
const offer = game.homeworldEcazDuke;
|
||
if (!offer || offer.occupier !== game.me) return null;
|
||
const blocked = offer.blocked ?? (!offer.event
|
||
? 'This Duke grant is not currently available.'
|
||
: !offer.recipients.length ? 'No eligible recipient is currently available.' : null);
|
||
const disabled = busy || blocked !== null;
|
||
return (
|
||
<section className="notice space-y-3" aria-label="Occupied Ecaz Duke grant">
|
||
<h3 className="font-serif text-xl">Occupied Ecaz: grant Duke Vidal</h3>
|
||
<p className="muted">
|
||
Provisional occupation benefit: grant the living shared Duke Vidal to
|
||
yourself or your reciprocal ally. The recipient may use him in one
|
||
battle, following the Duke’s ordinary lifecycle. Only Ecaz may revive him.
|
||
</p>
|
||
<p className="muted">
|
||
Provisional custody: this benefit does not release a captured Duke.
|
||
Captivity does not extend the original grant; a later return cannot
|
||
restore a grant that has ended.
|
||
</p>
|
||
{blocked !== null && (
|
||
<p className="notice" id="homeworld-ecaz-duke-unavailable">{blocked}</p>
|
||
)}
|
||
<div className="flex flex-wrap gap-2">
|
||
{offer.recipients.map((recipient) => (
|
||
<Button
|
||
key={recipient.id}
|
||
data-testid={`homeworld-ecaz-duke-${recipient.id}`}
|
||
className="game-action min-h-11 whitespace-normal"
|
||
disabled={disabled}
|
||
aria-describedby={blocked !== null ? 'homeworld-ecaz-duke-unavailable' : undefined}
|
||
onClick={() => {
|
||
if (!disabled && offer.event)
|
||
act({ type: 'homeworldDuke', event: offer.event, recipient: recipient.id });
|
||
}}
|
||
>
|
||
Grant Duke Vidal to {recipient.name}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|