379 lines
15 KiB
TypeScript
379 lines
15 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import type { GeoJsonFeatureCollection } from '@/lib/airports';
|
||
import type { PackageState, PlaneState, StateSnapshot } from '@/lib/game/state';
|
||
import { PLANE_TYPES } from '@/lib/game/catalog';
|
||
import { formatCash, formatDeadlineRelative } from '@/lib/format';
|
||
import { useGameAction } from '@/lib/useGameAction';
|
||
import type { HoverTarget } from './hoverTypes';
|
||
|
||
interface RightPaneProps {
|
||
state: StateSnapshot | null;
|
||
loading: boolean;
|
||
// Push the full snapshot returned by an action endpoint into the shared shell state (v0.10.0),
|
||
// so the pane updates on click without waiting for the next poll tick.
|
||
applySnapshot: (snapshot: StateSnapshot) => void;
|
||
// ISS-002 (v0.15.0): report row hovers to the shell so the map can highlight the plane or
|
||
// the package's endpoint airports.
|
||
onHover: (target: HoverTarget | null) => void;
|
||
// ISS-008 (v0.17.0): report a failed action to the shell as an error toast — in ADDITION
|
||
// to the inline pane error, which stays (both surfaces by design).
|
||
onError?: (message: string) => void;
|
||
}
|
||
|
||
const planeName = (p: PlaneState): string => PLANE_TYPES[p.model]?.name ?? p.model;
|
||
|
||
// Packages occupying a plane's slots — 'loaded' cargo plus 'expired' cargo, which
|
||
// keeps its slot until it is abandoned or the plane lands at its destination.
|
||
export function slotsUsedFor(state: StateSnapshot, planeId: string): number {
|
||
return state.packages.filter(
|
||
(p) => p.planeId === planeId && (p.status === 'loaded' || p.status === 'expired'),
|
||
).length;
|
||
}
|
||
|
||
// Planes that can load `pkg` right now: GROUNDED at the package's origin with a
|
||
// free slot (capacity from the snapshot catalog). The Load button is enabled iff
|
||
// this list is non-empty; exactly one entry loads directly, several show a picker.
|
||
export function loadEligiblePlanes(state: StateSnapshot, pkg: PackageState): PlaneState[] {
|
||
return state.planes.filter((p) => {
|
||
if (p.status !== 'available') return false;
|
||
if (p.locationIcao !== pkg.originIcao) return false;
|
||
const capacity = state.catalog.find((e) => e.model === p.model)?.capacity ?? 0;
|
||
return slotsUsedFor(state, p.id) < capacity;
|
||
});
|
||
}
|
||
|
||
// Load controls for one open package: a single Load button when exactly one plane
|
||
// is eligible (it acts on that plane directly), a small plane picker + Load when
|
||
// several are, and a disabled button with the reason otherwise. Each row owns its
|
||
// selection in local state and defaults to the "Select a plane…" placeholder —
|
||
// never preselecting — so rows stay visibly independent (v0.10.1 pattern).
|
||
function LoadControls({
|
||
pkg,
|
||
eligible,
|
||
busy,
|
||
onLoad,
|
||
}: {
|
||
pkg: PackageState;
|
||
eligible: PlaneState[];
|
||
busy: boolean;
|
||
onLoad: (planeId: string) => void;
|
||
}) {
|
||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||
// The user's pick while it stays eligible, else nothing (placeholder).
|
||
const effective = eligible.find((p) => p.id === selectedId) ?? null;
|
||
|
||
if (eligible.length === 1) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
data-testid={`load-${pkg.id}`}
|
||
className="pane-btn"
|
||
disabled={busy}
|
||
onClick={() => onLoad(eligible[0].id)}
|
||
>
|
||
Load
|
||
</button>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="dispatch-controls">
|
||
<select
|
||
data-testid={`load-plane-${pkg.id}`}
|
||
aria-label={`Load plane for ${pkg.originName} to ${pkg.destName}`}
|
||
value={effective?.id ?? ''}
|
||
onChange={(e) => setSelectedId(e.target.value || null)}
|
||
>
|
||
<option value="">Select a plane…</option>
|
||
{eligible.map((p) => (
|
||
<option key={p.id} value={p.id}>
|
||
{planeName(p)} — {p.locationIcao}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<button
|
||
type="button"
|
||
data-testid={`load-${pkg.id}`}
|
||
className="pane-btn"
|
||
disabled={busy || effective === null}
|
||
onClick={() => {
|
||
if (effective) onLoad(effective.id);
|
||
}}
|
||
>
|
||
Load
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function RightPane({ state, loading, applySnapshot, onHover, onError }: RightPaneProps) {
|
||
// ISS-021 (v0.20.0): shared action runner — busy gate, inline pane error + shell toast on
|
||
// failure, full post-action snapshot pushed into the shared state on success.
|
||
const { runAction, busy, actionError } = useGameAction(state, applySnapshot, onError);
|
||
|
||
// Market picker selections — same "effective selection" pattern as LoadControls: the
|
||
// user's pick while it stays valid, else a sensible default (first catalog entry / first plane).
|
||
const [buyModelId, setBuyModelId] = useState<string | null>(null);
|
||
const [sellPlaneId, setSellPlaneId] = useState<string | null>(null);
|
||
const [refuelPlaneId, setRefuelPlaneId] = useState<string | null>(null);
|
||
|
||
// ISS-010 (v0.18.0): Relocate row selections — same "effective selection" pattern as the rows above:
|
||
// the user's pick while it stays valid, else a sensible default (first grounded plane / first airport).
|
||
const [relocatePlaneId, setRelocatePlaneId] = useState<string | null>(null);
|
||
const [relocateDestIcao, setRelocateDestIcao] = useState<string | null>(null);
|
||
|
||
// ISS-010 (v0.18.0): one-time /api/airports fetch per page life — destination options for the
|
||
// Relocate row, sorted by name so e2e selection is stable. Same promise-ref pattern as Map.tsx;
|
||
// on failure airportOptions stays null and the Relocate button simply remains disabled.
|
||
const [airportOptions, setAirportOptions] = useState<Array<{ name: string; icao: string }> | null>(null);
|
||
const airportsPromiseRef = useRef<Promise<Array<{ name: string; icao: string }>> | null>(null);
|
||
useEffect(() => {
|
||
if (!airportsPromiseRef.current) {
|
||
airportsPromiseRef.current = fetch('/api/airports', { cache: 'no-store' })
|
||
.then((res) => {
|
||
if (!res.ok) throw new Error(`GET /api/airports → HTTP ${res.status}`);
|
||
return res.json() as Promise<GeoJsonFeatureCollection>;
|
||
})
|
||
.then((fc) =>
|
||
fc.features
|
||
.map((f) => ({ name: f.properties.name, icao: f.properties.icao }))
|
||
.sort((a, b) => a.name.localeCompare(b.name, 'en')),
|
||
);
|
||
}
|
||
void airportsPromiseRef.current.then(setAirportOptions).catch(() => {});
|
||
}, []);
|
||
|
||
if (loading && !state) {
|
||
return (
|
||
<aside data-testid="right-pane" className="pane right-pane">
|
||
<h2 className="pane-title">Jobs & Market</h2>
|
||
<p data-testid="right-loading" className="pane-muted">Loading…</p>
|
||
</aside>
|
||
);
|
||
}
|
||
if (!state) return null;
|
||
|
||
const clockMs = state.simState.clockMs;
|
||
const open = state.packages.filter((p) => p.status === 'open');
|
||
|
||
const catalog = state.catalog;
|
||
const buyEntry = catalog.find((e) => e.model === buyModelId) ?? catalog[0] ?? null;
|
||
|
||
const grounded = state.planes.filter((p) => p.status === 'available');
|
||
const sellPlane = state.planes.find((p) => p.id === sellPlaneId && p.status === 'available') ?? grounded[0] ?? null;
|
||
const refuelable = grounded.filter((p) => p.fuel < p.maxFuel);
|
||
const refuelPlane =
|
||
state.planes.find((p) => p.id === refuelPlaneId && p.status === 'available' && p.fuel < p.maxFuel) ??
|
||
refuelable[0] ??
|
||
null;
|
||
// ISS-010 (v0.18.0): Relocate — any GROUNDED plane can be repositioned to any airport via the
|
||
// existing fly endpoint (pure repositioning, no package needed since v0.12.0).
|
||
const relocatePlane = grounded.find((p) => p.id === relocatePlaneId) ?? grounded[0] ?? null;
|
||
const relocateDest =
|
||
airportOptions === null ? null : airportOptions.find((a) => a.icao === relocateDestIcao) ?? airportOptions[0] ?? null;
|
||
|
||
// Previews computed client-side from the snapshot's catalog + economy constants (v0.10.0).
|
||
const sellEntry = sellPlane ? catalog.find((e) => e.model === sellPlane.model) : undefined;
|
||
const sellPayout = sellEntry ? Math.round(sellEntry.price * state.sellFraction * 100) / 100 : null;
|
||
const refuelCost = refuelPlane ? (refuelPlane.maxFuel - refuelPlane.fuel) * state.fuelPricePerL : null;
|
||
|
||
return (
|
||
<aside data-testid="right-pane" className="pane right-pane">
|
||
<h2 className="pane-title">Jobs & Market</h2>
|
||
|
||
<section className="pane-section">
|
||
<h3 className="pane-heading">Packages</h3>
|
||
{open.length === 0 ? (
|
||
<p className="pane-muted">No open packages.</p>
|
||
) : (
|
||
<ul data-testid="open-packages" className="contract-list">
|
||
{open.map((pkg) => {
|
||
const eligible = loadEligiblePlanes(state, pkg);
|
||
return (
|
||
// ISS-002: hovering an open package highlights its two endpoint airports on the map.
|
||
<li
|
||
key={pkg.id}
|
||
data-testid={`open-package-${pkg.id}`}
|
||
className="contract-row"
|
||
onMouseEnter={() => onHover({ kind: 'package', originIcao: pkg.originIcao, destIcao: pkg.destIcao })}
|
||
onMouseLeave={() => onHover(null)}
|
||
>
|
||
<div className="contract-main">
|
||
<span className="contract-route">{pkg.originName} → {pkg.destName}</span>
|
||
{eligible.length > 0 ? (
|
||
<LoadControls
|
||
pkg={pkg}
|
||
eligible={eligible}
|
||
busy={busy}
|
||
onLoad={(planeId) => void runAction(`/api/packages/${pkg.id}/load`, { planeId })}
|
||
/>
|
||
) : (
|
||
<button type="button" data-testid={`load-${pkg.id}`} className="pane-btn" disabled>
|
||
Load
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="contract-sub">
|
||
<span data-testid={`open-package-reward-${pkg.id}`}>{formatCash(pkg.reward)}</span>
|
||
<span>{pkg.cargoType} × {pkg.cargoCount}</span>
|
||
<span data-testid={`open-package-deadline-${pkg.id}`}>
|
||
{formatDeadlineRelative(pkg.deadlineSimTime, clockMs)}
|
||
</span>
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</section>
|
||
|
||
{/* ISS-021 (v0.20.0): the On board section moved to the left pane (between Fleet and Time). */}
|
||
|
||
<section className="pane-section">
|
||
<h3 className="pane-heading">Market</h3>
|
||
|
||
<div className="market-row">
|
||
<select
|
||
data-testid="market-buy-model"
|
||
aria-label="Plane to buy"
|
||
value={buyEntry?.model ?? ''}
|
||
onChange={(e) => setBuyModelId(e.target.value || null)}
|
||
>
|
||
{catalog.map((e) => (
|
||
<option key={e.model} value={e.model}>
|
||
{e.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<span data-testid="market-buy-price" className="market-preview">
|
||
{buyEntry ? formatCash(buyEntry.price) : ''}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
data-testid="market-buy"
|
||
className="pane-btn"
|
||
disabled={busy || buyEntry === null}
|
||
onClick={() => {
|
||
if (buyEntry) void runAction('/api/market/buy-plane', { model: buyEntry.model });
|
||
}}
|
||
>
|
||
Buy
|
||
</button>
|
||
</div>
|
||
|
||
<div className="market-row">
|
||
<select
|
||
data-testid="market-sell-plane"
|
||
aria-label="Plane to sell"
|
||
value={sellPlane?.id ?? ''}
|
||
onChange={(e) => setSellPlaneId(e.target.value || null)}
|
||
>
|
||
{grounded.map((p) => (
|
||
<option key={p.id} value={p.id}>
|
||
{planeName(p)} — {p.locationIcao}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<span data-testid="market-sell-payout" className="market-preview">
|
||
{sellPayout !== null ? formatCash(sellPayout) : ''}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
data-testid="market-sell"
|
||
className="pane-btn"
|
||
disabled={busy || sellPlane === null}
|
||
onClick={() => {
|
||
if (sellPlane) void runAction('/api/market/sell-plane', { planeId: sellPlane.id });
|
||
}}
|
||
>
|
||
Sell
|
||
</button>
|
||
</div>
|
||
|
||
<div className="market-row">
|
||
{refuelable.length === 0 ? (
|
||
<span data-testid="market-refuel-none" className="pane-muted">
|
||
All tanks full.
|
||
</span>
|
||
) : (
|
||
<>
|
||
<select
|
||
data-testid="market-refuel-plane"
|
||
aria-label="Plane to refuel"
|
||
value={refuelPlane?.id ?? ''}
|
||
onChange={(e) => setRefuelPlaneId(e.target.value || null)}
|
||
>
|
||
{refuelable.map((p) => (
|
||
<option key={p.id} value={p.id}>
|
||
{planeName(p)} — {Math.round(p.fuel)} / {p.maxFuel} L
|
||
</option>
|
||
))}
|
||
</select>
|
||
<span data-testid="market-refuel-cost" className="market-preview">
|
||
{refuelCost !== null ? formatCash(refuelCost) : ''}
|
||
</span>
|
||
</>
|
||
)}
|
||
<button
|
||
type="button"
|
||
data-testid="market-refuel"
|
||
className="pane-btn"
|
||
disabled={busy || refuelPlane === null}
|
||
onClick={() => {
|
||
if (refuelPlane) void runAction(`/api/planes/${refuelPlane.id}/refuel`);
|
||
}}
|
||
>
|
||
Refuel to full
|
||
</button>
|
||
</div>
|
||
|
||
{/* ISS-010 (v0.18.0): relocate a grounded plane — the fly endpoint already allows pure
|
||
repositioning, this row just exposes it for planes with nothing on board. */}
|
||
<div className="market-row market-row-relocate">
|
||
<select
|
||
data-testid="relocate-plane"
|
||
aria-label="Plane to relocate"
|
||
value={relocatePlane?.id ?? ''}
|
||
onChange={(e) => setRelocatePlaneId(e.target.value || null)}
|
||
>
|
||
{grounded.map((p) => (
|
||
<option key={p.id} value={p.id}>
|
||
{planeName(p)} — {p.locationIcao}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
data-testid="relocate-dest"
|
||
aria-label="Relocation destination airport"
|
||
value={relocateDest?.icao ?? ''}
|
||
onChange={(e) => setRelocateDestIcao(e.target.value || null)}
|
||
>
|
||
{airportOptions?.map((a) => (
|
||
<option key={a.icao} value={a.icao}>
|
||
{a.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<button
|
||
type="button"
|
||
data-testid="relocate-go"
|
||
className="pane-btn"
|
||
disabled={busy || relocatePlane === null || relocateDest === null}
|
||
onClick={() => {
|
||
if (relocatePlane && relocateDest) {
|
||
void runAction(`/api/planes/${relocatePlane.id}/fly`, { destIcao: relocateDest.icao });
|
||
}
|
||
}}
|
||
>
|
||
Relocate
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
{actionError && <p data-testid="right-error" className="pane-error">{actionError}</p>}
|
||
</aside>
|
||
);
|
||
}
|