Quintine
28ba1618ba
Connect typed Homeworld custody, transport, battle, income, revival and Caladan reinforcement flows with private multiplayer recovery and controls. Preserve the optimized test workflow and keep unfinished rules modes gated. Verified with 3682 offline tests, typecheck, lint, production build and 40 HTTP tests; existing saved games remain unchanged.
341 lines
11 KiB
TypeScript
341 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { useId, useState } from 'react';
|
||
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
|
||
import { Eye, X } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
Dialog,
|
||
DialogClose,
|
||
DialogDescription,
|
||
DialogOverlay,
|
||
DialogPortal,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from '@/components/ui/dialog';
|
||
import type { Action, GameView } from '@/game/engine';
|
||
import type { AmbassadorToken } from '@/game/ecaz-ambassadors';
|
||
import {
|
||
AMBASSADOR_COMMON_GUIDANCE,
|
||
AMBASSADOR_REFERENCE,
|
||
} from '@/game/ambassador-reference';
|
||
import { TERRITORIES } from '@/game/board';
|
||
import { faction } from '@/game/catalog';
|
||
|
||
export const AMBASSADOR_COVERAGE =
|
||
'Development coverage: Ambassador placement, Ecaz’s direct Duke acquisition and consensual alliance, Emperor, Atreides, Harkonnen, CHOAM, Ixian, Richese, Fremen and Guild entry effects are supported, plus Bene Gesserit copies of those eight ordinary effects. Duke loan choices, other effects and some competing arrival reactions remain unfinished; full Ecaz starts remain disabled.';
|
||
function tokenLocation(token: AmbassadorToken) {
|
||
if (token.zone === 'placed')
|
||
return `Placed in ${TERRITORIES.find((t) => t.id === token.location)?.name ?? 'a stronghold'}`;
|
||
return {
|
||
pool: 'Unused pool',
|
||
supply: 'Available supply',
|
||
used: 'Triggered · set aside',
|
||
removed: 'Permanently removed',
|
||
}[token.zone];
|
||
}
|
||
function AmbassadorArt({
|
||
token,
|
||
large = false,
|
||
}: {
|
||
token: AmbassadorToken;
|
||
large?: boolean;
|
||
}) {
|
||
const identity = faction(token.effect);
|
||
return (
|
||
<svg
|
||
viewBox="0 0 120 120"
|
||
className={large ? 'mx-auto my-5 size-40 max-w-full' : 'size-14 shrink-0'}
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
>
|
||
<circle
|
||
cx="60"
|
||
cy="60"
|
||
r="55"
|
||
fill="#182725"
|
||
stroke={identity.color}
|
||
strokeWidth="4"
|
||
/>
|
||
<circle cx="60" cy="60" r="45" fill="none" stroke="#dac594" />
|
||
<path
|
||
d="M60 9l5 10-5 10-5-10zM60 91l5 10-5 10-5-10zM9 60l10-5 10 5-10 5zM91 60l10-5 10 5-10 5z"
|
||
fill="#dac594"
|
||
/>
|
||
<text
|
||
x="60"
|
||
y="75"
|
||
textAnchor="middle"
|
||
fill="#f2dfb9"
|
||
fontFamily="Georgia,serif"
|
||
fontSize="40"
|
||
>
|
||
{identity.sigil}
|
||
</text>
|
||
</svg>
|
||
);
|
||
}
|
||
/** Inspection accepts one already-public token; no private deck or game state is consulted. */
|
||
export function AmbassadorInspector({ token }: { token: AmbassadorToken }) {
|
||
const guide = AMBASSADOR_REFERENCE[token.effect];
|
||
const status = tokenLocation(token);
|
||
return (
|
||
<Dialog>
|
||
<DialogTrigger
|
||
render={
|
||
<Button
|
||
variant="outline"
|
||
className="h-auto min-h-11 w-full min-w-0 justify-start gap-3 whitespace-normal px-3 py-3 text-left motion-reduce:transition-none"
|
||
/>
|
||
}
|
||
aria-label={`Inspect ${guide.name} Ambassador: ${status}`}
|
||
>
|
||
<AmbassadorArt token={token} />
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block font-serif text-base">{guide.name}</span>
|
||
<span className="block text-xs leading-5">{status}</span>
|
||
</span>
|
||
<Eye aria-hidden="true" className="size-4 shrink-0" />
|
||
</DialogTrigger>
|
||
<DialogPortal>
|
||
<DialogOverlay className="bg-black/75 motion-reduce:animate-none" />
|
||
<DialogPrimitive.Popup className="fixed left-1/2 top-1/2 z-50 max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-2xl border border-[#8c815c] bg-[#17231f] p-5 text-[#e8e9dc] shadow-2xl outline-none sm:p-7">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<DialogTitle className="m-0 font-serif text-2xl text-[#efd9a8]">
|
||
{guide.name} Ambassador
|
||
</DialogTitle>
|
||
<DialogDescription className="mt-2 text-sm leading-6">
|
||
Gameplay guide · {status}
|
||
</DialogDescription>
|
||
</div>
|
||
<DialogClose
|
||
render={
|
||
<Button
|
||
variant="ghost"
|
||
className="min-h-11 min-w-11 shrink-0 motion-reduce:transition-none"
|
||
/>
|
||
}
|
||
aria-label="Close Ambassador inspection"
|
||
>
|
||
<X aria-hidden="true" />
|
||
</DialogClose>
|
||
</div>
|
||
<AmbassadorArt token={token} large />
|
||
<p className="text-base leading-7">{guide.gameplay}</p>
|
||
<h3 className="mt-6 font-serif text-xl text-[#efd9a8]">
|
||
Using Ambassadors
|
||
</h3>
|
||
{AMBASSADOR_COMMON_GUIDANCE.map((paragraph) => (
|
||
<p key={paragraph} className="text-sm leading-6">
|
||
{paragraph}
|
||
</p>
|
||
))}
|
||
<p className="mt-5 border-t border-[#68705a] pt-4 text-sm leading-6">
|
||
{AMBASSADOR_COVERAGE}
|
||
</p>
|
||
<p className="text-xs leading-5">
|
||
Original illustration and gameplay explanation.
|
||
</p>
|
||
</DialogPrimitive.Popup>
|
||
</DialogPortal>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
export function AmbassadorSupply({ game }: { game: GameView }) {
|
||
if (!game.ambassadors) return null;
|
||
const supplyCount = game.ambassadors.tokens.filter(
|
||
(token) => token.zone === 'supply',
|
||
).length;
|
||
const placedCount = game.ambassadors.tokens.filter(
|
||
(token) => token.zone === 'placed',
|
||
).length;
|
||
const zones: AmbassadorToken['zone'][] = [
|
||
'supply',
|
||
'placed',
|
||
'used',
|
||
'removed',
|
||
'pool',
|
||
];
|
||
const names = {
|
||
supply: 'Available supply',
|
||
placed: 'On the board',
|
||
used: 'Triggered this group',
|
||
removed: 'Permanently removed',
|
||
pool: 'Unused pool',
|
||
};
|
||
return (
|
||
<details className="notice min-w-0">
|
||
<summary className="min-h-11 cursor-pointer py-2 leading-7 focus-visible:outline-2 focus-visible:outline-offset-2">
|
||
<span className="font-serif text-xl">Ecaz Ambassadors</span>{' '}
|
||
<span className="text-sm">
|
||
· {supplyCount} in supply · {placedCount} placed · Inspect tokens
|
||
</span>
|
||
</summary>
|
||
<p className="text-sm leading-6">
|
||
Inspect any token to read its effect and current location.
|
||
</p>
|
||
{zones.map((zone) => {
|
||
const tokens = game.ambassadors!.tokens.filter(
|
||
(token) => token.zone === zone,
|
||
);
|
||
if (!tokens.length) return null;
|
||
return (
|
||
<div key={zone} className="mt-4">
|
||
<h4 className="mb-2 text-sm font-semibold">
|
||
{names[zone]} · {tokens.length}
|
||
</h4>
|
||
<div className="grid min-w-0 gap-2 sm:grid-cols-2">
|
||
{tokens.map((token) => (
|
||
<AmbassadorInspector token={token} key={token.id} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
<p className="mt-4 text-sm leading-6">{AMBASSADOR_COVERAGE}</p>
|
||
</details>
|
||
);
|
||
}
|
||
|
||
export function EcazPlacement({
|
||
game,
|
||
act,
|
||
busy,
|
||
}: {
|
||
game: GameView;
|
||
act: (action: Action) => void;
|
||
busy: boolean;
|
||
}) {
|
||
const id = useId();
|
||
const [selectedToken, setSelectedToken] = useState('');
|
||
const [selectedTerritory, setSelectedTerritory] = useState('');
|
||
const me = game.players.find((player) => player.id === game.me);
|
||
const state = game.ambassadors;
|
||
if (
|
||
!state ||
|
||
me?.faction !== 'ecaz' ||
|
||
game.decision?.kind !== 'ecazPlacement' ||
|
||
game.decision.player !== me.id
|
||
)
|
||
return null;
|
||
const supply = state.tokens.filter((token) => token.zone === 'supply');
|
||
const destinations = TERRITORIES.filter(
|
||
(territory) =>
|
||
territory.type === 'stronghold' &&
|
||
!territory.sectors.includes(game.storm) &&
|
||
!state.tokens.some(
|
||
(token) => token.zone === 'placed' && token.location === territory.id,
|
||
),
|
||
);
|
||
const token = supply.find((candidate) => candidate.id === selectedToken);
|
||
const destination = destinations.find(
|
||
(candidate) => candidate.id === selectedTerritory,
|
||
);
|
||
const affordable = (me.spice ?? 0) >= state.nextCost;
|
||
const disabled =
|
||
busy || state.blocked || !token || !destination || !affordable;
|
||
return (
|
||
<section
|
||
className="notice flex min-w-0 flex-col gap-3"
|
||
aria-label="Place an Ecaz Ambassador"
|
||
>
|
||
<h3 className="m-0 font-serif text-xl">Place an Ambassador</h3>
|
||
<p className="m-0 text-sm leading-6">
|
||
Next placement: <strong>{state.nextCost} spice</strong> · Your available
|
||
spice: {me.spice ?? 0}. Each placement this turn increases the next cost
|
||
by one.
|
||
</p>
|
||
<label htmlFor={`${id}-token`}>
|
||
Ambassador
|
||
<select
|
||
id={`${id}-token`}
|
||
className="min-h-11 w-full"
|
||
value={token?.id ?? ''}
|
||
disabled={busy || state.blocked}
|
||
onChange={(event) => setSelectedToken(event.target.value)}
|
||
>
|
||
<option value="">Choose from your supply</option>
|
||
{supply.map((candidate) => (
|
||
<option key={candidate.id} value={candidate.id}>
|
||
{AMBASSADOR_REFERENCE[candidate.effect].name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
{token && (
|
||
<>
|
||
<p className="m-0 text-sm leading-6">
|
||
{AMBASSADOR_REFERENCE[token.effect].gameplay}
|
||
</p>
|
||
<AmbassadorInspector token={token} />
|
||
</>
|
||
)}
|
||
<label htmlFor={`${id}-territory`}>
|
||
Stronghold
|
||
<select
|
||
id={`${id}-territory`}
|
||
className="min-h-11 w-full"
|
||
value={destination?.id ?? ''}
|
||
disabled={busy || state.blocked}
|
||
onChange={(event) => setSelectedTerritory(event.target.value)}
|
||
>
|
||
<option value="">Choose a stronghold outside the storm</option>
|
||
{destinations.map((candidate) => (
|
||
<option key={candidate.id} value={candidate.id}>
|
||
{candidate.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
{state.blocked && (
|
||
<p className="m-0 text-sm leading-6">
|
||
Ambassador placement is blocked for this turn.
|
||
</p>
|
||
)}
|
||
{!supply.length && (
|
||
<p className="m-0 text-sm leading-6">
|
||
No Ambassador is available in your supply.
|
||
</p>
|
||
)}
|
||
{!destinations.length && (
|
||
<p className="m-0 text-sm leading-6">
|
||
No ordinary stronghold is currently available for an Ambassador.
|
||
</p>
|
||
)}
|
||
{!affordable && (
|
||
<p className="m-0 text-sm leading-6">
|
||
You need {state.nextCost - (me.spice ?? 0)} more spice for this
|
||
placement.
|
||
</p>
|
||
)}
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
className="min-h-11 whitespace-normal motion-reduce:transition-none"
|
||
disabled={disabled}
|
||
onClick={() => {
|
||
if (!disabled && token && destination)
|
||
act({
|
||
type: 'decision',
|
||
token: token.id,
|
||
territory: destination.id,
|
||
});
|
||
}}
|
||
>
|
||
Place Ambassador · {state.nextCost} spice
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
className="min-h-11 whitespace-normal motion-reduce:transition-none"
|
||
disabled={busy}
|
||
onClick={() => act({ type: 'decision', decline: true })}
|
||
>
|
||
Finish Ambassador placement
|
||
</Button>
|
||
</div>
|
||
<p className="m-0 text-sm leading-6">{AMBASSADOR_COVERAGE}</p>
|
||
</section>
|
||
);
|
||
}
|