84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
'use client';
|
||
import { useState } from 'react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { HelpTip } from './help-tip';
|
||
import type { Action, GameView } from '@/game/engine';
|
||
import { territory } from '@/game/board';
|
||
|
||
export function ChoamStorm({
|
||
game: g,
|
||
act,
|
||
busy,
|
||
}: {
|
||
game: GameView;
|
||
act: (a: Action) => void;
|
||
busy: boolean;
|
||
}) {
|
||
const [selected, setSelected] = useState('');
|
||
const decision = g.decision?.kind === 'choamStorm' ? g.decision : null;
|
||
if (!decision || decision.player !== g.me) return null;
|
||
const card = g.choamWorthless?.cards.find((c) => c.name === 'Jubba Cloak');
|
||
const choice =
|
||
decision.territories.find((t) => t.territory === selected) ??
|
||
decision.territories[0];
|
||
return (
|
||
<section className="notice">
|
||
<h3>
|
||
Jubba Cloak <HelpTip topic="choamWorthless" />
|
||
</h3>
|
||
<p>
|
||
Protect your own forces in one territory from this storm movement. Spice
|
||
and other factions’ forces remain exposed. Karama may cancel this
|
||
effect.
|
||
</p>
|
||
{decision.protected.length > 0 && (
|
||
<p>
|
||
Protected:{' '}
|
||
{decision.protected.map((t) => territory(t).name).join(', ')}.
|
||
</p>
|
||
)}
|
||
<label>
|
||
Threatened territory{' '}
|
||
<select
|
||
value={choice?.territory ?? ''}
|
||
onChange={(e) => setSelected(e.target.value)}
|
||
>
|
||
{decision.territories.map((t) => (
|
||
<option key={t.territory} value={t.territory}>
|
||
{territory(t.territory).name} · {t.amount} forces · sectors{' '}
|
||
{t.sectors.join(', ')}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
{card ? (
|
||
<Button
|
||
disabled={busy || !choice}
|
||
onClick={() =>
|
||
act({
|
||
type: 'card',
|
||
mode: 'choam',
|
||
card: card.id,
|
||
territory: choice.territory,
|
||
})
|
||
}
|
||
>
|
||
Protect this territory
|
||
</Button>
|
||
) : (
|
||
<p className="fine">
|
||
No available Jubba Cloak play. Continue when ready to accept the
|
||
remaining losses.
|
||
</p>
|
||
)}
|
||
<Button
|
||
variant="outline"
|
||
disabled={busy}
|
||
onClick={() => act({ type: 'decision', decline: true })}
|
||
>
|
||
Continue storm
|
||
</Button>
|
||
</section>
|
||
);
|
||
}
|