40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import type { PlayerState } from "@deadhead/schema";
|
|
import type { MapSelection } from "../src/map/hitTest";
|
|
import { buildScene } from "../src/map/scene";
|
|
|
|
/**
|
|
* Test stand-in for the PixiJS map canvas: one button per tappable thing in
|
|
* the real scene, calling `onSelect` with the same selection a tap would.
|
|
*/
|
|
export function MapCanvas({
|
|
state,
|
|
onSelect,
|
|
}: {
|
|
state: PlayerState;
|
|
onSelect?: (selection: MapSelection | null) => void;
|
|
}) {
|
|
const scene = buildScene(state, Date.now());
|
|
return (
|
|
<div data-testid="map-canvas">
|
|
{scene.locations.map((l) => (
|
|
<button key={l.id} type="button" onClick={() => onSelect?.({ kind: "location", id: l.id })}>
|
|
Tap {l.name}
|
|
{l.discovered ? "" : " (locked)"}
|
|
</button>
|
|
))}
|
|
{scene.flights.map((f) => (
|
|
<button
|
|
key={f.dispatchId}
|
|
type="button"
|
|
onClick={() => onSelect?.({ kind: "flight", dispatchId: f.dispatchId })}
|
|
>
|
|
Tap ship {f.shipId}
|
|
</button>
|
|
))}
|
|
<button type="button" onClick={() => onSelect?.(null)}>
|
|
Tap empty space
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|