Support sector-specific Truthtrance movement

components/movement-claim-fields.tsx

@@ -10,9 +10,20 @@ export function MovementClaimFields({ id, value, onChange }: {
     <legend>Ground-movement condition</legend>
     <label htmlFor={`${id}-territory`}>Ground-movement destination</label>
     <select id={`${id}-territory`} value={value.territory}
-      onChange={event => onChange({ ...value, territory: event.target.value })}>
+      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)}