33 lines
2.0 KiB
TypeScript
33 lines
2.0 KiB
TypeScript
'use client';
|
|
import { TERRITORIES } from '@/game/board';
|
|
import { validMovementClaim, type MovementClaim } from '@/game/movement-promises';
|
|
import { Input } from './ui/input';
|
|
|
|
export function MovementClaimFields({ id, value, onChange }: {
|
|
id: string; value: MovementClaim; onChange: (value: MovementClaim) => void;
|
|
}) {
|
|
return <fieldset className="grid gap-2">
|
|
<legend>Ground-movement condition</legend>
|
|
<label htmlFor={`${id}-territory`}>Ground-movement destination</label>
|
|
<select id={`${id}-territory`} value={value.territory}
|
|
onChange={event => onChange({ territory: event.currentTarget.value, minimum: value.minimum })}>
|
|
{TERRITORIES.map(destination => <option key={destination.id} value={destination.id}>{destination.name}</option>)}
|
|
</select>
|
|
<label htmlFor={`${id}-sector`}>Ground-movement sector</label>
|
|
<select id={`${id}-sector`} value={value.sector === undefined ? '' : String(value.sector)}
|
|
aria-invalid={value.sector !== undefined && !TERRITORIES.find(row => row.id === value.territory)?.sectors.includes(value.sector)}
|
|
onChange={event => {
|
|
const selected = event.currentTarget.value, printed = TERRITORIES.find(row => row.id === value.territory);
|
|
if (selected === '') onChange({ territory: value.territory, minimum: value.minimum });
|
|
else { const sector = Number(selected); if (printed?.sectors.includes(sector)) onChange({ ...value, sector }); }
|
|
}}>
|
|
<option value="">Any sector in this territory</option>
|
|
{TERRITORIES.find(row => row.id === value.territory)?.sectors.map(sector => <option key={sector} value={sector}>Sector {sector}</option>)}
|
|
</select>
|
|
<label htmlFor={`${id}-minimum`}>Minimum physical forces in one ground move</label>
|
|
<Input id={`${id}-minimum`} type="number" min={1} max={20} step={1} required
|
|
value={Number.isNaN(value.minimum) ? '' : value.minimum} aria-invalid={!validMovementClaim(value)}
|
|
onChange={event => onChange({ ...value, minimum: event.currentTarget.valueAsNumber })} />
|
|
</fieldset>;
|
|
}
|