forked from phenom/healer-man
59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
import { useInputBindingLabels } from "../input/useInputBindingLabels";
|
|
import { useGameStore } from "../game/store";
|
|
import { useMenuController } from "../input/useMenuController";
|
|
import { DungeonMapGraphic } from "./DungeonMapGraphic";
|
|
import { requireDungeonDefinition } from "../game/dungeonRegistry";
|
|
import { resolveStagePresentation } from "../game/manastormStagePresentation";
|
|
import { useManastormStore } from "../game/manastormStore";
|
|
|
|
function MapDialog() {
|
|
const bindingLabel = useInputBindingLabels();
|
|
const close = useGameStore((state) => state.closeMap);
|
|
const openOverlay = useGameStore((state) => state.openOverlay);
|
|
const position = useGameStore((state) => state.playerPosition);
|
|
const yaw = useGameStore((state) => state.cameraYaw);
|
|
const area = useGameStore((state) => state.areaName);
|
|
const gameMode = useGameStore((state) => state.gameMode);
|
|
const encounter = useManastormStore((state) => state.currentEncounter);
|
|
const activeDungeonId = useGameStore((state) => state.activeDungeonId);
|
|
const dungeon = requireDungeonDefinition(activeDungeonId);
|
|
const stagePresentation = resolveStagePresentation(gameMode, encounter, {
|
|
title: dungeon.title,
|
|
mapId: dungeon.mapId,
|
|
areaName: area,
|
|
});
|
|
useMenuController([], { onBack: () => openOverlay("pause") });
|
|
|
|
return (
|
|
<aside className="map-panel" role="dialog" aria-modal="true" aria-labelledby="map-title">
|
|
<header>
|
|
<div>
|
|
<p className="eyebrow">Expedition survey</p>
|
|
<h2 id="map-title">{stagePresentation.title}</h2>
|
|
</div>
|
|
<button type="button" className="icon-button" onClick={close} aria-label="Close map">X</button>
|
|
</header>
|
|
|
|
<div className="map-panel__canvas">
|
|
<DungeonMapGraphic position={position} yaw={yaw} />
|
|
</div>
|
|
|
|
<div className="map-panel__readout">
|
|
<div><span>Current area</span><strong>{stagePresentation.areaName}</strong></div>
|
|
<div><span>Position</span><strong>{position.map((value) => Math.round(value)).join(" / ")}</strong></div>
|
|
</div>
|
|
<p className="map-panel__note">
|
|
{stagePresentation.usingFallbackEnvironment
|
|
? "Stage location is authoritative; the survey artwork is temporary fallback geometry. "
|
|
: "Gold markers show encounters. Dashed lines show database patrol routes. "}
|
|
Press {bindingLabel("pc", "map")} to close or {bindingLabel("controller", "menu-back")} to return to Pause.
|
|
</p>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
export function MapPanel() {
|
|
const open = useGameStore((state) => state.overlay === "map");
|
|
return open ? <MapDialog /> : null;
|
|
}
|