43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import type { Vector3Tuple } from "../game/dungeonManifest";
|
|
import { DungeonMapGraphic } from "./DungeonMapGraphic";
|
|
|
|
export interface MinimapProps {
|
|
position: Vector3Tuple;
|
|
yaw: number;
|
|
areaName: string;
|
|
distanceTravelled?: number;
|
|
rotationMode?: "north-up" | "player-up";
|
|
onOpenMap: () => void;
|
|
}
|
|
|
|
export function Minimap({
|
|
position,
|
|
yaw,
|
|
areaName,
|
|
distanceTravelled = 0,
|
|
rotationMode = "north-up",
|
|
onOpenMap,
|
|
}: MinimapProps) {
|
|
const heading = ((Math.round((yaw * 180) / Math.PI) % 360) + 360) % 360;
|
|
return (
|
|
<section className="hud-minimap" aria-label="Dungeon minimap">
|
|
<button type="button" className="hud-minimap__map" onClick={onOpenMap} aria-label="Open full dungeon map">
|
|
<span className="hud-minimap__north" aria-hidden="true">N</span>
|
|
<span
|
|
className="hud-minimap__viewport"
|
|
style={{ "--minimap-turn": rotationMode === "player-up" ? `${-yaw}rad` : "0rad" } as CSSProperties}
|
|
aria-hidden="true"
|
|
>
|
|
<DungeonMapGraphic position={position} yaw={yaw} compact />
|
|
</span>
|
|
<span className="hud-minimap__heading" aria-hidden="true">{heading}°</span>
|
|
</button>
|
|
<div className="hud-minimap__caption">
|
|
<strong>{areaName}</strong>
|
|
<span>{Math.round(distanceTravelled)} m explored · <kbd>M</kbd> map</span>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|