@plasius/hexagons 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -8,6 +8,20 @@ The format is based on **[Keep a Changelog](https://keepachangelog.com/en/1.1.0/
 
 ## [Unreleased]
 
+- **Added**
+  - (placeholder)
+
+- **Changed**
+  - (placeholder)
+
+- **Fixed**
+  - (placeholder)
+
+- **Security**
+  - (placeholder)
+
+## [1.0.4] - 2026-02-21
+
 - **Added**
   - (placeholder)
 
@@ -48,7 +62,7 @@ The format is based on **[Keep a Changelog](https://keepachangelog.com/en/1.1.0/
 
 ---
 
-[Unreleased]: https://github.com/Plasius-LTD/hexagons/compare/v1.0.3...HEAD
+[Unreleased]: https://github.com/Plasius-LTD/hexagons/compare/v1.0.4...HEAD
 
 ## [1.0.0] - 2026-02-11
 
@@ -64,3 +78,4 @@ The format is based on **[Keep a Changelog](https://keepachangelog.com/en/1.1.0/
 - **Security**
   - (placeholder)
 [1.0.3]: https://github.com/Plasius-LTD/hexagons/releases/tag/v1.0.3
+[1.0.4]: https://github.com/Plasius-LTD/hexagons/releases/tag/v1.0.4

package/README.md

@@ -10,6 +10,8 @@
 
 Public package containing hexagonal architecture utilities and game/domain helpers for Plasius applications.
 
+Primary demo surface name: **Generator**.
+
 
 ## Install
 

package/dist/game.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../src/game.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,IAAI,4CAgKnB"}
+{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../src/game.tsx"],"names":[],"mappings":"AA4RA,wBAAgB,IAAI,4CAuZnB"}

package/dist/game.js

@@ -1,31 +1,402 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState, } from "react";
 import { ErrorBoundary } from "@plasius/error";
 import { MacroBiomeLabel, MicroFeatureLabel, SurfaceCoverLabel, TerrainBiomeLabel, generateTemperateMixedForest, } from "@plasius/gpu-world-generator";
 import { xrSessionModes } from "@plasius/gpu-xr";
-import { buildHexMapTiles, computeMapBounds, } from "./worldMap.js";
+import { buildHexMapTiles, } from "./worldMap.js";
 import styles from "./styles/game.module.css";
 const HEX_SIZE = 18;
+const HEIGHT_SCALE = 26;
+const HUMAN_EYE_HEIGHT = 1.72;
+const WALK_SPEED = 20;
+const FLY_SPEED = 32;
+const VERTICAL_FLY_SPEED = 22;
+const LOOK_SENSITIVITY = 0.0032;
+const NEAR_PLANE = 0.5;
+const FAR_PLANE = 1100;
+const FOV_RAD = Math.PI / 3;
+const CAMERA_UPDATE_MS = 100;
 function formatPercent(value) {
     return `${Math.round(value * 100)}%`;
 }
 function formatNumber(value) {
     return Number.isFinite(value) ? value.toFixed(2) : "n/a";
 }
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function wrapAngle(value) {
+    const full = Math.PI * 2;
+    const wrapped = ((value % full) + full) % full;
+    return wrapped > Math.PI ? wrapped - full : wrapped;
+}
+function hexCorners(centerX, centerZ, size) {
+    const points = [];
+    for (let i = 0; i < 6; i += 1) {
+        const angle = (Math.PI / 180) * (60 * i + 30);
+        points.push({
+            x: centerX + size * Math.cos(angle),
+            z: centerZ + size * Math.sin(angle),
+        });
+    }
+    return points;
+}
+function tintHex(hex, amount) {
+    const safe = hex.replace("#", "");
+    const channels = safe.length === 3
+        ? safe.split("").map((c) => parseInt(c + c, 16))
+        : [0, 2, 4].map((offset) => parseInt(safe.slice(offset, offset + 2), 16));
+    const factor = clamp(1 + amount, 0.2, 1.9);
+    const next = channels
+        .map((channel) => clamp(Math.round(channel * factor), 0, 255))
+        .map((channel) => channel.toString(16).padStart(2, "0"))
+        .join("");
+    return `#${next}`;
+}
+function findNearestTileIndex(tiles, x, z) {
+    if (tiles.length === 0) {
+        return 0;
+    }
+    let nearestIndex = 0;
+    let nearestDistance = Number.POSITIVE_INFINITY;
+    for (let index = 0; index < tiles.length; index += 1) {
+        const tile = tiles[index];
+        const dx = tile.x - x;
+        const dz = tile.y - z;
+        const distance = dx * dx + dz * dz;
+        if (distance < nearestDistance) {
+            nearestDistance = distance;
+            nearestIndex = index;
+        }
+    }
+    return nearestIndex;
+}
+function sampleGroundHeight(tiles, x, z) {
+    const index = findNearestTileIndex(tiles, x, z);
+    const tile = tiles[index];
+    if (!tile) {
+        return 0;
+    }
+    return tile.terrain.height * HEIGHT_SCALE;
+}
+function initialCamera(tiles) {
+    if (tiles.length === 0) {
+        return {
+            x: 0,
+            y: HUMAN_EYE_HEIGHT,
+            z: 0,
+            yaw: 0,
+            pitch: -0.35,
+        };
+    }
+    let sumX = 0;
+    let sumZ = 0;
+    for (const tile of tiles) {
+        sumX += tile.x;
+        sumZ += tile.y;
+    }
+    const x = sumX / tiles.length;
+    const z = sumZ / tiles.length;
+    const ground = sampleGroundHeight(tiles, x, z);
+    return {
+        x,
+        y: ground + HUMAN_EYE_HEIGHT,
+        z,
+        yaw: -Math.PI * 0.12,
+        pitch: -0.38,
+    };
+}
+function projectPoint(point, camera, viewportWidth, viewportHeight, focalLength) {
+    const dx = point.x - camera.x;
+    const dy = point.y - camera.y;
+    const dz = point.z - camera.z;
+    const sinYaw = Math.sin(camera.yaw);
+    const cosYaw = Math.cos(camera.yaw);
+    const xYaw = cosYaw * dx - sinYaw * dz;
+    const zYaw = sinYaw * dx + cosYaw * dz;
+    const sinPitch = Math.sin(camera.pitch);
+    const cosPitch = Math.cos(camera.pitch);
+    const yPitch = cosPitch * dy - sinPitch * zYaw;
+    const zPitch = sinPitch * dy + cosPitch * zYaw;
+    if (zPitch <= NEAR_PLANE || zPitch >= FAR_PLANE) {
+        return null;
+    }
+    return {
+        x: viewportWidth * 0.5 + (xYaw / zPitch) * focalLength,
+        y: viewportHeight * 0.57 - (yPitch / zPitch) * focalLength,
+        depth: zPitch,
+    };
+}
+function renderScene(context, canvas, tiles, camera, selectedIndex) {
+    const width = canvas.width;
+    const height = canvas.height;
+    const sky = context.createLinearGradient(0, 0, 0, height);
+    sky.addColorStop(0, "#0e1f33");
+    sky.addColorStop(0.55, "#15304b");
+    sky.addColorStop(1, "#1f2f22");
+    context.fillStyle = sky;
+    context.fillRect(0, 0, width, height);
+    const focalLength = (height * 0.86) / Math.tan(FOV_RAD * 0.5);
+    const drawQueue = [];
+    for (let index = 0; index < tiles.length; index += 1) {
+        const tile = tiles[index];
+        const elevation = tile.terrain.height * HEIGHT_SCALE;
+        const corners = hexCorners(tile.x, tile.y, HEX_SIZE);
+        const projectedCorners = [];
+        let depthTotal = 0;
+        let valid = true;
+        for (const corner of corners) {
+            const projected = projectPoint({ x: corner.x, y: elevation, z: corner.z }, camera, width, height, focalLength);
+            if (!projected) {
+                valid = false;
+                break;
+            }
+            projectedCorners.push(projected);
+            depthTotal += projected.depth;
+        }
+        if (!valid || projectedCorners.length === 0) {
+            continue;
+        }
+        const path = new Path2D();
+        path.moveTo(projectedCorners[0].x, projectedCorners[0].y);
+        for (let i = 1; i < projectedCorners.length; i += 1) {
+            path.lineTo(projectedCorners[i].x, projectedCorners[i].y);
+        }
+        path.closePath();
+        const depth = depthTotal / projectedCorners.length;
+        const distanceShade = clamp(1 - depth / 520, 0.2, 1);
+        const elevationShade = clamp((elevation / HEIGHT_SCALE - 0.5) * 0.25, -0.16, 0.18);
+        const color = tintHex(tile.color, distanceShade - 1 + elevationShade);
+        drawQueue.push({
+            path,
+            color,
+            depth,
+            highlighted: index === selectedIndex,
+        });
+    }
+    drawQueue.sort((a, b) => b.depth - a.depth);
+    for (const item of drawQueue) {
+        context.fillStyle = item.color;
+        context.fill(item.path);
+        context.lineWidth = item.highlighted ? 2.3 : 1.2;
+        context.strokeStyle = item.highlighted
+            ? "rgba(255, 255, 255, 0.92)"
+            : "rgba(11, 18, 29, 0.42)";
+        context.stroke(item.path);
+    }
+    context.strokeStyle = "rgba(230, 245, 255, 0.8)";
+    context.lineWidth = 1;
+    const crosshairX = width * 0.5;
+    const crosshairY = height * 0.55;
+    context.beginPath();
+    context.moveTo(crosshairX - 8, crosshairY);
+    context.lineTo(crosshairX + 8, crosshairY);
+    context.moveTo(crosshairX, crosshairY - 8);
+    context.lineTo(crosshairX, crosshairY + 8);
+    context.stroke();
+}
 export function Game() {
     const [seed, setSeed] = useState(1337);
+    const [mode, setMode] = useState("walk");
     const [selectedIndex, setSelectedIndex] = useState(0);
+    const [cameraHud, setCameraHud] = useState({
+        x: 0,
+        y: HUMAN_EYE_HEIGHT,
+        z: 0,
+        yaw: 0,
+        pitch: -0.35,
+        ground: 0,
+    });
+    const canvasRef = useRef(null);
+    const cameraRef = useRef({
+        x: 0,
+        y: HUMAN_EYE_HEIGHT,
+        z: 0,
+        yaw: 0,
+        pitch: -0.35,
+    });
+    const keysRef = useRef(new Set());
+    const dragRef = useRef({
+        active: false,
+        pointerId: -1,
+        lastX: 0,
+        lastY: 0,
+    });
     const world = useMemo(() => generateTemperateMixedForest({ seed, radius: 9 }), [seed]);
     const tiles = useMemo(() => buildHexMapTiles(world.cells, world.terrain, HEX_SIZE), [world]);
-    const bounds = useMemo(() => computeMapBounds(tiles, HEX_SIZE), [tiles]);
     const safeSelectedIndex = selectedIndex >= 0 && selectedIndex < tiles.length ? selectedIndex : 0;
     const selected = tiles[safeSelectedIndex];
-    const viewBox = `${bounds.minX} ${bounds.minY} ${bounds.maxX - bounds.minX} ${bounds.maxY - bounds.minY}`;
+    useEffect(() => {
+        const camera = initialCamera(tiles);
+        cameraRef.current = camera;
+        const nearestIndex = findNearestTileIndex(tiles, camera.x, camera.z);
+        setSelectedIndex(nearestIndex);
+        setCameraHud({
+            ...camera,
+            ground: sampleGroundHeight(tiles, camera.x, camera.z),
+        });
+    }, [tiles]);
+    useEffect(() => {
+        const camera = cameraRef.current;
+        const ground = sampleGroundHeight(tiles, camera.x, camera.z);
+        if (mode === "walk") {
+            camera.y = ground + HUMAN_EYE_HEIGHT;
+        }
+        else {
+            camera.y = Math.max(camera.y, ground + HUMAN_EYE_HEIGHT + 5);
+        }
+    }, [mode, tiles]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || tiles.length === 0) {
+            return;
+        }
+        const context = canvas.getContext("2d");
+        if (!context) {
+            return;
+        }
+        let frame = 0;
+        let lastTime = performance.now();
+        let hudAccumulator = 0;
+        const applyCanvasSize = () => {
+            const ratio = window.devicePixelRatio || 1;
+            const width = Math.max(1, Math.floor(canvas.clientWidth * ratio));
+            const height = Math.max(1, Math.floor(canvas.clientHeight * ratio));
+            if (canvas.width !== width || canvas.height !== height) {
+                canvas.width = width;
+                canvas.height = height;
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.repeat) {
+                return;
+            }
+            if (event.code === "KeyF") {
+                setMode((current) => (current === "walk" ? "fly" : "walk"));
+                event.preventDefault();
+                return;
+            }
+            keysRef.current.add(event.code);
+            if (event.code === "Space" ||
+                event.code.startsWith("Arrow") ||
+                event.code === "KeyW" ||
+                event.code === "KeyA" ||
+                event.code === "KeyS" ||
+                event.code === "KeyD") {
+                event.preventDefault();
+            }
+        };
+        const onKeyUp = (event) => {
+            keysRef.current.delete(event.code);
+        };
+        const onBlur = () => {
+            keysRef.current.clear();
+            dragRef.current.active = false;
+        };
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("keyup", onKeyUp);
+        window.addEventListener("blur", onBlur);
+        const tick = (now) => {
+            applyCanvasSize();
+            const camera = cameraRef.current;
+            const deltaSeconds = Math.min(0.05, (now - lastTime) / 1000);
+            lastTime = now;
+            const keys = keysRef.current;
+            const sprint = keys.has("ShiftLeft") || keys.has("ShiftRight");
+            const baseSpeed = mode === "fly" ? FLY_SPEED : WALK_SPEED;
+            const speed = sprint ? baseSpeed * 1.85 : baseSpeed;
+            let inputX = 0;
+            let inputZ = 0;
+            if (keys.has("KeyW") || keys.has("ArrowUp"))
+                inputZ += 1;
+            if (keys.has("KeyS") || keys.has("ArrowDown"))
+                inputZ -= 1;
+            if (keys.has("KeyA") || keys.has("ArrowLeft"))
+                inputX -= 1;
+            if (keys.has("KeyD") || keys.has("ArrowRight"))
+                inputX += 1;
+            const inputLength = Math.hypot(inputX, inputZ);
+            if (inputLength > 0) {
+                const nx = inputX / inputLength;
+                const nz = inputZ / inputLength;
+                const sinYaw = Math.sin(camera.yaw);
+                const cosYaw = Math.cos(camera.yaw);
+                camera.x += (nx * cosYaw + nz * sinYaw) * speed * deltaSeconds;
+                camera.z += (nz * cosYaw - nx * sinYaw) * speed * deltaSeconds;
+            }
+            const ground = sampleGroundHeight(tiles, camera.x, camera.z);
+            if (mode === "walk") {
+                camera.y = ground + HUMAN_EYE_HEIGHT;
+            }
+            else {
+                let verticalInput = 0;
+                if (keys.has("Space") || keys.has("KeyE"))
+                    verticalInput += 1;
+                if (keys.has("KeyC") || keys.has("KeyQ"))
+                    verticalInput -= 1;
+                camera.y += verticalInput * VERTICAL_FLY_SPEED * deltaSeconds;
+                camera.y = Math.max(camera.y, ground + 0.6);
+            }
+            camera.pitch = clamp(camera.pitch, -1.2, 0.75);
+            camera.yaw = wrapAngle(camera.yaw);
+            const nearestIndex = findNearestTileIndex(tiles, camera.x, camera.z);
+            renderScene(context, canvas, tiles, camera, nearestIndex);
+            hudAccumulator += deltaSeconds * 1000;
+            if (hudAccumulator >= CAMERA_UPDATE_MS) {
+                hudAccumulator = 0;
+                setSelectedIndex(nearestIndex);
+                setCameraHud({
+                    ...camera,
+                    ground,
+                });
+            }
+            frame = window.requestAnimationFrame(tick);
+        };
+        frame = window.requestAnimationFrame(tick);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            window.removeEventListener("keydown", onKeyDown);
+            window.removeEventListener("keyup", onKeyUp);
+            window.removeEventListener("blur", onBlur);
+        };
+    }, [mode, tiles]);
+    const handlePointerDown = (event) => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        canvas.focus();
+        canvas.setPointerCapture(event.pointerId);
+        dragRef.current.active = true;
+        dragRef.current.pointerId = event.pointerId;
+        dragRef.current.lastX = event.clientX;
+        dragRef.current.lastY = event.clientY;
+    };
+    const handlePointerMove = (event) => {
+        if (!dragRef.current.active || dragRef.current.pointerId !== event.pointerId) {
+            return;
+        }
+        const dx = event.clientX - dragRef.current.lastX;
+        const dy = event.clientY - dragRef.current.lastY;
+        dragRef.current.lastX = event.clientX;
+        dragRef.current.lastY = event.clientY;
+        const camera = cameraRef.current;
+        camera.yaw = wrapAngle(camera.yaw + dx * LOOK_SENSITIVITY);
+        camera.pitch = clamp(camera.pitch - dy * LOOK_SENSITIVITY * 0.82, -1.2, 0.75);
+    };
+    const handlePointerUp = (event) => {
+        if (dragRef.current.pointerId !== event.pointerId) {
+            return;
+        }
+        dragRef.current.active = false;
+        dragRef.current.pointerId = -1;
+        event.currentTarget.releasePointerCapture(event.pointerId);
+    };
     const handleRegenerate = () => {
         setSeed((current) => ((current * 1664525 + 1013904223) >>> 0) % 2147483647);
         setSelectedIndex(0);
     };
