# Minimap radar
> A game HUD minimap: player arrow and view cone, pins that slide along the rim, a turning north tab and sensor pings.
The round map in the corner of a game screen. The arrow at its centre is the player and the soft cone is where the camera looks; yellow pins sit on the map when near and ride the rim in a dashed ring when out of range, sliding along it as the player turns. A grey N tab orbits the edge while the map turns with the player, or stays put in north-up mode. A sensor badge lights up and pings faster as a pin gets closer, and a chip under the disc keeps the game clock and the temperature. Walk it with the arrow keys, on a navy grid or a terrain map.
A React component by Bruno Delorence: https://brunodelorence.com/components/minimap-radar. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Games · HUD.
## Anatomy
1. **Disc**: A canvas at devicePixelRatio, clipped round: the ground under the player, a navy grid with faint contours or a terrain map, with a soft shadow off the page.
2. **North tab**: A grey tab outside the rim with an upright N. Heading-up, it orbits the rim as the map turns; north-up, it stays on top.
3. **Camera cone**: A 41° wedge with a radial yellow gradient, softly blurred: where the camera looks. It trails a turn and settles in about 160 ms.
4. **Player arrow**: The yellow arrow at the centre, with a glow. Heading-up, it always points up; north-up, it turns.
5. **Pin on the map**: A glowing yellow disc with a darker ring and a bright dot, placed where the pin is when it is within `range`.
6. **Pin on the rim**: A pin out of range, clamped to the rim in its direction inside a dashed ring; turning slides it along the edge.
7. **Sensor badge**: Grey until the nearest pin is within 2.4 ranges; then ice cyan, sending a ping ring across the map, faster as the pin nears.
8. **Chip**: A dark pill under the disc with the temperature on a cold, mild and hot dial, and the game clock.
## When to use
- A corner map in a game HUD that shows, without opening the big map, which way the player faces and where their pins are.
- Pins that may be anywhere in the world: near ones sit on the map, far ones ride the rim and point the way.
- A heading-up map that turns with the player, with a north tab on the rim; or north-up for players who keep their bearings.
- Telling the player a target is close without a number: a sensor that lights up and pings faster as the pin nears.
- A small status chip that belongs to the map, such as the game clock and the temperature.
## When not to use
- The full world map the player plans a route on. Use a world map with zoom, pan and a legend; this shows a few hundred metres.
- A single objective direction along the top of the screen. Use a compass strip, which takes less room.
- Locations on a real map in an app (stores, deliveries). Use a web map with real tiles and controls.
- A distance the player must read exactly, such as 37 m to the target. Put a label on a waypoint marker in the scene.
- Enemies tracked in real time in a competitive game. Use a radar with its own threat markers and rules; these pins are the player’s own.
## Installation
Install it with the shadcn CLI, into components/minimap-radar of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/minimap-radar.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
import { MinimapRadar } from './minimap-radar';
const pins = [
{ id: 'camp', x: 600, y: 470, label: 'Camp' },
{ id: 'peak', x: 300, y: 720, label: 'Peak' },
];
export function CornerMap() {
return ;
}
```
## States
- **Heading-up**: The defaults: the navy map turned so the player faces up, the Ridge pin on the map and two on the rim.
- **Turned**: `heading={120}`: the map has turned under the arrow, so the N tab sits low on the left and the rim pins have slid round.
- **North-up**: `rotate={false}` with the same heading: the map keeps north on top and the arrow and cone turn instead.
- **Terrain**: `variant="terrain"`: ochre land bands, water, woods and roads instead of the navy grid.
- **Pin close**: A pin 30 m ahead: the sensor is lit and pings about every 0.7 s.
- **All far**: Every pin out of range and past the sensor’s reach: they all ride the rim and the badge is grey.
- **No pins**: `pins={[]}`: the bare map; the label says “No pins.”
- **Zoomed out**: `range={320}`: the disc reaches twice as far, so all three pins sit on the map.
- **Night, °C**: `time={1380}` and `unit="C"`: 11:00 PM, colder, the needle in the ice segments.
- **Compact**: `sensor={false}` and `size={150}`: a smaller disc and a chip with only the dial and the clock.
- **With buttons**: `controls` (the default): turn and walk, drop a pin, Terrain and North up under the radar.
- **Light**: `colorScheme="light"`: a dark tab and rim, white buttons. The disc and chip never change.
- **Dark**: `colorScheme="dark"`: a light tab and hairline rim, a deeper shadow, dark buttons.
## How it works
- The ground is a canvas drawn at devicePixelRatio after every React commit, so it moves in the same paint as the SVG on top. It is clipped to the disc, then rotated by the map’s rotation, scaled to the range (160 world units across the radius by default) and translated so the player sits at the centre.
- The world is invented: periodic value noise in five octaves (8 to 128 cells across a 1024-unit square that repeats both ways) gives a height field. From it, one terrain texture (six ochre land bands, darker contour edges, blue-grey water with a shore band, dark wood clumps and two pale roads) and one transparent contour texture for the navy map are painted once, a few rows per frame, so the page never stalls.
- The navy map is #06203a with those contours at low alpha, a grid of lines every 72 units and small crosses at the quarter points, all drawn as one-device-pixel strokes so they stay sharp while turning, and a radial darkening over its outer tenth.
- Everything else is SVG in a 260-unit frame where the disc’s radius is 100: the camera cone (a 41° wedge with a radial yellow gradient, softly blurred), the arrow, the pins, the N tab, the sensor badge and the ping rings.
- Heading-up (the default) rotates the map by the heading, so the arrow points up and the N tab orbits the rim, its letter kept upright; north-up keeps the map still and turns the arrow. Switching swings the map to its new rotation over 420 ms (cubic ease-out) instead of jumping. The camera trails the character with a 160 ms exponential settle, so after a turn the cone catches up a moment later.
- Pins live in world units. Within range they are placed on the map; beyond it they are clamped to the rim in their direction, and a dashed ring (radius 20.8 units, dash 8.6 / 4.47) grows round them. Crossing the range, the ring spins and shrinks into the pin in 260 ms and the pin pops (scale 0.4 to 1.22 to 1); closer than 9 units, a pin is reached: it swells and scales away under a yellow burst ring.
- The sensor tracks the nearest pin within 2.4 ranges: its badge turns from grey to ice cyan and a cyan ring sweeps from the player to the rim in 1.1 s, every 2.2 s at the edge of its reach down to every 0.55 s close by; the badge’s three arcs flash white in turn with each ping.
- The chip runs the game clock at a game minute per second and shows the temperature (warmest mid-afternoon, colder at night and up high), its needle easing to each new reading on a nine-segment cold, mild and hot dial.
- Untouched and on screen, an autopilot steers with the same keys a reader has: it seeks a pin until it is reached, switches to terrain, goes north-up for a turn, drops a pin ahead and reaches it, switches back and restores the pins.
## API reference
- **variant** (`'navy' | 'terrain'`, default `'navy'`): The ground: a navy grid with faint contours, or a terrain map.
- **rotate** (`boolean`, default `true`): Heading-up: the map turns with the player and the N tab orbits. False keeps north up and turns the arrow.
- **pins** (`MinimapPin[]`, default `three pins`): Pins as { id, x, y, label? } in world units (the world repeats every 1024; the player starts at 512, 560).
- **range** (`number`, default `160`): How far the disc’s radius reaches, in world units; pins beyond it ride the rim.
- **time** (`number`, default `550`): The game clock at the start, in minutes since midnight (550 is 09:10 AM).
- **heading** (`number`): Where the player faces at the start, in degrees clockwise from north. Setting it opens the radar turned that way and turns the autopilot off.
- **timeScale** (`number`, default `1`): Game minutes per real second; 0 stops the clock.
- **unit** (`'C' | 'F'`, default `'F'`): The temperature’s unit in the chip.
- **sensor** (`boolean`, default `true`): Shows the sensor badge and its pings.
- **controls** (`boolean`, default `true`): Shows the buttons under the radar: turn, walk, drop a pin, terrain, north up.
- **size** (`number`): The disc’s diameter in px. Without it, 176, then 200 on a stage 400 px wide or more and 232 from 640 px.
- **onPinReached** (`(pin: MinimapPin) => void`): Called when the player reaches a pin, which then clears.
- **autoplay** (`boolean`, default `true`): While on screen and untouched, an autopilot plays a short run; any real input hands it over.
- **colorScheme** (`'light' | 'dark' | 'system'`): Light or dark north tab, rim and buttons, or the reader’s (system); without it, the page’s color-scheme.
- **className** (`string`): Added to the root element.
## Accessibility
- The radar is one image (role="img") whose label says the mode, the map, the facing and the nearest pin with its distance and side, such as “Facing north-east. 3 pins; nearest Ridge, 139 metres ahead left”; the drawing is aria-hidden.
- The stage takes focus: then the arrow keys or W A S D walk and turn, and P drops a pin. The buttons under it do the same: the four movement buttons are held with the pointer or with Space or Enter on the focused button, and Terrain and North up are toggle buttons with aria-pressed.
- The time and temperature are plain text with visually hidden labels.
- A pin coming into range, a pin reached, a pin dropped and a mode change are announced through a polite live region, only for the reader’s own play, never for the autopilot.
- Reduced motion: no autopilot, no pings, pops, bursts or boot animation, and mode switches are instant; walking still moves the map, since that is the reader’s own input.
- The clock and the demo pause offscreen and in a hidden tab, and the autopilot lets go of its keys the moment the reader takes over.
## Source
### minimap-radar/minimap-radar.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import {
useEffect,
useId,
useLayoutEffect,
useRef,
useState,
type CSSProperties,
type KeyboardEvent as ReactKeyboardEvent,
type PointerEvent as ReactPointerEvent,
} from 'react';
import { useAutoplay } from './use-autoplay';
import { WORLD, paintTextures, temperatureAt, type Textures } from './world';
import styles from './minimap-radar.module.css';
/*
* Minimap radar: the round map in a corner of a game HUD that tells the player, without opening
* the big map, which way they face, where their pins are and which way is north.
*
* - The disc is a canvas at devicePixelRatio: the ground under the player, either a navy grid
* with faint contour lines or a terrain map (world.ts paints both textures from one invented,
* endlessly repeating height field). Everything on top of it is SVG in a 200-unit frame (the
* disc's radius is 100): the camera cone, the player arrow, the pins, the north tab, the
* sensor badge and its pings, so it all stays sharp at any size.
* - With `rotate` (heading-up, the default) the map turns under a fixed arrow and the N tab
* orbits the rim; without it (north-up) the map only pans and the arrow turns. Switching swings
* the map to its new orientation in 420 ms. The cone shows where the camera looks: it trails a
* turn for a moment and settles.
* - Pins live in world units. Within `range` they sit on the map; past it they are clamped to the
* rim in their direction and wear a dashed ring, so turning slides them along the edge. Coming
* into range, the ring shrinks into the pin and fades; reaching one clears it with a burst.
* - The sensor tracks the nearest pin: in reach it lights up and sends a ping ring across the map,
* faster the closer the pin. Under the disc, a chip shows the game clock (a game minute per
* second) and the temperature, colder up high and at night, on a small cold/hot dial.
* - The arrow keys (or WASD) walk and turn, P drops a pin ahead; the buttons under it do the same
* by pointer. While on screen and untouched, an autopilot plays a short run (seek a pin, switch
* to terrain, go north-up, drop a pin, reach it) and any real input hands it over.
* - With no game scene behind it, the radar brings its own footing: an opaque disc with a hairline
* rim and a soft shadow, and a north tab and chip that are tokens for light and dark pages.
*/
/** The player's walking speed in units (metres) per second, and the turning rate in rad/s. */
const SPEED = 58;
const TURN = (150 * Math.PI) / 180;
/** Closer than this, a pin is reached. */
const REACH = 9;
/** How long the map takes to swing to a new orientation, in ms. */
const SWING = 420;
/** How far the sensor reaches, in ranges, and its ping intervals near and far, in s. */
const SENSOR_REACH = 2.4;
const PING_NEAR = 0.55;
const PING_FAR = 2.2;
/** How long a ping ring and a reach burst last, in ms. */
const PING_MS = 1100;
const BURST_MS = 560;
/** The crossfade between the navy and terrain maps, in ms. */
const FADE = 340;
export type MinimapPin = { id: string; x: number; y: number; label?: string };
type Variant = 'navy' | 'terrain';
type Key = 'forward' | 'back' | 'left' | 'right';
const START = { x: 512, y: 560 };
/** The default pins: one near, two off-range (behind left, far ahead right). */
export const DEFAULT_PINS: MinimapPin[] = [
{ id: 'ridge', x: START.x + 92, y: START.y - 104, label: 'Ridge' },
{ id: 'well', x: START.x - 250, y: START.y + 150, label: 'Old well' },
{ id: 'tower', x: START.x + 300, y: START.y - 250, label: 'Tower' },
];
/** The shortest signed angle from b to a, in -π..π. */
function turn(a: number, b: number) {
return ((((a - b + Math.PI) % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2)) - Math.PI;
}
/** The shortest offset along one wrapped world axis. */
function wrap(d: number) {
return d - Math.round(d / WORLD) * WORLD;
}
const easeOut = (t: number) => 1 - Math.pow(1 - t, 3);
type World = {
x: number;
y: number;
/** Where the character faces and where the camera looks, clockwise from north, in rad. */
heading: number;
cam: number;
/** The map's rotation, and what is left of a swing between orientations. */
rot: number;
swing: { from: number; at: number } | null;
rotate: boolean;
keys: Set;
pins: MinimapPin[];
/** Pins inside range, so the ring's change can be announced once. */
near: Set;
minutes: number;
temp: number;
/** Seconds since the last ping. */
ping: number;
};
type Frame = {
x: number;
y: number;
heading: number;
cam: number;
rot: number;
pins: MinimapPin[];
minutes: number;
temp: number;
/** Distance to the nearest pin, when the sensor reaches it. */
sensor: number | null;
};
const snap = (w: World, range: number): Frame => {
let nearest = Infinity;
for (const pin of w.pins)
nearest = Math.min(nearest, Math.hypot(wrap(pin.x - w.x), wrap(pin.y - w.y)));
return {
x: w.x,
y: w.y,
heading: w.heading,
cam: w.cam,
rot: w.rot,
pins: w.pins,
minutes: w.minutes,
temp: w.temp,
sensor: nearest <= range * SENSOR_REACH ? nearest : null,
};
};
const COMPASS = [
'north',
'north-east',
'east',
'south-east',
'south',
'south-west',
'west',
'north-west',
];
const SIDES = [
'ahead',
'ahead right',
'right',
'behind right',
'behind',
'behind left',
'left',
'ahead left',
];
const octant = (angle: number) => ((Math.round(angle / (Math.PI / 4)) % 8) + 8) % 8;
function clock(minutes: number) {
const m = ((Math.floor(minutes) % 1440) + 1440) % 1440;
const h = Math.floor(m / 60);
return `${String(h % 12 || 12).padStart(2, '0')}:${String(m % 60).padStart(2, '0')} ${h < 12 ? 'AM' : 'PM'}`;
}
/* ------------------------------------------------------------------------------------------ */
/* Art */
/* ------------------------------------------------------------------------------------------ */
function PinArt() {
return (
);
}
function SensorArt() {
return (
);
}
/** The temperature dial: nine segments from cold (left) to hot (right) and a needle. */
function Dial({ celsius }: { celsius: number }) {
const t = Math.min(1, Math.max(0, (celsius + 10) / 50));
const needle = -135 + t * 270;
const segments = Array.from({ length: 9 }, (_, index) => {
const a0 = ((-135 + index * 30 + 2) * Math.PI) / 180;
const a1 = ((-135 + index * 30 + 28) * Math.PI) / 180;
const r = 8.2;
const p = (a: number) => `${(Math.sin(a) * r).toFixed(2)} ${(-Math.cos(a) * r).toFixed(2)}`;
const zone = index < 3 ? styles.cold : index < 6 ? styles.mild : styles.hot;
return ;
});
return (
);
}
/* ------------------------------------------------------------------------------------------ */
/* The component */
/* ------------------------------------------------------------------------------------------ */
const KEYS: { key: Key; glyph: string; label: string; shortcut: string }[] = [
{ key: 'left', glyph: '←', label: 'Turn left', shortcut: 'ArrowLeft' },
{ key: 'forward', glyph: '↑', label: 'Walk', shortcut: 'ArrowUp' },
{ key: 'back', glyph: '↓', label: 'Back', shortcut: 'ArrowDown' },
{ key: 'right', glyph: '→', label: 'Turn right', shortcut: 'ArrowRight' },
];
/** The autopilot's run: steps it plays in order, then from the top. */
type Step =
| { do: 'wait'; s: number }
| { do: 'seek'; pin: string | 'new' }
| { do: 'turn'; by: number }
| { do: 'walk'; s: number }
| { do: 'variant'; to: Variant }
| { do: 'rotate'; to: boolean }
| { do: 'drop' }
| { do: 'reset' };
const RUN: Step[] = [
{ do: 'wait', s: 1.6 },
{ do: 'seek', pin: 'ridge' },
{ do: 'wait', s: 0.6 },
{ do: 'variant', to: 'terrain' },
{ do: 'wait', s: 0.8 },
{ do: 'seek', pin: 'well' },
{ do: 'wait', s: 0.5 },
{ do: 'rotate', to: false },
{ do: 'wait', s: 0.6 },
{ do: 'turn', by: 2.2 },
{ do: 'walk', s: 1.4 },
{ do: 'rotate', to: true },
{ do: 'wait', s: 0.8 },
{ do: 'drop' },
{ do: 'wait', s: 0.6 },
{ do: 'seek', pin: 'new' },
{ do: 'wait', s: 0.5 },
{ do: 'variant', to: 'navy' },
{ do: 'wait', s: 0.8 },
{ do: 'reset' },
{ do: 'wait', s: 1.2 },
];
export type MinimapRadarProps = {
/** The ground: a navy grid with faint contours, or a terrain map. */
variant?: Variant;
/** Heading-up: the map turns with the player and the N tab orbits. False: north-up. */
rotate?: boolean;
/** Pins, in world units (metres; the world repeats every 1024). The player starts at 512, 560. */
pins?: MinimapPin[];
/** How far the disc's radius reaches, in world units. */
range?: number;
/** The game clock at the start, in minutes since midnight. */
time?: number;
/** Where the player faces at the start, in degrees clockwise from north. Setting it opens the
* radar turned that way and turns the autopilot off. */
heading?: number;
/** Game minutes per real second; 0 stops the clock. */
timeScale?: number;
/** The temperature's unit. */
unit?: 'C' | 'F';
/** Shows the sensor badge and its pings. */
sensor?: boolean;
/** Shows the buttons under the radar. */
controls?: boolean;
/** The disc's diameter in px; without it, 176, 200 from a stage 400 px wide, 232 from 640. */
size?: number;
/** Called when the player reaches a pin, which then clears. */
onPinReached?: (pin: MinimapPin) => void;
/** While on screen and untouched, an autopilot plays a short run by itself. */
autoplay?: boolean;
/** Light or dark, or the reader's ('system'); without it, the page's color-scheme. */
colorScheme?: 'light' | 'dark' | 'system';
className?: string;
};
export function MinimapRadar({
variant: variantProp = 'navy',
rotate: rotateProp = true,
pins: pinsProp = DEFAULT_PINS,
range = 160,
time = 550,
heading: headingProp,
timeScale = 1,
unit = 'F',
sensor = true,
controls = true,
size,
onPinReached,
autoplay = true,
colorScheme,
className = '',
}: MinimapRadarProps) {
const { ref: root, playing, visible, reduced, take } = useAutoplay(6000);
const start = ((headingProp ?? 0) * Math.PI) / 180;
const [variant, setVariant] = useState(variantProp);
const [rotate, setRotate] = useState(rotateProp);
const [props, setProps] = useState({ variantProp, rotateProp, pinsProp });
if (
props.variantProp !== variantProp ||
props.rotateProp !== rotateProp ||
props.pinsProp !== pinsProp
) {
setProps({ variantProp, rotateProp, pinsProp });
setVariant(variantProp);
setRotate(rotateProp);
}
const world = useRef(null as unknown as World);
if (!world.current)
world.current = {
x: START.x,
y: START.y,
heading: start,
cam: start,
rot: rotateProp ? start : 0,
swing: null,
rotate: rotateProp,
keys: new Set(),
pins: pinsProp,
near: new Set(
pinsProp
.filter((p) => Math.hypot(wrap(p.x - START.x), wrap(p.y - START.y)) <= range)
.map((p) => p.id),
),
minutes: time,
temp: temperatureAt(START.x, START.y, time),
ping: 0,
};
const [frame, setFrame] = useState(() => snap(world.current, range));
const [pings, setPings] = useState([]);
const [bursts, setBursts] = useState([]);
const [leaving, setLeaving] = useState<(MinimapPin & { at: [number, number] })[]>([]);
const [held, setHeld] = useState>>({});
const [message, setMessage] = useState('');
const reader = useRef(false);
const live = useRef({ range, sensor, reduced, onPinReached, timeScale });
live.current = { range, sensor, reduced, onPinReached, timeScale };
// New pins from props replace the world's.
useEffect(() => {
const w = world.current;
w.pins = pinsProp;
w.near = new Set(
pinsProp
.filter((p) => Math.hypot(wrap(p.x - w.x), wrap(p.y - w.y)) <= range)
.map((p) => p.id),
);
setFrame(snap(w, range));
}, [pinsProp, range]);
// The orientation: a swing from where the map is now to its new rotation.
useEffect(() => {
const w = world.current;
if (w.rotate === rotate) return;
w.rotate = rotate;
const target = rotate ? w.heading : 0;
w.swing = live.current.reduced ? null : { from: turn(w.rot, target), at: performance.now() };
if (!w.swing) w.rot = target;
setFrame(snap(w, live.current.range));
}, [rotate]);
const quiet = useRef(0);
const say = (text: string) => {
if (!reader.current) return;
setMessage(text);
window.clearTimeout(quiet.current);
quiet.current = window.setTimeout(() => setMessage(''), 3000);
};
useEffect(() => () => window.clearTimeout(quiet.current), []);
const sayRef = useRef(say);
sayRef.current = say;
// The clock: steps the world every frame while the radar is on screen.
useEffect(() => {
if (!visible) return;
let raf = 0;
let last = 0;
let lastPing = performance.now();
let shown: Frame = snap(world.current, live.current.range);
shown = { ...shown, pins: [] };
const step = (now: number) => {
const dt = last ? Math.min(0.05, (now - last) / 1000) : 0;
last = now;
const w = world.current;
const { range: r, sensor: sensing, reduced: calm, timeScale: pace } = live.current;
// Turning and walking.
const k = w.keys;
const spin = (k.has('right') ? 1 : 0) - (k.has('left') ? 1 : 0);
const walk = (k.has('forward') ? 1 : 0) - (k.has('back') ? 0.6 : 0);
w.heading += spin * TURN * dt;
w.x += Math.sin(w.heading) * walk * SPEED * dt;
w.y -= Math.cos(w.heading) * walk * SPEED * dt;
w.x = ((w.x % WORLD) + WORLD) % WORLD;
w.y = ((w.y % WORLD) + WORLD) % WORLD;
// The camera trails the character, then settles.
w.cam += turn(w.heading, w.cam) * (calm ? 1 : 1 - Math.exp(-dt / 0.16));
// The map's rotation, with what is left of a swing.
const target = w.rotate ? w.heading : 0;
if (w.swing) {
const t = Math.min(1, (now - w.swing.at) / SWING);
w.rot = target + w.swing.from * (1 - easeOut(t));
if (t >= 1) w.swing = null;
} else w.rot = target;
// Time and temperature.
w.minutes = (w.minutes + dt * pace) % 1440;
w.temp += (temperatureAt(w.x, w.y, w.minutes) - w.temp) * (1 - Math.exp(-dt / 1.6));
// Pins: reached, and in or out of range.
for (const pin of w.pins) {
const d = Math.hypot(wrap(pin.x - w.x), wrap(pin.y - w.y));
if (d < REACH) {
w.pins = w.pins.filter((p) => p !== pin);
w.near.delete(pin.id);
setLeaving((list) => [...list, { ...pin, at: [0, 0] }]);
if (!calm) setBursts((list) => [...list, now]);
sayRef.current(`${pin.label ?? 'Pin'} reached.`);
live.current.onPinReached?.(pin);
continue;
}
const inside = d <= r;
if (inside && !w.near.has(pin.id)) {
w.near.add(pin.id);
sayRef.current(`${pin.label ?? 'Pin'} in range, ${Math.round(d)} metres.`);
} else if (!inside && w.near.has(pin.id)) w.near.delete(pin.id);
}
const next = snap(w, r);
// The sensor's pings: faster the nearer the pin.
if (sensing && next.sensor !== null && !calm) {
const t = Math.min(1, next.sensor / (r * SENSOR_REACH));
const interval = PING_NEAR + (PING_FAR - PING_NEAR) * t;
if ((now - lastPing) / 1000 >= interval) {
lastPing = now;
setPings((list) => [...list.filter((at) => now - at < PING_MS), now]);
}
}
// A new frame only when something on screen changed.
const moved =
spin !== 0 ||
walk !== 0 ||
w.swing !== null ||
Math.abs(turn(w.heading, w.cam)) > 0.0005 ||
Math.floor(w.minutes) !== Math.floor(shown.minutes) ||
Math.abs(w.temp - shown.temp) > 0.05 ||
w.pins !== shown.pins ||
w.rot !== shown.rot ||
now - fade.current.at < FADE + 60;
if (moved) {
shown = next;
setFrame(next);
}
raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [visible]);
// Old pings, bursts and cleared pins go once their animation is over.
useEffect(() => {
if (!pings.length && !bursts.length && !leaving.length) return;
const timer = window.setTimeout(() => {
const now = performance.now();
setPings((list) => list.filter((at) => now - at < PING_MS));
setBursts((list) => list.filter((at) => now - at < BURST_MS));
setLeaving([]);
}, PING_MS);
return () => window.clearTimeout(timer);
}, [pings, bursts, leaving]);
/* ---------------------------------------------------------------------------------------- */
/* The canvas: the ground, drawn after each commit so it moves with the SVG on top */
/* ---------------------------------------------------------------------------------------- */
const canvas = useRef(null);
const textures = useRef(null);
const [ready, setReady] = useState(false);
/** The variant crossfade: the one faded from, and since when. */
const fade = useRef<{ from: Variant; to: Variant; at: number }>({
from: variant,
to: variant,
at: 0,
});
if (fade.current.to !== variant)
fade.current = {
from: fade.current.to,
to: variant,
at: reduced ? 0 : performance.now(),
};
// The textures are painted once, in slices of a few rows per frame.
useEffect(() => {
const element = canvas.current;
if (!element) return;
const diameter = element.clientWidth || 200;
const scale = Math.min(
2,
Math.max(1, (diameter * (window.devicePixelRatio || 1)) / (2 * range)),
);
const { textures: made, step } = paintTextures(Math.round(scale * 4) / 4);
let raf = 0;
const paint = () => {
const start = performance.now();
while (performance.now() - start < 8) {
if (step()) {
textures.current = made;
setReady(true);
return;
}
}
raf = requestAnimationFrame(paint);
};
raf = requestAnimationFrame(paint);
return () => cancelAnimationFrame(raf);
}, [range]);
useLayoutEffect(() => {
const element = canvas.current;
if (!element) return;
const css = element.clientWidth;
if (!css) return;
const dpr = window.devicePixelRatio || 1;
const px = Math.round(css * dpr);
if (element.width !== px) {
element.width = px;
element.height = px;
}
const ctx = element.getContext('2d');
if (!ctx) return;
const { from, to, at } = fade.current;
const mix = from === to ? 1 : Math.min(1, (performance.now() - at) / FADE);
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, px, px);
const draw = (kind: Variant, alpha: number) => {
ctx.save();
ctx.globalAlpha = alpha;
ctx.beginPath();
ctx.arc(px / 2, px / 2, px / 2, 0, Math.PI * 2);
ctx.clip();
ctx.fillStyle = kind === 'navy' ? '#06203a' : '#3a2f10';
ctx.fillRect(0, 0, px, px);
const unit = px / 2 / range;
ctx.translate(px / 2, px / 2);
ctx.rotate(-frame.rot);
ctx.scale(unit, unit);
ctx.translate(-frame.x, -frame.y);
const reach = range * 1.5;
const tiles = (paint: (x: number, y: number) => void) => {
for (
let tx = Math.floor((frame.x - reach) / WORLD);
tx <= Math.floor((frame.x + reach) / WORLD);
tx++
)
for (
let ty = Math.floor((frame.y - reach) / WORLD);
ty <= Math.floor((frame.y + reach) / WORLD);
ty++
)
paint(tx * WORLD, ty * WORLD);
};
const tex = textures.current;
if (kind === 'terrain' && tex)
tiles((x, y) => ctx.drawImage(tex.terrain, x, y, WORLD, WORLD));
if (kind === 'navy') {
if (tex) tiles((x, y) => ctx.drawImage(tex.contours, x, y, WORLD, WORLD));
// The grid: lines every 72 units, small crosses between them, all one device pixel.
const line = 1 / unit;
const cell = 72;
const x0 = Math.floor((frame.x - reach) / cell) * cell;
const y0 = Math.floor((frame.y - reach) / cell) * cell;
ctx.strokeStyle = '#0a2d4f';
ctx.lineWidth = line * Math.max(1, Math.round(dpr * 0.6));
ctx.beginPath();
for (let x = x0; x <= frame.x + reach; x += cell) {
ctx.moveTo(x, frame.y - reach);
ctx.lineTo(x, frame.y + reach);
}
for (let y = y0; y <= frame.y + reach; y += cell) {
ctx.moveTo(frame.x - reach, y);
ctx.lineTo(frame.x + reach, y);
}
ctx.stroke();
ctx.strokeStyle = '#0f4170';
ctx.beginPath();
const arm = 4.2;
for (let x = x0; x <= frame.x + reach; x += cell / 4)
for (let y = y0; y <= frame.y + reach; y += cell / 4) {
const onX = (x - x0) % cell === 0;
const onY = (y - y0) % cell === 0;
const quarter =
((x - x0) % (cell / 2) !== 0 && (y - y0) % (cell / 2) !== 0) || (onX && onY);
if (!quarter) continue;
const a = onX && onY ? arm * 1.5 : arm;
ctx.moveTo(x - a, y);
ctx.lineTo(x + a, y);
ctx.moveTo(x, y - a);
ctx.lineTo(x, y + a);
}
ctx.stroke();
}
ctx.restore();
};
if (mix < 1) draw(from, 1);
draw(to, mix);
});
/* ---------------------------------------------------------------------------------------- */
/* Input and the autopilot */
/* ---------------------------------------------------------------------------------------- */
const press = (key: Key, down: boolean) => {
const keys = world.current.keys;
if (down) keys.add(key);
else keys.delete(key);
setHeld((h) => ({ ...h, [key]: down }));
};
/** The autopilot, while it drives: the keys it holds. */
const pilot = useRef({ on: false, keys: new Set() });
const counter = useRef(0);
const drop = () => {
const w = world.current;
const id = `pin-${++counter.current}`;
const ahead = range * 1.7;
const pin = {
id,
x: (w.x + Math.sin(w.heading + 0.35) * ahead + WORLD) % WORLD,
y: (w.y - Math.cos(w.heading + 0.35) * ahead + WORLD) % WORLD,
label: `Pin ${counter.current}`,
};
w.pins = [...w.pins, pin];
setFrame(snap(w, range));
setHeld((h) => ({ ...h, pin: true }));
window.setTimeout(() => setHeld((h) => ({ ...h, pin: false })), 160);
say(`${pin.label} dropped ahead, ${Math.round(ahead)} metres.`);
return id;
};
// The autopilot: plays RUN on a loop while playing, steering with the same keys a reader has.
const run = autoplay && headingProp === undefined && playing;
const dropRef = useRef(drop);
dropRef.current = drop;
const pressRef = useRef(press);
pressRef.current = press;
useEffect(() => {
if (!run) return;
reader.current = false;
let index = 0;
let since = performance.now();
let lastNew = '';
let turned = 0;
let raf = 0;
const auto = pilot.current;
auto.on = true;
const set = (want: Partial>) => {
if (!auto.on) return;
for (const key of ['forward', 'back', 'left', 'right'] as Key[]) {
const on = Boolean(want[key]);
if (auto.keys.has(key) === on) continue;
if (on) auto.keys.add(key);
else auto.keys.delete(key);
pressRef.current(key, on);
}
};
const next = () => {
index = (index + 1) % RUN.length;
since = performance.now();
turned = 0;
set({});
};
let lastTick = performance.now();
const tick = (now: number) => {
const dt = (now - lastTick) / 1000;
lastTick = now;
const w = world.current;
const stepNow = RUN[index];
const elapsed = (now - since) / 1000;
if (stepNow.do === 'wait') {
if (elapsed >= stepNow.s) next();
} else if (stepNow.do === 'walk') {
set({ forward: true });
if (elapsed >= stepNow.s) next();
} else if (stepNow.do === 'turn') {
set(stepNow.by > 0 ? { right: true } : { left: true });
turned += TURN * dt;
if (turned >= Math.abs(stepNow.by)) next();
} else if (stepNow.do === 'seek') {
const id = stepNow.pin === 'new' ? lastNew : stepNow.pin;
const pin = w.pins.find((p) => p.id === id);
if (!pin || elapsed > 14) next();
else {
const want = Math.atan2(wrap(pin.x - w.x), -wrap(pin.y - w.y));
const off = turn(want, w.heading);
set({
left: off < -0.06,
right: off > 0.06,
forward: Math.abs(off) < 0.5,
});
}
} else {
if (stepNow.do === 'variant') setVariant(stepNow.to);
if (stepNow.do === 'rotate') setRotate(stepNow.to);
if (stepNow.do === 'drop') lastNew = dropRef.current();
if (stepNow.do === 'reset') {
w.pins = pinsProp;
w.near = new Set(
pinsProp
.filter((p) => Math.hypot(wrap(p.x - w.x), wrap(p.y - w.y)) <= range)
.map((p) => p.id),
);
}
next();
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => {
cancelAnimationFrame(raf);
set({});
auto.on = false;
};
}, [run, pinsProp, range]);
/** Real input: the reader takes over from the autopilot. */
const real = () => {
const auto = pilot.current;
if (auto.on) {
for (const key of auto.keys) press(key, false);
auto.keys.clear();
auto.on = false;
}
reader.current = true;
take();
};
const keyOf = (event: ReactKeyboardEvent): Key | null => {
switch (event.key) {
case 'ArrowUp':
case 'w':
case 'W':
return 'forward';
case 'ArrowDown':
case 's':
case 'S':
return 'back';
case 'ArrowLeft':
case 'a':
case 'A':
return 'left';
case 'ArrowRight':
case 'd':
case 'D':
return 'right';
}
return null;
};
const onKeyDown = (event: ReactKeyboardEvent) => {
if (event.metaKey || event.ctrlKey || event.altKey) return;
if (event.target instanceof HTMLButtonElement && (event.key === ' ' || event.key === 'Enter'))
return;
const key = keyOf(event);
if (key) {
event.preventDefault();
if (event.repeat) return;
real();
press(key, true);
} else if ((event.key === 'p' || event.key === 'P') && !event.repeat) {
event.preventDefault();
real();
drop();
}
};
const onKeyUp = (event: ReactKeyboardEvent) => {
const key = keyOf(event);
if (key) press(key, false);
};
const holdProps = (key: Key) => ({
onPointerDown: (event: ReactPointerEvent) => {
if (event.button !== 0) return;
event.currentTarget.setPointerCapture(event.pointerId);
real();
press(key, true);
},
onPointerUp: () => press(key, false),
onPointerCancel: () => press(key, false),
onLostPointerCapture: () => press(key, false),
onKeyDown: (event: ReactKeyboardEvent) => {
if ((event.key === ' ' || event.key === 'Enter') && !event.repeat) {
event.preventDefault();
event.stopPropagation();
real();
press(key, true);
}
},
onKeyUp: (event: ReactKeyboardEvent) => {
if (event.key === ' ' || event.key === 'Enter') {
event.stopPropagation();
press(key, false);
}
},
onBlur: () => press(key, false),
onContextMenu: (event: { preventDefault: () => void }) => event.preventDefault(),
});
/* ---------------------------------------------------------------------------------------- */
/* Drawing */
/* ---------------------------------------------------------------------------------------- */
const f = frame;
const scale = 100 / range;
const cos = Math.cos(-f.rot);
const sin = Math.sin(-f.rot);
const deg = (rad: number) => (rad * 180) / Math.PI;
const placed = f.pins.map((pin) => {
const dx = wrap(pin.x - f.x);
const dy = wrap(pin.y - f.y);
const rx = (dx * cos - dy * sin) * scale;
const ry = (dx * sin + dy * cos) * scale;
const d = Math.hypot(rx, ry);
const far = d > 100;
const k = far ? 100 / d : 1;
return { pin, x: rx * k, y: ry * k, far, metres: Math.round(d / scale) };
});
const celsius = f.temp;
const shownTemp = Math.round(unit === 'F' ? (celsius * 9) / 5 + 32 : celsius);
const tempText = `${shownTemp > 0 ? '+' : shownTemp < 0 ? '−' : ''}${Math.abs(shownTemp)} °${unit}`;
const nearest = placed.reduce<(typeof placed)[number] | null>(
(best, p) => (!best || p.metres < best.metres ? p : best),
null,
);
const facing = COMPASS[octant(((f.heading % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2))];
const summary =
`Minimap, ${rotate ? 'turning with you' : 'north up'}, ${variant} map. Facing ${facing}. ` +
(placed.length
? `${placed.length} ${placed.length === 1 ? 'pin' : 'pins'}${
nearest
? `; nearest ${nearest.pin.label ?? 'pin'}, ${nearest.metres} metres ${
SIDES[octant(Math.atan2(nearest.x, -nearest.y) + (rotate ? 0 : -f.heading))]
}`
: ''
}.`
: 'No pins.');
const sensing = sensor && f.sensor !== null;
const uid = `mmr${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
return (
{sensor && (
)}
Time
{clock(f.minutes)}
Temperature
{tempText}