rpg-engine 0.0.0-stage → 0.1.1

package/dist/dashboard/place-map-view.js

@@ -0,0 +1,362 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The map of the place where the party is (GRD-6, D-323, D-325), in ink and washes on light paper in both themes: walls hatched in bundles with a
+// shade along them, the floor's outline rounded where it meets rock, the ground by the place's look and its kinds, the things of the legend drawn by kind, by
+// square or by piece, doors and where squares lead, the squares' names; who stands where as coins, the one acting raised off the paper, a foe the master marked glowing (D-415); then the key, and who
+// is where in words, the map's twin.
+import { Fragment } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { CardHead } from "./card.js";
+import { Glass, GlassDefs } from "./glass.js";
+import { iconPath } from "./icons.js";
+import { strangerLabel } from "./labels.js";
+import { sideIcons, sideOf } from "./party.js";
+import { columnName, exitSide, floorLoops, groundKinds, isSolid, isStandable, isWalled, kindAt, nextTo, piecesOf, squareName, squareOf, symbolAt, tracedLoop } from "./place-map.js";
+import { conditionsPref, tokenSymbolsPref, useChoice, usePref } from "./prefs.js";
+import { statusMarks, statusWords } from "./status.js";
+import { t } from "./text.js";
+// How wide a square is drawn, in pixels.
+const size = 40;
+// The order of who is where under the map.
+const roles = ["pc", "companion", "other"];
+export function PlaceMap({ map, place, acting, picking }) {
+    const svg = useRef(null);
+    const scale = useScale(svg);
+    const sides = map.exits.map((exit) => exitSide(map, squareOf(exit.square) ?? { column: 0, row: 0 }));
+    const [left, top] = [30 + (sides.includes("left") ? 30 : 0), 30 + (sides.includes("top") ? 36 : 0)];
+    const [right, bottom] = [14 + (sides.includes("right") ? 30 : 0), 14 + (sides.includes("bottom") ? 34 : 0)];
+    const X = (column) => left + column * size;
+    const Y = (row) => top + row * size;
+    const [width, height] = [left + map.columns * size + right, top + map.rows * size + bottom];
+    const squares = Array.from({ length: map.rows }, (_, row) => Array.from({ length: map.columns }, (_, column) => ({ column, row }))).flat();
+    const open = squares.filter((square) => !isSolid(map, square));
+    const loops = floorLoops(map, X, Y);
+    const walled = isWalled(map);
+    const floor = loops.map((loop) => tracedLoop(loop, false, size * 0.5)).join("");
+    const outline = walled ? loops.map((loop) => tracedLoop(loop, true, size * 0.5)).join("") : "";
+    const featureAt = (square) => map.legend.find((feature) => feature.symbol === symbolAt(map, square));
+    // Hatching only next to the rooms: farther the rock or the masonry is left as paper.
+    const nearRoom = (square) => [-1, 0, 1].some((dc) => [-1, 0, 1].some((dr) => !isSolid(map, { column: square.column + dc, row: square.row + dr })));
+    const things = map.legend.filter((feature) => !["wall", "rock", "floor", "door", "open-door", "secret-door", "opening", ...groundKinds].includes(feature.kind));
+    const standing = map.at.flatMap((one) => {
+        const square = squareOf(one.square);
+        return square === undefined ? [] : [{ ...one, at: square }];
+    });
+    const self = standing.find((one) => one.role === "pc");
+    // What one fills, in squares a side: a large creature stands on the square at the top left of its own (GRD-4).
+    const middle = (one) => [X(one.at.column) + (size * (one.side ?? 1)) / 2, Y(one.at.row) + (size * (one.side ?? 1)) / 2];
+    // The squares the character can still reach, and those it stands on, which are never out of its reach (D-328).
+    const reach = [
+        ...(map.reach ?? []).flatMap((name) => {
+            const square = squareOf(name);
+            return square === undefined ? [] : [square];
+        }),
+        ...(map.reach === undefined || self === undefined
+            ? []
+            : Array.from({ length: (self.side ?? 1) ** 2 }, (_, index) => ({ column: self.at.column + (index % (self.side ?? 1)), row: self.at.row + Math.floor(index / (self.side ?? 1)) }))),
+    ];
+    const letters = Math.max(11, 11 / scale);
+    const drawn = (_jsxs(_Fragment, { children: [_jsx("path", { class: "lm-floor-fill", d: floor, "fill-rule": "evenodd" }), _jsx("g", { class: "lm-ground", "clip-path": "url(#lm-open)", children: open.filter((square) => groundKinds.includes(kindAt(map, square))).map((square) => _jsx(Ground, { kind: kindAt(map, square), x: X(square.column), y: Y(square.row), side: size, seed: square }, squareName(square))) }), _jsx("path", { class: "lm-grid", d: open.map((square) => `M${X(square.column)} ${Y(square.row)}h${size}v${size}h${-size}z`).join(""), "clip-path": "url(#lm-open)" }), open.filter((square) => featureAt(square)?.difficult).map((square) => _jsx(Corner, { x: X(square.column), y: Y(square.row), side: size }, squareName(square))), things.map((feature) => piecesOf(map, feature.symbol, feature.kind).map((piece) => (_jsxs("g", { class: `lm-thing ${feature.kind}`, children: [_jsx("title", { children: [featureName(feature), feature.blocks ? t("blocks") : "", feature.difficult ? t("difficult") : ""].filter((part) => part !== "").join(", ") }), _jsx(Thing, { kind: feature.kind, symbol: feature.symbol, x: X(piece.left), y: Y(piece.top), w: (piece.right - piece.left) * size, h: (piece.bottom - piece.top) * size, cells: piece.squares.map((square) => [X(square.column), Y(square.row)]) })] }, `${feature.symbol} ${piece.left} ${piece.top}`)))), _jsx("path", { class: "lm-shade", d: outline, "clip-path": "url(#lm-open)", filter: "url(#lm-blur)" })] }));
+    return (_jsxs("section", { class: "lm", "aria-labelledby": "lm-title", children: [_jsx(CardHead, { icon: iconPath("world"), title: _jsx("h3", { id: "lm-title", children: t("Map") }), note: place }), _jsx("div", { class: picking === undefined ? "lm-frame" : "lm-frame panned", children: _jsxs("svg", { ref: svg, class: `lm-svg lm-look-${map.ground}`, viewBox: `0 0 ${width} ${height}`, ...(picking === undefined ? {} : { width: width * 1.2 }), role: "img", "aria-label": t("Map of {place}", { place }), children: [_jsxs("defs", { children: [_jsx(Patterns, {}), _jsx(GlassDefs, { prefix: "lm" }), _jsxs("radialGradient", { id: "lm-hostile-glow", children: [_jsx("stop", { offset: "0.75", "stop-color": "#c8321f", "stop-opacity": "0.3" }), _jsx("stop", { offset: "1", "stop-color": "#c8321f", "stop-opacity": "0" })] }), _jsx("clipPath", { id: "lm-open", children: _jsx("path", { d: floor, "clip-rule": "evenodd" }) }), !walled && (_jsx("mask", { id: "lm-fade", maskUnits: "userSpaceOnUse", x: 0, y: 0, width: width, height: height, children: _jsx("rect", { x: X(0) + size * 0.35, y: Y(0) + size * 0.35, width: map.columns * size - size * 0.7, height: map.rows * size - size * 0.7, fill: "#fff", filter: "url(#lm-soft)" }) })), standing.map((one, index) => (_jsx("clipPath", { id: `lm-token-${index}`, children: _jsx("circle", { cx: middle(one)[0], cy: middle(one)[1], r: size * (one.side ?? 1) * 0.43 }) }, index)))] }), _jsx("rect", { class: "lm-paper", width: width, height: height }), _jsx("g", { class: "lm-walls", children: squares.filter((square) => ["wall", "rock", "window"].includes(kindAt(map, square)) && nearRoom(square)).map((square) => (_jsxs(Fragment, { children: [_jsx("rect", { class: "lm-wall-under", x: X(square.column), y: Y(square.row), width: size, height: size }), _jsx("rect", { class: `lm-wall ${kindAt(map, square)}`, x: X(square.column), y: Y(square.row), width: size, height: size })] }, squareName(square)))) }), walled ? drawn : _jsx("g", { mask: "url(#lm-fade)", children: drawn }), reach.length > 0 && (_jsx("g", { class: "lm-out", "aria-hidden": "true", "clip-path": "url(#lm-open)", children: open.filter((square) => !reach.some((near) => near.column === square.column && near.row === square.row)).map((square) => (_jsx("rect", { x: X(square.column), y: Y(square.row), width: size, height: size }, squareName(square)))) })), _jsx("path", { class: "lm-outline", d: outline, filter: "url(#lm-ink)" }), squares.filter((square) => ["door", "open-door", "secret-door"].includes(kindAt(map, square))).map((square) => (_jsx(Door, { kind: kindAt(map, square), name: featureAt(square)?.name ?? "door", square: square, map: map, x: X(square.column), y: Y(square.row) }, squareName(square)))), map.exits.map((exit, index) => {
+                            const square = squareOf(exit.square);
+                            return square === undefined ? null : _jsx(Exit, { side: sides[index], to: exit.to, x: X(square.column) + size / 2, y: Y(square.row) + size / 2, letters: Math.max(13, 12 / scale) }, exit.square);
+                        }), _jsxs("g", { class: "lm-coordinates", "font-size": letters, children: [Array.from({ length: map.columns }, (_, column) => _jsx("text", { x: X(column) + size / 2, y: top - 10, "text-anchor": "middle", children: columnName(column) }, `c${column}`)), Array.from({ length: map.rows }, (_, row) => _jsx("text", { x: left - 10, y: Y(row) + size / 2, "text-anchor": "end", "dominant-baseline": "middle", children: row + 1 }, `r${row}`))] }), _jsx("g", { class: "lm-tokens", children: standing.map((one, index) => _jsx(Token, { one: one, index: index, acting: one.name === acting, hostile: one.hostile === true, x: middle(one)[0], y: middle(one)[1], scale: scale }, index)) }), picking !== undefined && (_jsx("g", { class: "lm-picks", children: squares.filter((square) => isStandable(map, square)).map((square) => (_jsx("rect", { class: picking.selected === squareName(square) ? "lm-pick selected" : "lm-pick", x: X(square.column) + 1, y: Y(square.row) + 1, width: size - 2, height: size - 2, rx: 4, onClick: () => picking.onSelect(squareName(square)), children: _jsx("title", { children: squareName(square) }) }, squareName(square)))) }))] }) }), _jsxs("ul", { class: "lm-key", "aria-label": t("Legend"), children: [reach.length > 0 && (_jsxs("li", { children: [_jsxs("svg", { class: `lm-swatch lm-look-${map.ground}`, viewBox: "0 0 40 40", "aria-hidden": "true", children: [_jsx("rect", { class: "lm-floor-fill", width: 40, height: 40 }), _jsx("g", { class: "lm-out", children: _jsx("rect", { width: 40, height: 40 }) })] }), _jsx("span", { class: "lm-key-name", children: t("out of your move this turn") })] })), map.legend.filter((feature) => !["floor", "ground"].includes(feature.kind)).map((feature) => (_jsxs("li", { children: [_jsx(Swatch, { feature: feature, ground: map.ground }), _jsx("span", { class: "lm-key-name", children: featureName(feature) }), feature.blocks && !["wall", "rock"].includes(feature.kind) && _jsx("span", { class: "lm-key-note", children: t("blocks") }), feature.difficult && _jsx("span", { class: "lm-key-note", children: t("difficult") })] }, feature.symbol))), map.exits.map((exit) => (_jsxs("li", { class: "lm-key-exit", children: [_jsx("span", { class: "lm-key-square", children: exit.square }), _jsx("span", { children: `→ ${exit.to ?? t("somewhere")}` })] }, exit.square)))] }), standing.length > 0 && (_jsx("ul", { class: "lm-where", "aria-label": t("Who is where"), children: standing.toSorted((first, second) => roles.indexOf(first.role) - roles.indexOf(second.role)).map((one, index) => (_jsxs("li", { class: `lm-where-${one.role}${one.hostile === true ? " hostile" : ""}`, children: [_jsx("span", { class: "lm-where-name", children: one.stranger ? strangerLabel(one.name) : one.name }), _jsx("span", { class: "lm-key-square", children: one.square }), one.distance !== undefined
+                            ? _jsx("span", { class: "lm-where-far", children: one.distance })
+                            : self !== undefined && one !== self && (nextTo(one.at, self.at) || one.square === self.square) && _jsx("span", { class: "lm-where-far", children: t("next to you") })] }, index))) }))] }));
+}
+/** How much the map is scaled on the screen, from its drawn width to its shown one: the letters around it keep a readable size on a phone. */
+function useScale(svg) {
+    const [scale, setScale] = useState(1);
+    useEffect(() => {
+        const element = svg.current;
+        if (element === null || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const measure = () => setScale(element.getBoundingClientRect().width / (element.viewBox.baseVal?.width || 1));
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        measure();
+        return () => observer.disconnect();
+    }, []);
+    return scale;
+}
+/** The patterns and filters of the map: Dyson's hatching in bundles, the grounds' textures, the ink's tremble, the washes, the soft edge. */
+function Patterns() {
+    let seed = 11;
+    const random = () => {
+        seed = (seed * 16807) % 2147483647;
+        return seed / 2147483647;
+    };
+    const bundles = Array.from({ length: 36 }, (_, index) => ({ x: (index % 6) * 16 + 8 + (random() - 0.5) * 5, y: Math.floor(index / 6) * 16 + 8 + (random() - 0.5) * 5, turn: Math.round(random() * 180), lengths: [0, 1, 2, 3].map(() => 6 + random() * 2.5) }));
+    return (_jsxs(_Fragment, { children: [_jsx("pattern", { id: "lm-hatch", width: 96, height: 96, patternUnits: "userSpaceOnUse", children: bundles.map((bundle, index) => (_jsx("g", { transform: `translate(${bundle.x.toFixed(1)} ${bundle.y.toFixed(1)}) rotate(${bundle.turn})`, children: [-3.6, -1.2, 1.2, 3.6].map((offset, line) => _jsx("line", { class: "lm-hatch-line", x1: -bundle.lengths[line], y1: offset, x2: bundle.lengths[line], y2: offset }, line)) }, index))) }), _jsxs("pattern", { id: "lm-cobbles", width: 20, height: 20, patternUnits: "userSpaceOnUse", children: [_jsx("rect", { class: "lm-paving", width: 20, height: 20 }), [[1, 1, 8], [10, 1, 9], [1, 11, 5], [7, 11, 7], [15, 11, 4]].map(([x, y, w], index) => _jsx("rect", { class: "lm-cobble", x: x, y: y, width: w, height: 8, rx: 2.5 }, index))] }), _jsxs("pattern", { id: "lm-grass", width: 46, height: 46, patternUnits: "userSpaceOnUse", children: [_jsx("rect", { class: "lm-meadow", width: 46, height: 46 }), [[8, 12], [30, 6], [20, 30], [40, 36], [4, 40]].map(([x, y], index) => _jsx("path", { class: "lm-tuft", d: `M${x - 3} ${y}l1.5 -4M${x} ${y}v-5M${x + 3} ${y}l-1.5 -4` }, index))] }), _jsxs("pattern", { id: "lm-speckle", width: 30, height: 30, patternUnits: "userSpaceOnUse", children: [_jsx("rect", { class: "lm-rockfloor", width: 30, height: 30 }), [[5, 7, 1.1], [19, 4, 0.8], [12, 18, 1.3], [26, 22, 0.9], [4, 26, 0.7], [22, 13, 0.6]].map(([x, y, r], index) => _jsx("circle", { class: "lm-dot", cx: x, cy: y, r: r }, index))] }), _jsxs("filter", { id: "lm-ink", x: "-5%", y: "-5%", width: "110%", height: "110%", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.05", numOctaves: 2, seed: 7 }), _jsx("feDisplacementMap", { in: "SourceGraphic", scale: 2.6 })] }), _jsxs("filter", { id: "lm-wash", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.09", numOctaves: 2, seed: 3, result: "noise" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: 9, result: "moved" }), _jsx("feGaussianBlur", { in: "moved", stdDeviation: 1.6 })] }), _jsx("filter", { id: "lm-blur", x: "-10%", y: "-10%", width: "120%", height: "120%", children: _jsx("feGaussianBlur", { stdDeviation: 4 }) }), _jsx("filter", { id: "lm-soft", x: "-20%", y: "-20%", width: "140%", height: "140%", children: _jsx("feGaussianBlur", { stdDeviation: size * 0.45 }) })] }));
+}
+/** The mark of difficult ground: a fold in the square's corner, so that colour is never the only sign (D-325). */
+function Corner({ x, y, side }) {
+    return _jsx("path", { class: "lm-corner", d: `M${x + 1} ${y + 1}h${side * 0.3}l${-side * 0.3} ${side * 0.3}z` });
+}
+/** Ground drawn on its square, under the things: water, rubble, mud, brush, open ground, a road. */
+function Ground({ kind, x, y, side, seed }) {
+    const turn = (seed.column * 7 + seed.row * 13) % 5;
+    const at = (share) => share * side / 40;
+    let marks = null;
+    if (kind.endsWith("water")) {
+        marks = _jsx("path", { class: "lm-wave", d: `M${x + at(8)} ${y + at(14 + turn)}q4 -4 8 0t8 0M${x + at(18)} ${y + at(28 - turn)}q4 -4 8 0t8 0` });
+    }
+    else if (kind === "rubble") {
+        marks = [[10, 12, 4], [24, 9, 3], [30, 24, 5], [14, 28, 3.5], [22, 19, 2.5]].map(([px, py, r], index) => _jsx("path", { class: "lm-pebble", d: pebble(x + at((px + turn * 3) % 34 + 3), y + at(py), at(r)) }, index));
+    }
+    else if (kind === "brush" || kind === "ground") {
+        marks = (kind === "brush" ? [[10, 14], [26, 10], [18, 28], [31, 27]] : [[12, 16], [28, 30]]).map(([px, py], index) => (_jsx("path", { class: "lm-tuft", d: `M${x + at(px) - 4} ${y + at(py)}l2 -5M${x + at(px)} ${y + at(py)}v-6M${x + at(px) + 4} ${y + at(py)}l-2 -5` }, index)));
+    }
+    else if (kind === "road") {
+        marks = _jsx("path", { class: "lm-rut", d: `M${x} ${y + side * 0.3}h${side}M${x} ${y + side * 0.7}h${side}M${x + side * 0.3} ${y}v${side}M${x + side * 0.7} ${y}v${side}` });
+    }
+    else if (kind === "mud") {
+        marks = _jsx("path", { class: "lm-wave", d: `M${x + at(8)} ${y + at(16)}q3 3 6 0t6 0M${x + at(18)} ${y + at(28)}q3 3 6 0t6 0` });
+    }
+    return (_jsxs("g", { class: `lm-ground-${kind}`, children: [_jsx("rect", { class: "lm-ground-fill", x: x, y: y, width: side, height: side, filter: "url(#lm-wash)" }), marks] }));
+}
+/** A thing of the legend, by its kind (D-325), in its box; the kinds drawn one a square draw each of their squares. Any other is a box with its symbol. */
+function Thing({ kind, symbol, x, y, w, h, cells }) {
+    const inset = (share) => ({ x: x + size * share, y: y + size * share, width: w - size * share * 2, height: h - size * share * 2 });
+    const [cx, cy, small] = [x + w / 2, y + h / 2, Math.min(w, h)];
+    const along = w >= h;
+    switch (kind) {
+        case "table":
+            return _jsx("rect", { ...inset(0.14), rx: 5, class: "lm-wood" });
+        case "counter":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.12), rx: 2, class: "lm-wood dark" }), _jsx("line", { x1: x + size * 0.2, y1: y + h - size * 0.32, x2: x + w - size * 0.2, y2: y + h - size * 0.32, class: "lm-detail" })] }));
+        case "seat":
+            return _jsx("rect", { ...inset(0.3), rx: 3, class: "lm-wood" });
+        case "bed": {
+            const box = inset(0.1);
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...box, rx: 3, class: "lm-cloth" }), _jsx("rect", { x: box.x + 4, y: box.y + 4, width: box.width - 8, height: Math.min(10, box.height / 4), rx: 3, class: "lm-paper-fill" })] }));
+        }
+        case "shelf": {
+            const box = inset(0.1);
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...box, class: "lm-wood dark" }), [0.25, 0.5, 0.75].map((share) => (along
+                        ? _jsx("line", { x1: box.x + box.width * share, y1: box.y, x2: box.x + box.width * share, y2: box.y + box.height, class: "lm-detail" }, share)
+                        : _jsx("line", { x1: box.x, y1: box.y + box.height * share, x2: box.x + box.width, y2: box.y + box.height * share, class: "lm-detail" }, share)))] }));
+        }
+        case "hearth":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.06), rx: 3, class: "lm-stone" }), _jsx("path", { class: "lm-flame", d: flame(cx, cy + small * 0.24, small * 0.42) })] }));
+        case "fire":
+            return (_jsxs(_Fragment, { children: [_jsx("circle", { cx: cx, cy: cy, r: small * 0.34, class: "lm-stone ring" }), _jsx("path", { class: "lm-flame", d: flame(cx, cy + small * 0.17, small * 0.36) })] }));
+        case "barrel":
+            return (_jsx(_Fragment, { children: cells.map(([cellX, cellY]) => (_jsxs(Fragment, { children: [_jsx("circle", { cx: cellX + size / 2, cy: cellY + size / 2, r: size * 0.33, class: "lm-wood" }), _jsx("circle", { cx: cellX + size / 2, cy: cellY + size / 2, r: size * 0.19, class: "lm-detail" })] }, `${cellX} ${cellY}`))) }));
+        case "crate":
+            return (_jsx(_Fragment, { children: cells.map(([cellX, cellY]) => (_jsxs(Fragment, { children: [_jsx("rect", { x: cellX + 6, y: cellY + 6, width: size - 12, height: size - 12, class: "lm-wood" }), _jsx("path", { d: `M${cellX + 6} ${cellY + 6}L${cellX + size - 6} ${cellY + size - 6}M${cellX + size - 6} ${cellY + 6}L${cellX + 6} ${cellY + size - 6}`, class: "lm-detail" })] }, `${cellX} ${cellY}`))) }));
+        case "stairs": {
+            const box = inset(0.05);
+            const steps = Math.max(4, Math.round((along ? box.width : box.height) / 8));
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...box, class: "lm-paper-fill" }), Array.from({ length: steps - 1 }, (_, step) => {
+                        const share = (step + 1) / steps;
+                        return along
+                            ? _jsx("line", { x1: box.x + box.width * share, y1: box.y, x2: box.x + box.width * share, y2: box.y + box.height, class: "lm-detail" }, step)
+                            : _jsx("line", { x1: box.x, y1: box.y + box.height * share, x2: box.x + box.width, y2: box.y + box.height * share, class: "lm-detail" }, step);
+                    })] }));
+        }
+        case "ladder":
+            return (_jsx("path", { class: "lm-detail strong", d: `M${cx - 7} ${y + 5}V${y + h - 5}M${cx + 7} ${y + 5}V${y + h - 5}${Array.from({ length: Math.max(1, Math.round(h / 8) - 1) }, (_, rung) => `M${cx - 7} ${y + 8 + rung * 8}h14`).join("")}` }));
+        case "trapdoor": {
+            const box = inset(0.12);
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...box, class: "lm-wood" }), _jsx("path", { class: "lm-detail", d: `M${box.x} ${box.y + box.height / 3}h${box.width}M${box.x} ${box.y + box.height * 2 / 3}h${box.width}` })] }));
+        }
+        case "pit": {
+            const box = inset(0.06);
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...box, class: "lm-pit" }), _jsx("rect", { x: box.x + 6, y: box.y + 6, width: Math.max(0, box.width - 12), height: Math.max(0, box.height - 12), class: "lm-pit deep" })] }));
+        }
+        case "pillar":
+            return _jsx(_Fragment, { children: cells.map(([cellX, cellY]) => _jsx("circle", { cx: cellX + size / 2, cy: cellY + size / 2, r: size * 0.3, class: "lm-ink-fill" }, `${cellX} ${cellY}`)) });
+        case "statue":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.14), class: "lm-stone" }), _jsx("circle", { cx: cx, cy: cy, r: small * 0.2, class: "lm-ink-fill" })] }));
+        case "altar":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.16), rx: 1, class: "lm-stone" }), _jsx("path", { class: "lm-detail", d: `M${x + size * 0.24} ${y + size * 0.3}h${w - size * 0.48}` })] }));
+        case "well":
+            return (_jsxs(_Fragment, { children: [_jsx("circle", { cx: cx, cy: cy, r: small * 0.36, class: "lm-stone" }), _jsx("circle", { cx: cx, cy: cy, r: small * 0.22, class: "lm-pit deep" })] }));
+        case "tree":
+            // A tree a square, the crowns overlapping: a wood, not a blob.
+            return (_jsxs(_Fragment, { children: [cells.map(([cellX, cellY]) => {
+                        const jitter = ((cellX * 7 + cellY * 3) / size) % 5 - 2;
+                        return _jsx("path", { class: "lm-canopy", d: canopy(cellX + size / 2 + jitter, cellY + size / 2 - jitter, size * 0.56) }, `${cellX} ${cellY}`);
+                    }), cells.map(([cellX, cellY]) => _jsx("circle", { cx: cellX + size / 2, cy: cellY + size / 2, r: size * 0.07, class: "lm-ink-fill" }, `t${cellX} ${cellY}`))] }));
+        case "rocks":
+            return (_jsx(_Fragment, { children: cells.map(([cellX, cellY]) => (_jsxs(Fragment, { children: [_jsx("path", { class: "lm-stone", d: `M${cellX + 8} ${cellY + 26}l5 -13l9 -5l8 6l3 12l-9 8z` }), _jsx("path", { class: "lm-detail", d: `M${cellX + 22} ${cellY + 8}l-3 10l11 4` })] }, `${cellX} ${cellY}`))) }));
+        case "low-wall":
+            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "lm-low-wall", d: along ? `M${x + 2} ${cy}H${x + w - 2}` : `M${cx} ${y + 2}V${y + h - 2}` }), cells.map(([cellX, cellY]) => _jsx("rect", { x: cellX + size / 2 - 3, y: cellY + size / 2 - 3, width: 6, height: 6, class: "lm-ink-fill" }, `${cellX} ${cellY}`))] }));
+        case "bridge":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.1), class: "lm-wood" }), _jsx("path", { class: "lm-detail", d: Array.from({ length: Math.round((along ? w : h) / 8) }, (_, plank) => (along ? `M${x + size * 0.1 + plank * 8} ${y + size * 0.1}v${h - size * 0.2}` : `M${x + size * 0.1} ${y + size * 0.1 + plank * 8}h${w - size * 0.2}`)).join("") })] }));
+        case "machine":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.12), rx: 3, class: "lm-metal" }), _jsx("circle", { cx: cx, cy: cy, r: small * 0.16, class: "lm-detail" })] }));
+        case "vehicle":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.16), rx: 4, class: "lm-wood" }), _jsx("path", { class: "lm-detail strong", d: `M${x + size * 0.1} ${y + size * 0.3}v8M${x + w - size * 0.1} ${y + size * 0.3}v8M${x + size * 0.1} ${y + h - size * 0.3}v-8M${x + w - size * 0.1} ${y + h - size * 0.3}v-8` })] }));
+        case "tent":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.08), class: "lm-cloth" }), _jsx("path", { class: "lm-detail", d: `M${x + size * 0.08} ${y + size * 0.08}L${x + w - size * 0.08} ${y + h - size * 0.08}M${x + w - size * 0.08} ${y + size * 0.08}L${x + size * 0.08} ${y + h - size * 0.08}` })] }));
+        case "building":
+            return _jsx(Roof, { x: x, y: y, w: w, h: h, cells: cells });
+        case "stall":
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.1), class: "lm-awning" }), _jsx("path", { class: "lm-detail", d: Array.from({ length: Math.max(1, Math.round(w / 10) - 1) }, (_, stripe) => `M${x + size * 0.1 + (stripe + 1) * 9} ${y + size * 0.1}v${h - size * 0.2}`).join("") })] }));
+        case "fountain":
+            return (_jsxs(_Fragment, { children: [_jsx("circle", { cx: cx, cy: cy, r: small * 0.44, class: "lm-stone" }), _jsx("circle", { cx: cx, cy: cy, r: small * 0.36, class: "lm-basin" }), _jsx("circle", { cx: cx, cy: cy, r: small * 0.1, class: "lm-stone" }), _jsx("path", { class: "lm-wave", d: `M${cx - small * 0.26} ${cy + small * 0.18}q4 -4 8 0t8 0` })] }));
+        case "cliff":
+            // The drop: a line along the top, teeth falling from it.
+            return (_jsxs(_Fragment, { children: [_jsx("path", { class: "lm-detail strong", d: `M${x} ${y + 4}H${x + w}` }), _jsx("path", { class: "lm-cliff", d: Array.from({ length: Math.round(w / 8) }, (_, tooth) => `M${x + 2 + tooth * 8} ${y + 5}l3 ${h * 0.55}l3 ${-h * 0.55}`).join("") })] }));
+        case "hedge":
+            return _jsx("path", { class: "lm-canopy", d: along ? `M${x + 6} ${cy - 7}h${w - 12}a7 7 0 0 1 0 14h${-(w - 12)}a7 7 0 0 1 0 -14z` : `M${cx - 7} ${y + 6}v${h - 12}a7 7 0 0 0 14 0v${-(h - 12)}a7 7 0 0 0 -14 0z` });
+        case "hazard":
+            return (_jsx(_Fragment, { children: cells.map(([cellX, cellY]) => (_jsxs(Fragment, { children: [_jsx("path", { class: "lm-hazard", d: `M${cellX + size / 2} ${cellY + size / 2 - 12}l12 21h-24z` }), _jsx("text", { class: "lm-hazard-mark", x: cellX + size / 2, y: cellY + size / 2 + 6, "text-anchor": "middle", children: "!" })] }, `${cellX} ${cellY}`))) }));
+        case "mark":
+            return (_jsxs(_Fragment, { children: [_jsx("circle", { cx: cx, cy: cy, r: small * 0.38, class: "lm-mark" }), _jsx("circle", { cx: cx, cy: cy, r: small * 0.24, class: "lm-mark" })] }));
+        default:
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { ...inset(0.2), rx: 6, class: "lm-thing-any" }), _jsx("text", { class: "lm-thing-symbol", x: cx, y: cy + 1, "text-anchor": "middle", "dominant-baseline": "middle", children: symbol })] }));
+    }
+}
+/** Roofs: the piece's squares in tiles, its outline, the ridge along its longer side. */
+function Roof({ x, y, w, h, cells }) {
+    const inPiece = (cellX, cellY) => cells.some(([px, py]) => px === cellX && py === cellY);
+    const edges = cells.flatMap(([cellX, cellY]) => [[cellX, cellY - size, `M${cellX} ${cellY}h${size}`], [cellX + size, cellY, `M${cellX + size} ${cellY}v${size}`], [cellX, cellY + size, `M${cellX} ${cellY + size}h${size}`], [
+            cellX - size,
+            cellY,
+            `M${cellX} ${cellY}v${size}`,
+        ]]
+        .filter(([nx, ny]) => !inPiece(nx, ny))
+        .map(([, , path]) => path));
+    const along = w >= h;
+    const middle = along ? y + Math.floor(h / size / 2) * size + (h / size % 2 === 1 ? size / 2 : 0) : x + Math.floor(w / size / 2) * size + (w / size % 2 === 1 ? size / 2 : 0);
+    const ridge = cells.filter(([cellX, cellY]) => (along ? cellY <= middle && cellY + size >= middle : cellX <= middle && cellX + size >= middle))
+        .map(([cellX, cellY]) => (along ? `M${cellX} ${middle}h${size}` : `M${middle} ${cellY}v${size}`)).join("");
+    return (_jsxs("g", { class: `lm-roof tone-${Math.round((x + y) / size) % 3}`, children: [cells.map(([cellX, cellY]) => _jsx("rect", { class: "lm-roof-tiles", x: cellX, y: cellY, width: size, height: size }, `${cellX} ${cellY}`)), _jsx("path", { class: "lm-roof-edge", d: edges.join("") }), _jsx("path", { class: "lm-ridge", d: ridge })] }));
+}
+/** A door: its leaf across the gap in the wall, along the wall it is in; open, swung; secret and found, dashed. */
+function Door({ kind, name, square, map, x, y }) {
+    const closed = (column, row) => isSolid(map, { column, row }) || kindAt(map, { column, row }) === "building";
+    const across = closed(square.column - 1, square.row) && closed(square.column + 1, square.row);
+    const leaf = across ? { x: x + 2, y: y + size * 0.38, width: size - 4, height: size * 0.24 } : { x: x + size * 0.38, y: y + 2, width: size * 0.24, height: size - 4 };
+    return (_jsxs("g", { class: `lm-door ${kind}`, children: [_jsx("title", { children: `${name}, ${squareName(square)}` }), kind === "open-door"
+                ? (_jsx("path", { class: "lm-door-swing", d: across ? `M${x + 2} ${y + size / 2}A${size - 4} ${size - 4} 0 0 1 ${x + size - 2} ${y - size / 2 + 4}` : `M${x + size / 2} ${y + 2}A${size - 4} ${size - 4} 0 0 0 ${x + size + size / 2 - 4} ${y + size - 2}` }))
+                : _jsx("rect", { ...leaf, class: kind === "secret-door" ? "lm-door-leaf secret" : "lm-door-leaf" })] }));
+}
+/** Where a square leads: on the map's edge an arrow out of it and the place's name, as the world goes on there; inside, the name over the door. */
+function Exit({ side, to, x, y, letters }) {
+    if (side === "inside") {
+        return to === undefined ? null : _jsx("text", { class: "lm-exit-name inside", x: x, y: y - size / 2 - 8, "text-anchor": "middle", children: to });
+    }
+    const [dx, dy] = side === "bottom" ? [0, 1] : side === "top" ? [0, -1] : side === "left" ? [-1, 0] : [1, 0];
+    // Past the squares' names on the top and the left.
+    const skip = side === "top" || side === "left" ? 22 : 0;
+    const [sx, sy] = [x + dx * (size * 0.5 + skip), y + dy * (size * 0.5 + skip)];
+    const [ex, ey] = [sx + dx * 16, sy + dy * 16];
+    return (_jsxs("g", { class: "lm-exit", children: [_jsx("path", { d: `M${sx} ${sy}L${ex} ${ey}M${ex - dy * 5 - dx * 5} ${ey - dx * 5 - dy * 5}L${ex} ${ey}L${ex + dy * 5 - dx * 5} ${ey + dx * 5 - dy * 5}` }), to !== undefined && (dx === 0
+                ? _jsx("text", { class: "lm-exit-name", x: ex, y: ey + dy * 15, "text-anchor": "middle", "dominant-baseline": "middle", "font-size": letters, children: to })
+                : _jsx("text", { class: "lm-exit-name", x: ex + dx * 12, y: ey, "text-anchor": "middle", "dominant-baseline": "middle", "font-size": letters, transform: `rotate(${dx < 0 ? -90 : 90} ${ex + dx * 12} ${ey})`, children: to }))] }));
+}
+/**
+ * Someone on the map, as a coin (D-409): their picture to its edge, or a stranger's number, as Creature 2's, or the hood, under glass, its edge bevelled, lit
+ * above and shaded below, its shadow low on the paper; no ring of a side. Whoever acts is raised off the paper, a little larger, its shadow wide and soft (D-419); a foe the master marked glows
+ * red a little (D-415); one of the party has the pip of their side at the lower left, with their class's symbol or the side's (D-414); anyone the pip of
+ * their state at the lower right, and its words in the token's title (D-419).
+ */
+function Token({ one, index, acting, hostile, x, y, scale }) {
+    const [symbols] = usePref(tokenSymbolsPref);
+    const side = one.side ?? 1;
+    const r = size * side * 0.43;
+    const number = one.stranger ? /[A-Z]?\d+$/.exec(one.name)?.[0] : undefined;
+    const pip = symbols ? sideOf(one.role) : undefined;
+    // On a map shown small, as on a phone, the marks grow to stay readable, each toward the token's middle by as much as it grows, its paper too, so that the
+    // box round it keeps its outer edges and two tokens side by side keep their marks apart as at full size.
+    const grow = Math.min(1.4, Math.max(1, 0.65 / scale));
+    // The two pips below share the square's width with their neighbours' on either side: past 1.12 the player's character's, gold-ringed, would touch the
+    // state's pip, on the token or the next one; the number, alone above, grows on.
+    const below = Math.min(grow, 1.12);
+    const inward = (radius, paper, by = below) => (by - 1) * (radius + paper);
+    const pipPaper = pip === "you" ? 3 : 1.5;
+    return (_jsxs("g", { class: `lm-token ${one.role}${acting ? " acting" : ""}`, style: acting ? { transformOrigin: `${x}px ${y}px` } : undefined, children: [_jsx("title", { children: [`${one.stranger ? strangerLabel(one.name) : one.name}, ${one.square}`, ...statusWords(one)].join(" · ") }), hostile && (_jsxs(_Fragment, { children: [_jsx("circle", { class: "lm-hostile-glow", cx: x, cy: y, r: r + 7, fill: "url(#lm-hostile-glow)" }), _jsx("circle", { class: "lm-hostile", cx: x, cy: y, r: r + 2.4 })] })), _jsxs("g", { filter: "url(#lm-drop)", children: [_jsx("circle", { class: "lm-disc", cx: x, cy: y, r: r }), _jsx("circle", { class: "lm-ring", cx: x, cy: y, r: r - 0.5 }), one.image
+                        ? _jsx("image", { href: `/images/${encodeURIComponent(one.image.file)}?v=${one.image.version}`, x: x - r, y: y - r, width: r * 2, height: r * 2, "clip-path": `url(#lm-token-${index})` })
+                        : (_jsx("g", { transform: `translate(${x} ${y}) scale(${side})`, children: number !== undefined
+                                ? _jsx("text", { class: "lm-number", y: 1, "text-anchor": "middle", "dominant-baseline": "middle", children: number })
+                                : one.stranger
+                                    ? _jsx("path", { class: "lm-stranger", d: "M12 3c-4 0-6.5 3.5-6.5 8v3.5L4 20.5h16l-1.5-6V11c0-4.5-2.5-8-6.5-8Z", transform: "translate(-10.8 -11) scale(0.9)" })
+                                    : _jsx("text", { class: "lm-number", y: 1, "text-anchor": "middle", "dominant-baseline": "middle", children: one.name.slice(0, 1).toUpperCase() }) })), _jsx(Glass, { x: x, y: y, r: r, prefix: "lm" }), _jsx("path", { class: "lm-bevel-lit", d: crescent(x, y, r, 1.5) }), _jsx("path", { class: "lm-bevel-shade", d: crescent(x, y, r, -1.5) })] }), pip !== undefined && _jsx(MapPip, { side: pip, icon: one.stranger ? undefined : one.icon, x: x - r * 0.725 + inward(pipRadius, pipPaper), y: y + r * 0.725 - inward(pipRadius, pipPaper), grow: below }), one.image !== undefined && number !== undefined && _jsx(MapNumber, { number: number, x: x + r * 0.725 - inward(numberRadius, 1.5, grow), y: y - r * 0.725 + inward(numberRadius, 1.5, grow), grow: grow }), _jsx(MapStatus, { one: one, x: x + r * 0.56 - inward(statusRadius, 1.5), y: y + r * 0.56 - inward(statusRadius, 1.5), grow: below })] }));
+}
+// The marks on a token as on one of 40 pixels on the page: the side's pip of 17, the state's of 12, a number's coin 13 high.
+const pipRadius = size * 0.43 * (17 / 40);
+const statusRadius = size * 0.43 * (12 / 40);
+const numberRadius = size * 0.43 * (13 / 40);
+/**
+ * A token's pip on the map (D-414): as on the page, a disc of the side's colour with its symbol, ringed in the paper's colour; the same size for any creature,
+ * larger by `grow` on a map shown small.
+ */
+function MapPip({ side, icon, x, y, grow }) {
+    const radius = pipRadius * grow;
+    // A symbol of 12 in the pip of 17.
+    const scale = (radius * 2 * (12 / 17)) / 24;
+    return (_jsxs("g", { class: `lm-pip ${side}`, "aria-hidden": "true", children: [_jsx("circle", { class: "lm-pip-paper", cx: x, cy: y, r: radius + (side === "you" ? 3 : 1.5) * grow }), side === "you" && _jsx("circle", { class: "lm-pip-gold", cx: x, cy: y, r: radius + 1.5 * grow }), _jsx("circle", { class: "lm-pip-disc", cx: x, cy: y, r: radius }), _jsx("path", { class: "lm-pip-symbol", d: icon ?? sideIcons[side], transform: `translate(${x - 12 * scale} ${y - 12 * scale}) scale(${scale})` })] }));
+}
+/**
+ * A stranger's number over their picture (D-420): as on the page, a small dark coin at the token's upper right, ringed in the paper's colour; wider for two
+ * letters; larger by `grow` on a map shown small.
+ */
+function MapNumber({ number, x, y, grow }) {
+    // Figures of 8.5 on the coin.
+    const height = numberRadius * 2 * grow;
+    const width = Math.max(height, (number.length * 6 + 4) * grow);
+    return (_jsxs("g", { class: "lm-number-pip", "aria-hidden": "true", "font-size": 8.5 * grow, children: [_jsx("rect", { class: "lm-pip-paper", x: x - width / 2 - 1.5 * grow, y: y - height / 2 - 1.5 * grow, width: width + 3 * grow, height: height + 3 * grow, rx: height / 2 + 1.5 * grow }), _jsx("rect", { class: "lm-number-disc", x: x - width / 2, y: y - height / 2, width: width, height: height, rx: height / 2 }), _jsx("text", { class: "lm-number-small", x: x, y: y + 0.5 * grow, "text-anchor": "middle", "dominant-baseline": "middle", children: number })] }));
+}
+/**
+ * The pip of someone's state on the map (D-419): as on the page, smaller than the side's, a second coin behind when there are more; the same size for any
+ * creature, larger by `grow` on a map shown small.
+ */
+function MapStatus({ one, x, y, grow }) {
+    const [shown] = useChoice(conditionsPref);
+    const marks = statusMarks(one);
+    if (shown === "never" || marks.length === 0) {
+        return null;
+    }
+    const radius = statusRadius * grow;
+    const paper = 1.5 * grow;
+    // A symbol of 9.6 in the pip of 12.
+    const scale = (radius * 2 * (24 / 30)) / 24;
+    // The second coin up more than out, within the token's square: a crescent of about 3 of the token's 40 past the paper round the first (D-420).
+    const behind = { x: radius * 0.3, y: radius * 0.85 };
+    const strong = marks[0].kind === "state";
+    return (_jsxs("g", { class: ["lm-status", strong ? "strong" : "", shown === "hover" ? "on-hover" : ""].filter((name) => name !== "").join(" "), "aria-hidden": "true", children: [marks.length > 1 && (_jsxs(_Fragment, { children: [_jsx("circle", { class: "lm-pip-paper", cx: x + behind.x, cy: y - behind.y, r: radius + paper }), _jsx("circle", { class: "lm-status-back", cx: x + behind.x, cy: y - behind.y, r: radius })] })), _jsx("circle", { class: "lm-pip-paper", cx: x, cy: y, r: radius + paper }), _jsx("circle", { class: "lm-status-disc", cx: x, cy: y, r: radius }), _jsx("path", { class: "lm-status-symbol", d: marks[0].icon, transform: `translate(${x - 12 * scale} ${y - 12 * scale}) scale(${scale})` })] }));
+}
+/** The thin crescent a coin's bevel lights, from its top when `offset` is positive or shades at its bottom when negative: the circle less itself moved by it. */
+function crescent(x, y, r, offset) {
+    const half = Math.sqrt(r * r - (offset / 2) ** 2);
+    const middle = y + offset / 2;
+    const [outer, inner] = offset > 0 ? [1, 0] : [0, 1];
+    return `M${x - half} ${middle}A${r} ${r} 0 1 ${outer} ${x + half} ${middle}A${r} ${r} 0 0 ${inner} ${x - half} ${middle}Z`;
+}
+/** A thing of the legend drawn small, as on the map, for the key. */
+function Swatch({ feature, ground }) {
+    return (_jsxs("svg", { class: `lm-swatch lm-look-${ground}`, viewBox: "0 0 40 40", "aria-hidden": "true", children: [_jsx("rect", { class: "lm-paper", width: 40, height: 40 }), ["wall", "rock", "window"].includes(feature.kind)
+                ? _jsx("rect", { class: `lm-wall ${feature.kind}`, width: 40, height: 40 })
+                : (_jsxs(_Fragment, { children: [_jsx("rect", { class: "lm-floor-fill", width: 40, height: 40 }), ["door", "open-door", "secret-door", "opening"].includes(feature.kind)
+                            ? (_jsxs(_Fragment, { children: [_jsx("path", { class: "lm-outline", d: "M0 0V40M40 0V40" }), feature.kind !== "opening" && _jsx("rect", { class: feature.kind === "secret-door" ? "lm-door-leaf secret" : "lm-door-leaf", x: 14, y: 2, width: 12, height: 36 })] }))
+                            : groundKinds.includes(feature.kind)
+                                ? _jsx(Ground, { kind: feature.kind, x: 0, y: 0, side: 40, seed: { column: 0, row: 0 } })
+                                : _jsx(Thing, { kind: feature.kind, symbol: feature.symbol, x: 0, y: 0, w: 40, h: 40, cells: [[0, 0]] }), feature.difficult && _jsx(Corner, { x: 0, y: 0, side: 40 })] }))] }));
+}
+/** A flame, from its foot. */
+function flame(x, y, height) {
+    return `M${x} ${y}c${-height * 0.45} ${-height * 0.25} ${-height * 0.3} ${-height * 0.7} 0 ${-height}c${height * 0.05} ${height * 0.3} ${height * 0.35} ${height * 0.35} ${height * 0.3} ${height * 0.65}`
+        + `c${-height * 0.02} ${height * 0.2} ${-height * 0.15} ${height * 0.33} ${-height * 0.3} ${height * 0.35}z`;
+}
+/** A pebble of rubble. */
+function pebble(x, y, r) {
+    return `M${x - r} ${y}l${r * 0.6} ${-r * 0.9}l${r} ${r * 0.2}l${r * 0.4} ${r}l${-r * 0.9} ${r * 0.6}z`;
+}
+/** A tree's crown: a circle of lobes. */
+function canopy(x, y, r) {
+    const bumps = 9;
+    return Array.from({ length: bumps + 1 }, (_, index) => {
+        const angle = (index / bumps) * Math.PI * 2;
+        const [px, py] = [x + Math.cos(angle) * r, y + Math.sin(angle) * r];
+        return index === 0 ? `M${px} ${py}` : `A${r * 0.36} ${r * 0.36} 0 0 1 ${px} ${py}`;
+    }).join("") + "z";
+}
+/** A symbol of the map by its name: those every map has (GRD-1), a wall, the floor, a door, in the page's language; the others as the master named them. */
+function featureName(feature) {
+    const builtIn = { wall: t("wall"), floor: t("floor"), door: t("door") };
+    return feature.name === feature.kind ? builtIn[feature.kind] ?? feature.name : feature.name;
+}