-    return (_jsx(ErrorBoundary, { name: "Game", children: _jsxs("div", { className: styles.game, children: [_jsxs("header", { className: styles.header, children: [_jsxs("div", { children: [_jsx("h1", { className: styles.title, children: "GPU World Cell Explorer" }), _jsxs("p", { className: styles.subtitle, children: ["Hex terrain generated through ", _jsx("code", { children: "@plasius/gpu-world-generator" }), " ", "and configured alongside lighting/particle/XR package profiles."] })] }), _jsxs("div", { className: styles.controls, children: [_jsxs("span", { className: styles.seed, children: ["Seed ", seed] }), _jsx("button", { className: styles.button, onClick: handleRegenerate, children: "Regenerate" })] })] }), _jsxs("div", { className: styles.layout, children: [_jsx("section", { className: styles.mapCard, children: _jsx("svg", { className: styles.map, viewBox: viewBox, role: "img", "aria-label": "Hex terrain map", children: tiles.map((tile, index) => (_jsx("polygon", { className: `${styles.tile} ${index === safeSelectedIndex ? styles.tileActive : ""}`, points: tile.points, fill: tile.color, onPointerEnter: () => setSelectedIndex(index), onClick: () => setSelectedIndex(index) }, `${tile.q}:${tile.r}`))) }) }), _jsxs("aside", { className: styles.panel, children: [_jsx("h2", { className: styles.panelTitle, children: "Selected Tile" }), _jsxs("dl", { className: styles.stats, children: [_jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Axial" }), _jsxs("dd", { className: styles.value, children: ["q ", selected?.q ?? 0, ", r ", selected?.r ?? 0] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Biome" }), _jsx("dd", { className: styles.value, children: selected
+    return (_jsx(ErrorBoundary, { name: "Game", children: _jsxs("div", { className: styles.game, children: [_jsxs("header", { className: styles.header, children: [_jsxs("div", { children: [_jsx("h1", { className: styles.title, children: "Generator" }), _jsx("p", { className: styles.subtitle, children: "Explore procedurally generated terrain in first-person. Walk at human eye height above the surface or switch to fly mode for aerial scouting." })] }), _jsxs("div", { className: styles.controls, children: [_jsxs("span", { className: styles.seed, children: ["Seed ", seed] }), _jsxs("button", { className: styles.modeButton, onClick: () => setMode((current) => (current === "walk" ? "fly" : "walk")), children: ["Mode: ", mode === "walk" ? "Walk" : "Fly"] }), _jsx("button", { className: styles.button, onClick: handleRegenerate, children: "Regenerate" })] })] }), _jsxs("div", { className: styles.layout, children: [_jsxs("section", { className: styles.mapCard, children: [_jsx("canvas", { ref: canvasRef, className: styles.viewport, role: "img", "aria-label": "Generator first-person world view", tabIndex: 0, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, onContextMenu: (event) => event.preventDefault() }), _jsxs("div", { className: styles.overlay, children: [_jsx("span", { className: styles.overlayTitle, children: mode === "walk" ? "Walking View" : "Flight View" }), _jsx("span", { className: styles.overlayText, children: "Drag to look \u2022 W/A/S/D move \u2022 F toggles walk/fly" })] })] }), _jsxs("aside", { className: styles.panel, children: [_jsx("h2", { className: styles.panelTitle, children: "Selected Tile" }), _jsxs("dl", { className: styles.stats, children: [_jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Axial" }), _jsxs("dd", { className: styles.value, children: ["q ", selected?.q ?? 0, ", r ", selected?.r ?? 0] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Biome" }), _jsx("dd", { className: styles.value, children: selected
                                                         ? TerrainBiomeLabel[selected.terrain.biome]
                                                         : "Unknown" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Macro Biome" }), _jsx("dd", { className: styles.value, children: selected?.terrain.macroBiome === undefined
                                                         ? "n/a"
@@ -33,5 +404,5 @@ export function Game() {
                                                         ? "n/a"
                                                         : SurfaceCoverLabel[selected.terrain.surface] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Feature" }), _jsx("dd", { className: styles.value, children: selected?.terrain.feature === undefined
                                                         ? "none"
-                                                        : MicroFeatureLabel[selected.terrain.feature] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Height" }), _jsx("dd", { className: styles.value, children: selected ? formatNumber(selected.terrain.height) : "n/a" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Heat" }), _jsx("dd", { className: styles.value, children: selected ? formatPercent(selected.terrain.heat) : "n/a" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Moisture" }), _jsx("dd", { className: styles.value, children: selected ? formatPercent(selected.terrain.moisture) : "n/a" })] })] }), _jsx("h2", { className: styles.panelTitle, children: "GPU Stack" }), _jsxs("div", { className: styles.chipRow, children: [_jsx("span", { className: styles.chip, children: "worldgen: mixed-forest" }), _jsxs("span", { className: styles.chip, children: ["tiles: ", tiles.length] }), _jsxs("span", { className: styles.chip, children: ["xr modes: ", xrSessionModes.filter((mode) => mode !== "inline").length] })] }), _jsxs("dl", { className: styles.stats, children: [_jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "World Generator" }), _jsx("dd", { className: styles.value, children: "@plasius/gpu-world-generator" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "XR Runtime" }), _jsx("dd", { className: styles.value, children: "@plasius/gpu-xr" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "XR Session Modes" }), _jsx("dd", { className: styles.value, children: xrSessionModes.filter((mode) => mode !== "inline").join(", ") })] })] })] })] })] }) }));
+                                                        : MicroFeatureLabel[selected.terrain.feature] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Height" }), _jsx("dd", { className: styles.value, children: selected ? formatNumber(selected.terrain.height) : "n/a" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Heat" }), _jsx("dd", { className: styles.value, children: selected ? formatPercent(selected.terrain.heat) : "n/a" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Moisture" }), _jsx("dd", { className: styles.value, children: selected ? formatPercent(selected.terrain.moisture) : "n/a" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Camera X/Z" }), _jsxs("dd", { className: styles.value, children: [formatNumber(cameraHud.x), " / ", formatNumber(cameraHud.z)] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Camera Height" }), _jsxs("dd", { className: styles.value, children: [formatNumber(cameraHud.y), " m"] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Clearance" }), _jsxs("dd", { className: styles.value, children: [formatNumber(cameraHud.y - cameraHud.ground), " m"] })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "Yaw / Pitch" }), _jsxs("dd", { className: styles.value, children: [Math.round((cameraHud.yaw * 180) / Math.PI), "\u00B0 /", " ", Math.round((cameraHud.pitch * 180) / Math.PI), "\u00B0"] })] })] }), _jsx("h2", { className: styles.panelTitle, children: "GPU Stack" }), _jsxs("div", { className: styles.chipRow, children: [_jsx("span", { className: styles.chip, children: "worldgen: mixed-forest" }), _jsxs("span", { className: styles.chip, children: ["tiles: ", tiles.length] }), _jsxs("span", { className: styles.chip, children: ["mode: ", mode] }), _jsxs("span", { className: styles.chip, children: ["xr modes: ", xrSessionModes.filter((mode) => mode !== "inline").length] })] }), _jsxs("dl", { className: styles.stats, children: [_jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "World Generator" }), _jsx("dd", { className: styles.value, children: "@plasius/gpu-world-generator" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "XR Runtime" }), _jsx("dd", { className: styles.value, children: "@plasius/gpu-xr" })] }), _jsxs("div", { className: styles.row, children: [_jsx("dt", { className: styles.label, children: "XR Session Modes" }), _jsx("dd", { className: styles.value, children: xrSessionModes.filter((mode) => mode !== "inline").join(", ") })] })] }), _jsx("h2", { className: styles.panelTitle, children: "Controls" }), _jsxs("ul", { className: styles.controlList, children: [_jsxs("li", { children: [_jsx("kbd", { children: "W" }), _jsx("kbd", { children: "A" }), _jsx("kbd", { children: "S" }), _jsx("kbd", { children: "D" }), " move"] }), _jsxs("li", { children: [_jsx("kbd", { children: "Shift" }), " sprint"] }), _jsxs("li", { children: [_jsx("kbd", { children: "Drag" }), " look around"] }), _jsxs("li", { children: [_jsx("kbd", { children: "F" }), " toggle walk/fly"] }), _jsxs("li", { children: [_jsx("kbd", { children: "Space" }), "/", _jsx("kbd", { children: "E" }), " up (fly)"] }), _jsxs("li", { children: [_jsx("kbd", { children: "Q" }), "/", _jsx("kbd", { children: "C" }), " down (fly)"] })] })] })] })] }) }));
 }

package/dist/styles/game.module.css

@@ -45,7 +45,9 @@
 .controls {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.65rem;
+  justify-content: flex-end;
 }
 
 .seed {
@@ -57,6 +59,27 @@
   padding: 0.3rem 0.7rem;
 }
 
+.modeButton {
+  border: 1px solid rgba(120, 201, 255, 0.44);
+  color: var(--text);
+  background: rgba(120, 201, 255, 0.16);
+  border-radius: 999px;
+  padding: 0.5rem 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  transition: transform 120ms ease, filter 120ms ease;
+}
+
+.modeButton:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.06);
+}
+
+.modeButton:active {
+  transform: translateY(0);
+}
+
 .button {
   border: 0;
   color: #001323;
@@ -93,13 +116,55 @@
 }
 
 .mapCard {
+  position: relative;
   padding: 0.65rem;
 }
 
-.map {
+.viewport {
   display: block;
   width: 100%;
   height: min(72vh, 760px);
+  border-radius: 0.8rem;
+  background:
+    radial-gradient(90% 85% at 50% 100%, rgba(86, 118, 70, 0.35), transparent 70%),
+    linear-gradient(180deg, #0b1c2f, #112943 56%, #1b3428);
+  cursor: grab;
+  touch-action: none;
+}
+
+.viewport:active {
+  cursor: grabbing;
+}
+
+.viewport:focus-visible {
+  outline: 2px solid rgba(138, 214, 255, 0.8);
+  outline-offset: 2px;
+}
+
+.overlay {
+  position: absolute;
+  left: 1.2rem;
+  bottom: 1.15rem;
+  display: grid;
+  gap: 0.18rem;
+  max-width: min(88%, 32rem);
+  padding: 0.6rem 0.78rem;
+  border-radius: 0.65rem;
+  border: 1px solid rgba(185, 218, 255, 0.26);
+  background: rgba(3, 9, 17, 0.58);
+  backdrop-filter: blur(4px);
+}
+
+.overlayTitle {
+  font-size: 0.77rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #bde4ff;
+}
+
+.overlayText {
+  font-size: 0.78rem;
+  color: rgba(226, 239, 255, 0.92);
 }
 
 .tile {
@@ -173,6 +238,31 @@
   border: 1px solid rgba(120, 201, 255, 0.34);
 }
 
+.controlList {
+  margin: 0;
+  padding-left: 1rem;
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+}
+
+.controlList li {
+  display: flex;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.controlList kbd {
+  font-size: 0.73rem;
+  border-radius: 0.32rem;
+  border: 1px solid rgba(157, 179, 209, 0.4);
+  padding: 0.12rem 0.32rem;
+  color: #e7f0ff;
+  background: rgba(14, 24, 38, 0.72);
+}
+
 @keyframes reveal {
   from {
     opacity: 0;
@@ -202,7 +292,13 @@
     align-items: flex-start;
   }
 
-  .map {
+  .viewport {
     height: min(58vh, 540px);
   }
+
+  .overlay {
+    left: 1rem;
+    right: 1rem;
+    max-width: none;
+  }
 }

package/dist-cjs/game.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../src/game.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,IAAI,4CAgKnB"}
+{"version":3,"file":"game.d.ts","sourceRoot":"","sources":["../src/game.tsx"],"names":[],"mappings":"AA4RA,wBAAgB,IAAI,4CAuZnB"}