rpg-engine 0.0.0-stage → 0.1.1

package/dist/dashboard/world.js

@@ -0,0 +1,357 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The World section (D-318): the world map as the player character knows it, hexes on paper that stays light in both themes, the names in the story's serif,
+// and the places as a list, its twin. It moves and zooms with the mouse, the wheel, touch and the keys; a place opens its card. The page draws only what view
+// gives with map (VIEW-7): a place the character does not know never reaches it.
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { sectionAddress } from "./address.js";
+import { readMap, readView } from "./api.js";
+import { fromLabel, terrainLabel } from "./game-words.js";
+import { Glass, GlassDefs } from "./glass.js";
+import { Icon } from "./icons.js";
+import { biomeLabel, biomes, placeKindLabel, placeKinds, symbolRadius } from "./map-symbols.js";
+import { plainLine } from "./markdown.js";
+import { PageHead } from "./pages.js";
+import { t } from "./text.js";
+import { clampScale, fading, fitView, hexCorners, hexesOf, lengthText, liftedOf, mapLayout, mapNameOf, mapPart, marksOf, nameRun, nameShares, pathOf, placeAreaLabels, placeLabels, regionEdges, riverOutline, scaleBar, trailCourse, waterOf, wayShapes, waysOf, zoomedView, } from "./world-map.js";
+// How wide the map shows around the party at first on a phone, in km; how much a step of the zoom and of the keys moves.
+const phoneSpan = 46;
+const zoomStep = 1.5;
+const keyStep = 60;
+// How far a pointer moves before a press is a drag, not a click, in pixels.
+const dragFrom = 4;
+// The ways in the order they are drawn, the rivers under the roads.
+const wayOrder = ["river", "road", "path"];
+export function WorldView({ version, lead }) {
+    const [map, setMap] = useState();
+    const [problem, setProblem] = useState();
+    const [chosen, setChosen] = useState();
+    // A place chosen from the list or on the map: the map brings it where the card leaves room.
+    const [focus, setFocus] = useState({ name: "", count: 0 });
+    // The map shown (POS-8): the one the player picked, else the party's, else the first the character knows.
+    const [picked, setPicked] = useState();
+    const current = map === undefined ? undefined : [picked, map.party === undefined ? undefined : mapNameOf(map, map.party), map.maps[0]?.name].find((name) => name !== undefined && map.maps.some((known) => known.name === name));
+    const part = useMemo(() => (map === undefined || current === undefined ? undefined : mapPart(map, current)), [map, current]);
+    // What the current map draws, as the drawing reads a world map: its places, its roads, its party.
+    const drawn = useMemo(() => (map === undefined || part === undefined ? undefined : { ...map, places: part.places, roads: part.roads, party: part.party, trail: [] }), [map, part]);
+    const layout = useMemo(() => (drawn === undefined ? undefined : mapLayout(drawn)), [drawn]);
+    // Read again whenever the game changes.
+    useEffect(() => {
+        readMap().then((read) => {
+            setMap(read);
+            setProblem(undefined);
+        }, (error) => setProblem(error instanceof Error ? error.message : String(error)));
+    }, [version]);
+    if (map === undefined || drawn === undefined || part === undefined || layout === undefined || (layout.spots.length === 0 && layout.regions.length === 0)) {
+        return (_jsxs("section", { class: "page-stack", "aria-labelledby": "world-title", children: [_jsx(PageHead, { section: "world", id: "world-title" }), _jsx("div", { class: "upcoming", children: _jsx("p", { children: problem ?? (map === undefined ? t("Reading the map…") : t("Your character knows no place on the map yet: it grows as the master writes where places are.")) }) })] }));
+    }
+    const choose = (name) => {
+        setChosen(name);
+        if (name !== undefined) {
+            setFocus((before) => ({ name, count: before.count + 1 }));
+        }
+    };
+    // Another map, and a place on it: the map changes, the place opens (ROA-8).
+    const goTo = (name, place) => {
+        setPicked(name);
+        setChosen(place);
+        if (place !== undefined) {
+            setFocus((before) => ({ name: place, count: before.count + 1 }));
+        }
+    };
+    return (_jsxs("section", { class: "world", "aria-labelledby": "world-title", children: [_jsx(PageHead, { section: "world", id: "world-title" }), _jsx(MapCard, { map: drawn, full: map, part: part, layout: layout, lead: lead, chosen: chosen, focus: focus, onChoose: choose, onGo: goTo }, part.name), _jsx(PlacesList, { map: drawn, layout: layout, onChoose: choose })] }));
+}
+/**
+ * The map's card: its head, with the maps the character knows as tabs; the map with its tools and the card of the chosen place; the key under it. `map` is what
+ * the current map draws, `full` the whole world map, for the ways that lead to other maps.
+ */
+function MapCard({ map, full, part, layout, lead, chosen, focus, onChoose, onGo }) {
+    const box = useRef(null);
+    const [size, setSize] = useState();
+    const [view, setView] = useState();
+    // The ways drawn by hand and the trail along them, once for each map: the same at every drawing.
+    const ways = useMemo(() => wayShapes(map), [map]);
+    const trails = useMemo(() => part.trails.map((run) => trailCourse(run, ways, waterOf(map))), [part, ways, map]);
+    const lifted = useMemo(() => liftedOf(map, layout, ways, trails), [map, layout, ways, trails]);
+    // Under a map aligned with another, the other one as a ghost: its ways and its places, faint (D-320).
+    const ghost = useMemo(() => {
+        if (part.ghost === undefined) {
+            return undefined;
+        }
+        const { places, roads } = part.ghost;
+        return { ways: wayShapes({ ...full, places, roads }), spots: places.filter((place) => place.x !== undefined && place.y !== undefined && place.radius === undefined) };
+    }, [part, full]);
+    const pointers = useRef(new Map());
+    const drag = useRef();
+    const narrow = size !== undefined && size.width < 600;
+    // The map's size, as the window changes it.
+    useEffect(() => {
+        const element = box.current;
+        if (element === null) {
+            return;
+        }
+        const observer = new ResizeObserver(() => setSize({ width: element.clientWidth, height: element.clientHeight }));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    // The first view: all the character knows; on a phone, the land around the party.
+    useEffect(() => {
+        if (size !== undefined && view === undefined) {
+            setView(startView(map, lifted, size));
+        }
+    }, [size]);
+    // A place chosen: the map brings it where the card leaves room, right of it on a wide screen, above it on a phone.
+    useEffect(() => {
+        const spot = layout.spots.find((one) => one.name === focus.name);
+        if (spot !== undefined && size !== undefined && view !== undefined) {
+            setView(roomFor(spot, view, size, narrow));
+        }
+    }, [focus.count]);
+    // The wheel zooms around the pointer; the page does not scroll under it.
+    useEffect(() => {
+        const element = box.current;
+        if (element === null || size === undefined) {
+            return;
+        }
+        const wheel = (event) => {
+            event.preventDefault();
+            const bounds = element.getBoundingClientRect();
+            setView((before) => before === undefined ? before : zoomedView(before, event.deltaY < 0 ? 1.2 : 1 / 1.2, { x: event.clientX - bounds.left, y: event.clientY - bounds.top }, size.width, size.height));
+        };
+        element.addEventListener("wheel", wheel, { passive: false });
+        return () => element.removeEventListener("wheel", wheel);
+    }, [size]);
+    const zoom = (factor) => {
+        if (size !== undefined) {
+            setView((before) => before === undefined ? before : zoomedView(before, factor, { x: size.width / 2, y: size.height / 2 }, size.width, size.height));
+        }
+    };
+    // One pointer moves the map, two pinch it: mouse, pen and touch alike. A press that hardly moves is a click.
+    const begin = (moved) => {
+        const points = [...pointers.current.values()];
+        const centre = middleOf(points);
+        drag.current = view === undefined ? undefined : { view, ...centre, spread: spreadOf(points), moved };
+    };
+    const onPointerDown = (event) => {
+        pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        begin(false);
+    };
+    const onPointerMove = (event) => {
+        const start = drag.current;
+        if (start === undefined || !pointers.current.has(event.pointerId)) {
+            return;
+        }
+        pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        const points = [...pointers.current.values()];
+        const centre = middleOf(points);
+        const spread = spreadOf(points);
+        if (!start.moved && Math.hypot(centre.x - start.x, centre.y - start.y) < dragFrom && points.length === 1) {
+            return;
+        }
+        if (!start.moved) {
+            event.currentTarget.setPointerCapture(event.pointerId);
+            start.moved = true;
+        }
+        const s = start.spread > 0 && spread > 0 ? clampScale(start.view.s * spread / start.spread) : start.view.s;
+        setView({ s, x: start.view.x - (centre.x - start.x) / s, y: start.view.y + (centre.y - start.y) / s });
+    };
+    const onPointerUp = (event) => {
+        pointers.current.delete(event.pointerId);
+        const moved = drag.current?.moved === true;
+        if (pointers.current.size > 0) {
+            begin(moved);
+        }
+        else if (!moved) {
+            // A click on a place opens its card; on the land, it closes it.
+            const name = event.target.closest("[data-place]")?.dataset.place;
+            onChoose(name);
+            drag.current = undefined;
+        }
+        else {
+            drag.current = undefined;
+        }
+    };
+    const onKeyDown = (event) => {
+        // Escape closes the card from anywhere in the map, and the map takes the keys again.
+        if (event.key === "Escape" && chosen !== undefined) {
+            onChoose(undefined);
+            box.current?.focus();
+            return;
+        }
+        if (event.target !== box.current || view === undefined) {
+            return;
+        }
+        const step = keyStep / view.s;
+        const moves = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] };
+        const move = moves[event.key];
+        if (move !== undefined) {
+            event.preventDefault();
+            setView({ ...view, x: view.x + move[0], y: view.y + move[1] });
+        }
+        else if (event.key === "+" || event.key === "=") {
+            zoom(zoomStep);
+        }
+        else if (event.key === "-") {
+            zoom(1 / zoomStep);
+        }
+    };
+    const spot = layout.spots.find((one) => one.name === chosen);
+    const label = layout.partySpot === undefined ? t("World map") : t("World map, your party at {place}", { place: layout.partySpot.name });
+    const here = full.maps.find((known) => known.name === part.name);
+    const partyMap = full.party === undefined ? undefined : mapNameOf(full, full.party);
+    return (_jsxs("section", { class: "map-card", "aria-labelledby": "map-title", children: [_jsxs("header", { class: "map-head", children: [_jsx("h3", { id: "map-title", children: t("Map") }), _jsx("span", { class: "map-sub", children: [
+                            layout.spots.length === 1 ? t("1 place you know") : t("{count} places you know", { count: layout.spots.length }),
+                            here?.under === undefined ? undefined : t("under {map}", { map: here.under }),
+                            here?.mirror === undefined ? undefined : t("the mirror of {map}", { map: here.mirror }),
+                            partyMap === undefined || partyMap === part.name ? undefined : t("your party is on {map}", { map: partyMap }),
+                        ].filter((text) => text !== undefined).join(" · ") }), _jsxs("button", { type: "button", class: "map-to-list", onClick: () => document.getElementById("places-title")?.scrollIntoView({ block: "start", behavior: "smooth" }), children: [_jsx(Icon, { name: "list" }), _jsx("span", { children: t("List") })] })] }), full.maps.length > 1 && (_jsx("nav", { class: "map-tabs", "aria-label": t("Maps"), children: full.maps.map((known) => (_jsxs("button", { type: "button", class: "map-tab", "aria-current": known.name === part.name ? "true" : undefined, onClick: () => onGo(known.name), children: [known.name, known.name === partyMap && _jsx("span", { class: "map-tab-party", "aria-label": t("your party is here") })] }, known.name))) })), _jsxs("div", { ref: box, class: "map", tabIndex: 0, role: "region", "aria-roledescription": "map", "aria-label": label, "aria-describedby": "map-help", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, children: [size !== undefined && view !== undefined && (_jsx(Drawing, { map: map, layout: layout, ways: ways, trails: trails, lifted: lifted, ghost: ghost, passages: part.passages.map((passage) => passage.place), lead: lead, view: view, size: size, narrow: narrow, chosen: chosen })), _jsxs("div", { class: "map-tools", role: "toolbar", "aria-label": t("Map"), children: [_jsx(Tool, { name: "plus", label: t("Zoom in"), onClick: () => zoom(zoomStep) }), _jsx(Tool, { name: "minus", label: t("Zoom out"), onClick: () => zoom(1 / zoomStep) }), _jsx(Tool, { name: "locate", label: t("Your party"), onClick: () => (map.party !== undefined && view !== undefined ? setView({ ...view, x: map.party.x, y: map.party.y }) : partyMap !== undefined && onGo(partyMap)) }), _jsx(Tool, { name: "fit", label: t("All you know"), onClick: () => size !== undefined && setView(fitView(lifted, size.width, size.height)) })] }), _jsx("p", { id: "map-help", class: "visually-hidden", children: t("Arrows move the map, plus and minus zoom, Escape closes a place's card. The list of places below says the same.") }), spot !== undefined && _jsx(PlaceCard, { place: spot, map: full, layout: layout, narrow: narrow, onClose: () => onChoose(undefined), onGo: onGo })] }), _jsx(Key, { map: map, layout: layout, narrow: narrow, trail: trails.length > 0, passages: part.passages.length > 0 })] }));
+}
+/**
+ * The drawing, from the view: the paper, the hexes lit and fogged with the marks of their biome and the ink round each region, the ways drawn by hand with
+ * their tails into the fog, the trail, the places, the party, the labels, the compass and the scale.
+ */
+function Drawing({ map, layout, ways, trails, lifted, ghost, passages, lead, view, size, narrow, chosen }) {
+    const { width, height } = size;
+    const X = (x) => width / 2 + (x - view.x) * view.s;
+    const Y = (y) => height / 2 - (y - view.y) * view.s;
+    const screen = (points) => points.map((point) => ({ x: X(point.x), y: Y(point.y) }));
+    const line = (points) => pathOf(screen(points));
+    const { across, hexes } = hexesOf(view, width, height, lifted, layout.regions);
+    const hexPixels = across * view.s;
+    const edges = regionEdges(hexes, across);
+    const scale = scaleBar(view.s, map.unit);
+    const image = lead?.image === undefined ? undefined : `/images/${encodeURIComponent(lead.image.file)}?v=${lead.image.version}`;
+    const party = map.party;
+    // Ink a little bolder near, finer far.
+    const weight = Math.min(1.5, Math.max(0.7, view.s / 8));
+    const drawn = [...ways].sort((first, second) => wayRank(first.kind) - wayRank(second.kind));
+    // What the labels must leave free: the tools, the compass, the scale and the places' symbols; the regions' names go first, below their middle, above, across it.
+    const reserved = [{ x: width - 64, y: 0, width: 64, height: 220 }, { x: 0, y: 0, width: 80, height: 86 }, { x: 0, y: height - 50, width: 210, height: 50 }];
+    const markBoxes = layout.spots.map((spot) => ({ x: X(spot.x) - symbolOf(spot).r, y: Y(spot.y) - symbolOf(spot).r, width: symbolOf(spot).r * 2, height: symbolOf(spot).r * 2 }));
+    const regionWishes = layout.regions.map((region) => ({
+        x: X(region.x),
+        ys: nameShares(region, hexes).map((share) => Y(region.y + region.radius * share)),
+        width: region.name.length * 14,
+        height: region.terrain === undefined ? 20 : 34,
+    }));
+    const regionLabels = placeAreaLabels(regionWishes, markBoxes, reserved, width, height);
+    const regionBoxes = regionLabels.flatMap((placed, index) => placed === undefined ? [] : [{ x: placed.x - regionWishes[index].width / 2 - 3, y: placed.y - 15, width: regionWishes[index].width + 6, height: regionWishes[index].height }]);
+    // A way's name along its longest run between two stops on the screen, following its bends, when the run holds it.
+    const wayNames = drawn.map((way) => {
+        const run = nameRun(screen(way.course), way.stops, way.name.length * 7.5 + 60);
+        // The bends of a river or a path would scatter its name: it goes along their way instead, beside them.
+        return run === undefined || wayLook(way.kind) === "road" ? run : [run[0], run.at(-1)];
+    });
+    const labels = placeLabels(layout.spots.map((spot) => {
+        const isParty = spot === layout.partySpot;
+        const big = isParty || (placeKinds[spot.kind ?? ""]?.size ?? 0) >= 2;
+        return { text: spot.name, x: X(spot.x), y: Y(spot.y), r: isParty ? 19 : symbolOf(spot).r + 1, size: big ? 16 : 13.5, weight: weightOf(spot, layout) };
+    }), markBoxes, [...reserved, ...regionBoxes], width, height);
+    return (_jsxs("svg", { class: "map-svg", viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", children: [_jsxs("defs", { children: [_jsx(GlassDefs, { prefix: "map" }), _jsxs("filter", { id: "map-grain", x: "0", y: "0", width: "100%", height: "100%", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.9", numOctaves: 3, seed: 2 }), _jsx("feColorMatrix", { values: "0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.09 0" }), _jsx("feComposite", { in2: "SourceGraphic", operator: "in" })] }), _jsxs("filter", { id: "map-ink", x: "-5%", y: "-5%", width: "110%", height: "110%", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.05", numOctaves: 2, seed: 4 }), _jsx("feDisplacementMap", { in: "SourceGraphic", scale: 2.2 })] }), _jsxs("radialGradient", { id: "map-age", cx: "50%", cy: "50%", r: "72%", children: [_jsx("stop", { offset: "0.62", "stop-color": "#6e5028", "stop-opacity": "0" }), _jsx("stop", { offset: "1", "stop-color": "#6e5028", "stop-opacity": "0.3" })] }), _jsx("clipPath", { id: "map-token", children: _jsx("circle", { r: 13 }) }), wayNames.map((run, index) => run === undefined ? null : _jsx("path", { id: `world-way-name-${index}`, d: pathOf(run) }, index))] }), _jsx("rect", { class: "map-fog", width: width, height: height }), hexes.map((hex, index) => (_jsx("polygon", { class: hex.lit ? `hex lit ${biomeLook(hex.biome)}` : "hex fogged", "fill-opacity": hex.lit ? (0.8 + hex.tone * 0.2).toFixed(2) : undefined, points: hexCorners(hex, across).map((corner) => `${X(corner.x).toFixed(1)},${Y(corner.y).toFixed(1)}`).join(" ") }, index))), hexPixels >= 24 && (_jsx("g", { class: "tufts", children: hexes.filter((hex) => hex.lit && hex.biome !== undefined && biomes[hex.biome] !== undefined).flatMap((hex, index) => marksOf(hex, hexPixels).map((mark, at) => (_jsx("path", { class: `tuft ${hex.biome}`, transform: `translate(${(X(hex.x) + mark.x).toFixed(1)} ${(Y(hex.y) + mark.y).toFixed(1)}) scale(${mark.scale.toFixed(2)})`, d: biomes[hex.biome ?? ""].mark }, `${index} ${at}`)))) })), [...edges].map(([region, segments]) => (_jsx("path", { class: `region-edge ${biomeLook(layout.regions.find((one) => one.name === region)?.biome)}`, d: segments.map(([from, to]) => `M${X(from.x).toFixed(1)} ${Y(from.y).toFixed(1)}L${X(to.x).toFixed(1)} ${Y(to.y).toFixed(1)}`).join(""), filter: "url(#map-ink)" }, region))), _jsx("rect", { class: "map-grain", width: width, height: height, filter: "url(#map-grain)" }), trails.map((run, index) => _jsx("path", { class: "trail", d: line(run) }, index)), ghost !== undefined && (_jsxs("g", { class: "ghost", children: [ghost.ways.map((way) => _jsx(WayDrawing, { way: way, look: wayLook(way.kind), screen: screen, weight: weight }, way.name)), ghost.spots.map((spot) => _jsx(PlaceSymbol, { spot: spot, x: X(spot.x), y: Y(spot.y), chosen: false }, spot.name))] })), drawn.map((way) => _jsx(WayDrawing, { way: way, look: wayLook(way.kind), screen: screen, weight: weight }, way.name)), drawn.map((way, index) => wayNames[index] === undefined ? null : (_jsx("text", { class: `way-label ${wayLook(way.kind)}`, dy: wayLook(way.kind) === "river" ? -16 : -6, children: _jsx("textPath", { href: `#world-way-name-${index}`, startOffset: "50%", "text-anchor": "middle", children: way.name }) }, way.name))), _jsx("rect", { class: "map-age", width: width, height: height, fill: "url(#map-age)" }), layout.spots.filter((spot) => passages.includes(spot.name)).map((spot) => _jsx("circle", { class: "passage-ring", cx: X(spot.x), cy: Y(spot.y), r: symbolOf(spot).r + 5 }, spot.name)), layout.spots.filter((spot) => spot !== layout.partySpot).map((spot) => _jsx(PlaceSymbol, { spot: spot, x: X(spot.x), y: Y(spot.y), chosen: spot.name === chosen }, spot.name)), party !== undefined && (_jsxs("g", { class: layout.partySpot !== undefined && layout.partySpot.name === chosen ? "party-mark selected" : "party-mark", transform: `translate(${X(party.x).toFixed(1)} ${Y(party.y).toFixed(1)})`, "data-place": layout.partySpot?.name, children: [_jsx("circle", { class: "party-pulse", r: 17 }), _jsxs("g", { filter: "url(#map-drop)", children: [_jsx("circle", { class: "party-ring", r: 17 }), _jsx("circle", { class: "party-disc", r: 14.5 }), image !== undefined && _jsx("image", { href: image, x: -13, y: -13, width: 26, height: 26, "clip-path": "url(#map-token)" }), _jsx(Glass, { r: 14.5, prefix: "map" })] })] })), _jsxs("g", { class: "labels", children: [layout.regions.map((region, index) => {
+                        const placed = regionLabels[index];
+                        return placed === undefined ? null : (_jsxs("g", { children: [_jsx("text", { class: "label region-label", x: placed.x, y: placed.y, "text-anchor": "middle", children: region.name }), region.terrain !== undefined && _jsx("text", { class: "label region-note", x: placed.x, y: placed.y + 15, "text-anchor": "middle", children: terrainLabel(region.terrain) })] }, region.name));
+                    }), layout.spots.map((spot, index) => {
+                        const label = labels[index];
+                        const big = spot === layout.partySpot || (placeKinds[spot.kind ?? ""]?.size ?? 0) >= 2;
+                        return label.hidden ? null : _jsx("text", { class: `label place-label${big ? " big" : ""}`, x: label.x, y: label.y, "text-anchor": label.anchor, children: label.text }, spot.name);
+                    })] }), _jsxs("g", { class: "compass", transform: `translate(${narrow ? 34 : 40} ${narrow ? 42 : 46}) scale(${narrow ? 0.85 : 1})`, children: [_jsx("circle", { class: "compass-ring", r: 15 }), _jsx("path", { class: "compass-diagonals", d: "M-12-12 12 12 M-12 12 12-12" }), _jsx("path", { class: "compass-point", d: "M0-26 5-5 26 0 5 5 0 26-5 5-26 0-5-5Z" }), _jsx("path", { class: "compass-shade", d: "M0-26 5-5 0 0Z M26 0 5 5 0 0Z M0 26-5 5 0 0Z M-26 0-5-5 0 0Z" }), _jsx("text", { class: "compass-n", y: -30, "text-anchor": "middle", children: "N" })] }), _jsxs("g", { class: "scale", transform: `translate(16 ${height - 22})`, children: [_jsx("rect", { class: "scale-back", x: -8, y: -20, width: scale.width + 64, height: 34, rx: 6 }), _jsx("rect", { class: "scale-a", width: scale.width / 2, height: 5 }), _jsx("rect", { class: "scale-b", x: scale.width / 2, width: scale.width / 2, height: 5 }), _jsx("text", { class: "scale-text", x: 0, y: -8, children: "0" }), _jsx("text", { class: "scale-text", x: scale.width, y: -8, "text-anchor": "middle", children: scale.value }), _jsx("text", { class: "scale-text", x: scale.width + 8, y: 5, children: map.unit.name === "km" ? "km" : t("miles") })] })] }));
+}
+/**
+ * A way drawn by hand, in the map's ink: a road as two lines, a path dashed, a river in water widening toward its mouth, outlined in ink; its tails fade into
+ * the fog.
+ */
+function WayDrawing({ way, look, screen, weight }) {
+    const course = screen(way.course);
+    return (_jsxs("g", { class: `way-drawing ${look}`, children: [way.tails.map((tail) => fading(screen(tail.course)).map((piece, index) => (_jsx("path", { class: `tail ${look}`, d: pathOf(piece.points), "stroke-opacity": piece.opacity.toFixed(2), "stroke-width": (look === "river" ? (tail.from === "before" ? 1.6 : 4.4) : look === "road" ? 2.2 : 1.3) * weight }, `${tail.from} ${index}`)))), look === "river" && _jsx("path", { class: "river-water", d: riverOutline(course, 1.6 * weight, 4.6 * weight), filter: "url(#map-ink)" }), look === "road" && (_jsxs(_Fragment, { children: [_jsx("path", { class: "road-ink", d: pathOf(course), "stroke-width": 3.8 * weight, filter: "url(#map-ink)" }), _jsx("path", { class: "road-paper", d: pathOf(course), "stroke-width": 1.5 * weight })] })), (look === "path" || look === "other") && _jsx("path", { class: `${look}-ink`, d: pathOf(course), "stroke-width": 1.4 * weight, filter: "url(#map-ink)" })] }));
+}
+/** A place's symbol by its kind: a disc with its picture, in four sizes; a kind the page does not know, a plain dot. */
+function PlaceSymbol({ spot, x, y, chosen }) {
+    const kind = spot.kind === undefined ? undefined : placeKinds[spot.kind];
+    const { r } = symbolOf(spot);
+    const scale = r * 1.62 / 24;
+    return (_jsxs("g", { class: `spot size-${kind?.size ?? "dot"}${chosen ? " selected" : ""}`, transform: `translate(${x.toFixed(1)} ${y.toFixed(1)})`, "data-place": spot.name, children: [kind === undefined ? _jsx("circle", { class: "spot-dot", r: 4 }) : (_jsxs("g", { filter: "url(#map-drop)", children: [_jsx("circle", { class: "spot-disc", r: r }), _jsx("path", { class: "spot-glyph", transform: `translate(${-12 * scale} ${-12 * scale}) scale(${scale})`, d: kind.glyph }), _jsx(Glass, { r: r, prefix: "map" })] })), _jsx("circle", { class: "spot-hit", r: Math.max(r, 16) })] }));
+}
+/** The card of a place: its picture, what it is and where, its text as the character knows it, what it holds, its ways, the scene when the party is there. */
+function PlaceCard({ place, map, layout, narrow, onClose, onGo }) {
+    const [text, setText] = useState();
+    const here = place === layout.partySpot;
+    const region = layout.regions.find((one) => place.within.includes(one.name));
+    const inside = layout.inside(place.name);
+    const ways = waysOf(map, place.name);
+    const closer = useRef(null);
+    // Its text, read when the card opens: the first lines as the character knows them.
+    useEffect(() => {
+        setText(undefined);
+        readView(place.name).then((page) => setText(page.kind === "page" ? plainLine(page.text) : undefined), () => setText(undefined));
+        closer.current?.focus({ preventScroll: true });
+    }, [place.name]);
+    const eyebrow = [placeKindLabel(place.kind) ?? t("Place"), region?.name, here || place.from?.direction === undefined ? undefined : t("{distance} from you", { distance: fromLabel(place.from, (km) => lengthText(km, map.unit)) })].filter((part) => part !== undefined);
+    return (_jsxs("div", { class: narrow ? "place-card sheet" : "place-card", role: "dialog", "aria-labelledby": "place-card-title", onPointerDown: (event) => event.stopPropagation(), onPointerUp: (event) => event.stopPropagation(), children: [place.image !== undefined && _jsx("img", { class: "pc-image", src: `/images/${encodeURIComponent(place.image.file)}?v=${place.image.version}`, alt: "" }), _jsx("button", { ref: closer, type: "button", class: "pc-close icon-button", "aria-label": t("Close"), onClick: onClose, children: _jsx(Icon, { name: "close" }) }), _jsxs("div", { class: "pc-body", children: [_jsx("p", { class: "pc-eyebrow", children: eyebrow.join(" · ") }), _jsx("h3", { id: "place-card-title", children: place.name }), here && (_jsxs("p", { class: "pc-here", children: [_jsx("span", { class: "here-dot", "aria-hidden": "true" }), t("Your party is here")] })), text !== undefined && _jsx("p", { class: "pc-text", children: text }), inside.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h4", { class: "pc-sub", children: t("Inside") }), _jsx("ul", { class: "in-chips", children: inside.flatMap((child) => [
+                                    _jsx("li", { class: "in-chip", children: child.name }, child.name),
+                                    ...layout.inside(child.name).map((grandchild) => (_jsxs("li", { class: "in-chip", children: [_jsx("span", { class: "in-path", children: "\u203A" }), " ", grandchild.name] }, grandchild.name))),
+                                ]) })] })), ways.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h4", { class: "pc-sub", children: t("Ways") }), _jsx("ul", { class: "pc-ways", children: ways.map((way, index) => (_jsxs("li", { children: [_jsx(Icon, { name: wayIcon(way.kind) }), _jsxs("span", { children: [_jsx("b", { children: way.road }), ` ${t("to")} `, way.map === undefined || way.to === undefined ? way.to ?? t("somewhere you do not know") : (_jsx("button", { type: "button", class: "way-to-map", onClick: () => onGo(way.map, way.to), children: t("{place}, on {map}", { place: way.to, map: way.map }) })), way.km !== undefined && " · ", way.km !== undefined && _jsx("span", { class: "way-km num", children: lengthText(way.km, map.unit) })] })] }, index))) })] })), here && (_jsxs("a", { class: "pc-scene", href: sectionAddress("scene"), children: [_jsx(Icon, { name: "scene" }), _jsx("span", { children: t("Scene") })] }))] })] }));
+}
+/** The key under the map: the ways, the trail and the party; the land's biomes, difficult terrain and the fog; the kinds of place on this map. */
+function Key({ map, layout, narrow, trail, passages }) {
+    // A passage is no line on the map: its ring says it (ROA-8).
+    const ways = [...new Set(map.roads.filter((road) => road.kind !== "portal").map((road) => wayLook(road.kind)))].sort((first, second) => wayRank(first) - wayRank(second));
+    const lands = [...new Set(layout.regions.map((region) => biomeLook(region.biome)))].filter((look) => look !== "open");
+    const kinds = [...new Set(layout.spots.map((spot) => (spot.kind !== undefined && placeKinds[spot.kind] !== undefined ? spot.kind : "other")))];
+    return (_jsxs("details", { class: "map-key", open: !narrow, children: [_jsx("summary", { children: t("Key") }), _jsxs("div", { class: "key-groups", children: [_jsxs("div", { class: "key-group", children: [_jsx("h4", { class: "key-title", children: t("Ways") }), _jsxs("ul", { children: [ways.map((look) => (_jsxs("li", { children: [_jsxs("svg", { class: "key-way", viewBox: "0 0 30 16", "aria-hidden": "true", children: [look === "river" && _jsx("path", { class: "river-water", d: "M2 9.6Q8 5.8 15 8.2T28 6.6L28 9.6Q22 12 15 10.4T2 10.8Z" }), look === "road" && (_jsxs(_Fragment, { children: [_jsx("path", { class: "road-ink", d: "M2 9q7-4 13-1t13-1", "stroke-width": 3.8 }), _jsx("path", { class: "road-paper", d: "M2 9q7-4 13-1t13-1", "stroke-width": 1.5 })] })), (look === "path" || look === "other") && _jsx("path", { class: `${look}-ink`, d: "M2 9q7-4 13-1t13-1", "stroke-width": 1.4 })] }), wayLabel(look)] }, look))), trail && (_jsxs("li", { children: [_jsx("svg", { class: "key-way", viewBox: "0 0 30 16", "aria-hidden": "true", children: _jsx("path", { class: "trail", d: "M4 8h22" }) }), t("Your trail")] })), _jsxs("li", { children: [_jsxs("svg", { class: "key-symbol", viewBox: "-9 -9 18 18", "aria-hidden": "true", children: [_jsx("circle", { class: "party-ring", r: 7.5 }), _jsx("circle", { class: "party-disc", r: 5.5 })] }), t("Your party")] }), passages && (_jsxs("li", { children: [_jsx("svg", { class: "key-symbol", viewBox: "-12 -12 24 24", "aria-hidden": "true", children: _jsx("circle", { class: "passage-ring", r: 9 }) }), t("Passage to another map")] }))] })] }), _jsxs("div", { class: "key-group", children: [_jsx("h4", { class: "key-title", children: t("Land") }), _jsxs("ul", { children: [lands.map((look) => (_jsxs("li", { children: [_jsxs("svg", { class: "key-swatch", viewBox: "0 0 22 16", "aria-hidden": "true", children: [_jsx("rect", { class: `hex lit ${look}`, x: 1, y: 1, width: 20, height: 14, rx: 3 }), biomes[look] !== undefined && _jsx("path", { class: `tuft ${look}`, transform: "translate(11 9)", d: biomes[look].mark })] }), biomeLabel(look) ?? t("Other land")] }, look))), _jsxs("li", { children: [_jsx("svg", { class: "key-swatch", viewBox: "0 0 22 16", "aria-hidden": "true", children: _jsx("rect", { class: "hex fogged", x: 1, y: 1, width: 20, height: 14, rx: 3 }) }), t("Not found yet")] })] })] }), _jsxs("div", { class: "key-group", children: [_jsx("h4", { class: "key-title", children: t("Places") }), _jsx("ul", { children: kinds.map((kind) => (_jsxs("li", { children: [_jsx("svg", { class: "key-symbol", viewBox: "-17 -17 34 34", "aria-hidden": "true", children: _jsx(PlaceSymbol, { spot: { name: kind, x: 0, y: 0, within: [], ...(kind === "other" ? {} : { kind }) }, x: 0, y: 0, chosen: false }) }), placeKindLabel(kind) ?? t("Other place")] }, kind))) })] })] })] }));
+}
+/** The map's twin: every place the character knows, nearest the party first, with how far and which way; then the regions and the ways. */
+function PlacesList({ map, layout, onChoose }) {
+    const choose = (name) => {
+        onChoose(name);
+        document.querySelector(".map")?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    };
+    return (_jsxs("section", { class: "map-list", "aria-labelledby": "places-title", children: [_jsxs("header", { class: "map-head", children: [_jsx("h3", { id: "places-title", children: t("Places you know") }), _jsx("span", { class: "map-sub", children: map.party === undefined ? t("on the map") : t("from your party, as the crow flies") })] }), _jsx("ol", { class: "places", children: layout.spots.map((spot) => (_jsx("li", { children: _jsxs("button", { type: "button", class: "place-row", onClick: () => choose(spot.name), children: [_jsx("span", { class: "pr-name", children: spot.name }), _jsx("span", { class: "pr-kind", children: [placeKindLabel(spot.kind) ?? t("Place"), ...(layout.inside(spot.name).length > 0 ? [t("{count} inside", { count: layout.inside(spot.name).length })] : [])].join(" · ") }), _jsx("span", { class: "pr-far num", dir: "auto", children: spot.from === undefined ? "" : fromLabel(spot.from, (km) => lengthText(km, map.unit)) })] }) }, spot.name))) }), (layout.regions.length > 0 || map.roads.length > 0) && _jsx("h4", { class: "pc-sub", children: t("Regions and ways") }), _jsxs("ul", { class: "places", children: [layout.regions.map((region) => _jsx(RegionRow, { region: region, unit: map.unit }, region.name)), map.roads.map((road) => (_jsx("li", { children: _jsxs("span", { class: "place-row static", children: [_jsx("span", { class: "pr-name", children: road.name }), _jsx("span", { class: "pr-kind", children: wayLabel(road.kind) }), _jsx("span", { class: "pr-far num", children: lengthText(road.points.slice(1).reduce((sum, point) => sum + point.km, 0), map.unit) })] }) }, road.name)))] })] }));
+}
+function RegionRow({ region, unit }) {
+    return (_jsx("li", { children: _jsxs("span", { class: "place-row static", children: [_jsx("span", { class: "pr-name", children: region.name }), _jsx("span", { class: "pr-kind", children: [t("Region"), biomeLabel(region.biome), region.terrain === undefined ? undefined : terrainLabel(region.terrain)].filter((part) => part !== undefined).join(" · ") }), _jsx("span", { class: "pr-far num", dir: "auto", children: t("{length} across", { length: lengthText(region.radius * 2, unit) }) })] }) }));
+}
+function Tool({ name, label, onClick }) {
+    return (_jsx("button", { type: "button", class: "map-tool", "aria-label": label, "data-tip": label, onClick: onClick, onPointerDown: (event) => event.stopPropagation(), onPointerUp: (event) => event.stopPropagation(), children: _jsx(Icon, { name: name }) }));
+}
+/** The view at first: all the character knows; on a phone, the land around the party. */
+function startView(map, lifted, size) {
+    return size.width < 600 && map.party !== undefined ? { x: map.party.x, y: map.party.y, s: clampScale(size.width / phoneSpan) } : fitView(lifted, size.width, size.height);
+}
+/** The view that brings a place where the card leaves room: right of it on a wide screen, in the upper part on a phone. */
+function roomFor(spot, view, size, narrow) {
+    const freeX = narrow ? size.width / 2 : (340 + size.width - 60) / 2;
+    const freeY = narrow ? size.height * 0.2 : size.height / 2;
+    return { ...view, x: spot.x - (freeX - size.width / 2) / view.s, y: spot.y - (size.height / 2 - freeY) / view.s };
+}
+function symbolOf(spot) {
+    const kind = spot.kind === undefined ? undefined : placeKinds[spot.kind];
+    return { r: kind === undefined ? 5 : symbolRadius[kind.size] };
+}
+/** How much a place's name weighs for its room: the party's place, then the larger kinds, then those holding more. */
+function weightOf(spot, layout) {
+    return (spot === layout.partySpot ? 100 : 0) + (placeKinds[spot.kind ?? ""]?.size ?? -1) * 20 + layout.inside(spot.name).length * 5;
+}
+/** The look of a biome: its own when the page draws it, the bare land for none, another for one it does not know. */
+function biomeLook(biome) {
+    return biome === undefined ? "open" : biomes[biome] !== undefined ? biome : "unknown-biome";
+}
+function wayLook(kind) {
+    return wayOrder.includes(kind) ? kind : "other";
+}
+function wayRank(kind) {
+    const rank = wayOrder.indexOf(wayLook(kind));
+    return rank < 0 ? wayOrder.length : rank;
+}
+function wayIcon(kind) {
+    return kind === "river" ? "river" : kind === "path" ? "path" : "road";
+}
+function middleOf(points) {
+    return { x: points.reduce((sum, point) => sum + point.x, 0) / points.length, y: points.reduce((sum, point) => sum + point.y, 0) / points.length };
+}
+function spreadOf(points) {
+    return points.length > 1 ? Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y) : 0;
+}
+/** A kind of way by its name in the page's language: River, Road, Path. */
+function wayLabel(kind) {
+    const labels = { river: t("River"), road: t("Road"), path: t("Path"), portal: t("Portal"), other: t("Other way") };
+    return labels[kind] ?? `${kind[0]?.toUpperCase() ?? ""}${kind.slice(1)}`;
+}