package/dist/dashboard/place-map.js

@@ -0,0 +1,204 @@
+/** Every kind the map draws its own way (D-325): the engine's list of squareKinds, which a test holds to it. */
+export const drawnKinds = [
+    "wall",
+    "rock",
+    "floor",
+    "ground",
+    "road",
+    "door",
+    "open-door",
+    "secret-door",
+    "opening",
+    "window",
+    "low-wall",
+    "hedge",
+    "stairs",
+    "ladder",
+    "trapdoor",
+    "pit",
+    "cliff",
+    "bridge",
+    "shallow-water",
+    "deep-water",
+    "mud",
+    "rubble",
+    "brush",
+    "tree",
+    "rocks",
+    "pillar",
+    "statue",
+    "fire",
+    "hearth",
+    "well",
+    "fountain",
+    "table",
+    "seat",
+    "counter",
+    "bed",
+    "shelf",
+    "barrel",
+    "crate",
+    "altar",
+    "machine",
+    "vehicle",
+    "tent",
+    "stall",
+    "building",
+    "hazard",
+    "mark",
+];
+/** The kinds drawn on their own squares under the things, as ground: water, rubble, mud, brush, open ground, a road. */
+export const groundKinds = ["shallow-water", "deep-water", "rubble", "mud", "brush", "ground", "road"];
+/** The kinds drawn one a square, as a row of trees is trees and not a blob (D-325); the others as one thing over the squares that touch. */
+export const squareDrawnKinds = ["tree", "rocks", "pillar", "seat", "barrel", "crate", "hazard", "ladder", "trapdoor"];
+/** The kinds one cannot see past nor stand on, which the floor's outline goes round. */
+const solidKinds = ["wall", "rock", "outside", "window"];
+/** The square a name such as C4 says, from A1 at the top left, AA after Z; none for anything else. */
+export function squareOf(name) {
+    const match = /^([A-Z]+)(\d+)$/.exec(name.trim().toUpperCase());
+    return match === null ? undefined : { column: [...match[1]].reduce((total, letter) => total * 26 + letter.charCodeAt(0) - 64, 0) - 1, row: Number(match[2]) - 1 };
+}
+/** A column's letters, as the map's edge writes them: A, B… Z, AA. */
+export function columnName(column) {
+    let letters = "";
+    for (let number = column + 1; number > 0; number = Math.floor((number - 1) / 26)) {
+        letters = String.fromCharCode(65 + ((number - 1) % 26)) + letters;
+    }
+    return letters;
+}
+/** A square's name, as the player says it: C4. */
+export function squareName(square) {
+    return `${columnName(square.column)}${square.row + 1}`;
+}
+/** The symbol at a square; a space outside the grid. */
+export function symbolAt(map, square) {
+    return map.lines[square.row]?.[square.column] ?? " ";
+}
+/** What a square is drawn as: its symbol's kind in the legend, outside for a space, thing for a symbol the legend does not give. */
+export function kindAt(map, square) {
+    const symbol = symbolAt(map, square);
+    return symbol === " " ? "outside" : map.legend.find((feature) => feature.symbol === symbol)?.kind ?? "thing";
+}
+/** Whether a square is a wall, rock, a window or outside: what the floor's outline goes round. */
+export function isSolid(map, square) {
+    return solidKinds.includes(kindAt(map, square));
+}
+/** Whether one can stand on a square (GRD-3): inside the map, on what the legend names, neither a wall nor what blocks. */
+export function isStandable(map, square) {
+    const symbol = symbolAt(map, square);
+    const feature = map.legend.find((one) => one.symbol === symbol);
+    return symbol !== " " && feature !== undefined && feature.blocks !== true;
+}
+/** Whether the map has walls or rock: a building or a cave, which ends at its walls; without, an open map, which fades into the paper. */
+export function isWalled(map) {
+    return map.lines.some((line) => [...line].some((symbol) => ["wall", "rock"].includes(map.legend.find((feature) => feature.symbol === symbol)?.kind ?? "")));
+}
+/** The pieces of a thing of the legend: its squares joined where they touch, each with the box around them; one a square for the kinds drawn so. */
+export function piecesOf(map, symbol, kind) {
+    const seen = new Set();
+    const pieces = [];
+    const single = squareDrawnKinds.includes(kind);
+    for (let row = 0; row < map.rows; row++) {
+        for (let column = 0; column < map.columns; column++) {
+            if (symbolAt(map, { column, row }) !== symbol || seen.has(`${column},${row}`)) {
+                continue;
+            }
+            const squares = [];
+            const open = [{ column, row }];
+            seen.add(`${column},${row}`);
+            while (open.length > 0) {
+                const next = open.pop();
+                squares.push(next);
+                for (const [dc, dr] of single ? [] : [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
+                    const near = { column: next.column + dc, row: next.row + dr };
+                    if (symbolAt(map, near) === symbol && !seen.has(`${near.column},${near.row}`)) {
+                        seen.add(`${near.column},${near.row}`);
+                        open.push(near);
+                    }
+                }
+            }
+            const columns = squares.map((square) => square.column);
+            const rows = squares.map((square) => square.row);
+            pieces.push({ squares, left: Math.min(...columns), top: Math.min(...rows), right: Math.max(...columns) + 1, bottom: Math.max(...rows) + 1 });
+        }
+    }
+    return pieces;
+}
+/** The floor's outline as loops of the sides that face a wall, rock or the outside, each side going round the floor the same way. */
+export function floorLoops(map, X, Y) {
+    const rockLike = map.legend.find((feature) => feature.symbol === "#")?.kind === "rock";
+    const edges = [];
+    for (let row = 0; row < map.rows; row++) {
+        for (let column = 0; column < map.columns; column++) {
+            if (isSolid(map, { column, row })) {
+                continue;
+            }
+            for (const [dc, dr, x1, y1, x2, y2] of [[0, -1, 0, 0, 1, 0], [1, 0, 1, 0, 1, 1], [0, 1, 1, 1, 0, 1], [-1, 0, 0, 1, 0, 0]]) {
+                const near = { column: column + dc, row: row + dr };
+                if (isSolid(map, near)) {
+                    const beyond = kindAt(map, near);
+                    edges.push({
+                        x1: X(column + x1),
+                        y1: Y(row + y1),
+                        x2: X(column + x2),
+                        y2: Y(row + y2),
+                        // A door's sides along the wall are the wall's ends, drawn; only its side toward the outside is left open, as the way goes on there.
+                        gap: beyond === "outside" && ["door", "open-door", "secret-door", "opening"].includes(kindAt(map, { column, row })),
+                        rock: beyond === "rock" || (beyond === "outside" && rockLike),
+                    });
+                }
+            }
+        }
+    }
+    const loops = [];
+    const unused = new Set(edges);
+    while (unused.size > 0) {
+        const first = unused.values().next().value;
+        const loop = [first];
+        unused.delete(first);
+        let last = first;
+        for (;;) {
+            const next = [...unused].find((edge) => edge.x1 === last.x2 && edge.y1 === last.y2);
+            if (next === undefined) {
+                break;
+            }
+            loop.push(next);
+            unused.delete(next);
+            last = next;
+        }
+        loops.push(loop);
+    }
+    return loops;
+}
+/**
+ * A loop of the floor's outline as a path: rounded at the corners where rock lies on both sides, as a cave's, at most half a square; with gaps, the doors'
+ * sides toward the outside left out and the loop left open, as the ink draws it; without, closed, as the floor's fill.
+ */
+export function tracedLoop(loop, withGaps, rounding) {
+    const turns = (first, second) => Math.sign(first.x2 - first.x1) !== Math.sign(second.x2 - second.x1) || Math.sign(first.y2 - first.y1) !== Math.sign(second.y2 - second.y1);
+    const radius = (first, second) => (first.rock && second.rock && turns(first, second) ? rounding : 0);
+    let path = "";
+    loop.forEach((edge, index) => {
+        const before = loop[(index - 1 + loop.length) % loop.length];
+        const after = loop[(index + 1) % loop.length];
+        const [ux, uy] = [Math.sign(edge.x2 - edge.x1), Math.sign(edge.y2 - edge.y1)];
+        const [r1, r2] = [radius(before, edge), radius(edge, after)];
+        if (withGaps && edge.gap) {
+            return;
+        }
+        const start = path === "" || (withGaps && before.gap) ? `M${edge.x1 + ux * r1} ${edge.y1 + uy * r1}` : "";
+        path += `${start}L${edge.x2 - ux * r2} ${edge.y2 - uy * r2}`;
+        if (r2 > 0 && !(withGaps && after.gap)) {
+            path += `Q${edge.x2} ${edge.y2} ${after.x1 + Math.sign(after.x2 - after.x1) * r2} ${after.y1 + Math.sign(after.y2 - after.y1) * r2}`;
+        }
+    });
+    return withGaps ? path : `${path}Z`;
+}
+/** The side of the map a square that leads elsewhere is on, for its arrow; inside for a door in the map, into a building that is a place of its own. */
+export function exitSide(map, square) {
+    return square.row === map.rows - 1 ? "bottom" : square.row === 0 ? "top" : square.column === 0 ? "left" : square.column === map.columns - 1 ? "right" : "inside";
+}
+/** Whether two squares touch, sides or corners. */
+export function nextTo(first, second) {
+    return Math.max(Math.abs(first.column - second.column), Math.abs(first.row - second.row)) === 1;
+}