package/dist/dashboard-server.d.ts

@@ -0,0 +1,38 @@
+import type { Context, Player } from "./core/context.ts";
+import type { SessionStore } from "./core/session-store.ts";
+/**
+ * The ports the dashboard tries in turn, taking the first that is free: the same link from one chat to the next (D-272). Windows may keep ranges of ports
+ * from boot to boot (netsh int ipv4 show excludedportrange): then the next range, and at last any free port, whose link status gives all the same (D-338).
+ */
+export declare const dashboardPorts: number[];
+/**
+ * The ports for a campaign's dashboard: its own in each range first, worked out from its folder, then the others (D-353). Its link stays the same from one
+ * chat to the next, as long as no other program holds that port, so that the player can keep it, and a page left open comes back by itself.
+ */
+export declare function campaignPorts(root: string): number[];
+/** A dashboard that is running: its link, and how to stop it. */
+export interface Dashboard {
+    url: string;
+    /** The player through the page: ask's buttons, while a page is open (D-279). */
+    player: Player;
+    /**
+     * What the player did on the page since it was last taken, for the master's next call: the saves, in order (D-359), then each setting as it is now against
+     * how it was (D-341); and what gives it back when that call never answers.
+     */
+    news(): {
+        lines: string[];
+        restore(): void;
+    };
+    close(): Promise<void>;
+}
+/** Where the dashboard listens, and the page it serves. */
+export interface DashboardOptions {
+    /** The ports to try, in turn (D-272). */
+    ports?: number[];
+    /** The folder of the built page: dist/dashboard. */
+    page?: string;
+    /** How long a question waits for a page to come back, after the last one closed: a few seconds; less in the tests. */
+    pageReturn?: number;
+}
+/** Serves the dashboard of the campaign of context.folder, on 127.0.0.1 only, at the first of the ports that is free; undefined when none is. */
+export declare function startDashboard(context: Context, session: SessionStore, options?: DashboardOptions): Promise<Dashboard | undefined>;