@@ -220,6 +299,19 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
+
+
+
+
+
+
+
@@ -229,6 +321,7 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
import {
createGlyphFirstPersonControls,
createGlyphOrbitControls,
+ createGlyphOrthographicCamera,
createGlyphPerspectiveCamera,
createGlyphScene,
defineGlyphEffect,
@@ -838,6 +931,9 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
// which control handle is attached. Matrix rain keeps animating in
// both modes (its own rAF loop below, independent of camera mode).
let mode: CameraMode = "orbit";
+ // Registered by the mobile game pad; fired on any style/camera change so
+ // the button cubes re-theme and the C label tracks the mode.
+ let syncGamePad: (() => void) | null = null;
function applyOrbitDefault(): void {
camera.perspective = ORBIT_DEFAULT.perspective;
@@ -872,9 +968,21 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
button.classList.toggle("active", (button as HTMLElement).dataset.camera === mode);
});
host.classList.toggle("is-fpv", mode === "fpv");
+ // Body-level flag drives the sidebar FPV legend and the mobile joystick
+ // (both live outside the temple host).
+ document.body.classList.toggle("temple-fpv", mode === "fpv");
+ if (mode !== "fpv") document.body.classList.remove("temple-locked");
+ syncGamePad?.();
}
updateCameraSeg();
+ // Pointer-lock state flips the sidebar ESC legend between "release" (unlock
+ // mouselook) and the default "click look" hint.
+ document.addEventListener("pointerlockchange", () => {
+ const locked = document.pointerLockElement === host;
+ document.body.classList.toggle("temple-locked", locked && mode === "fpv");
+ });
+
function setMode(next: CameraMode): void {
if (next === mode) return;
mode = next;
@@ -916,11 +1024,63 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
// is a page-level workaround; the underlying fragility (any FPV scene
// with a per-frame effect layer) lives in createGlyphFirstPersonControls'
// use of `click` and would be a good candidate for an upstream fix.
- host.addEventListener("pointerdown", () => {
- if (mode === "fpv" && !fpv.isLocked()) {
- try { fpv.lock(); } catch { /* ignore */ }
+ // ── Touch drag-to-look (FPV) ──────────────────────────────────────────
+ // Pointer-lock mouselook is desktop-only, so on touch we turn the camera
+ // by dragging on the temple. The joystick and buttons are their own
+ // sibling elements (not inside the host), so those touches never reach
+ // here — a second finger can look while the first walks (twin-stick).
+ // Mirrors the FPV control's deriveTarget so it composes with WASD:
+ // target = eye + forward(rotX,rotY) * (perspective / BASE_TILE).
+ const BASE_TILE = 50; // glyphcss authoring unit (see AGENTS.md)
+ const LOOK_SENS = 0.24; // degrees per CSS pixel dragged
+ const FPV_MIN_PITCH = 6, FPV_MAX_PITCH = 174;
+ function applyLook(rotX: number, rotY: number): void {
+ camera.rotX = Math.max(FPV_MIN_PITCH, Math.min(FPV_MAX_PITCH, rotX));
+ camera.rotY = ((rotY % 360) + 360) % 360;
+ const rx = (camera.rotX * Math.PI) / 180, ry = (camera.rotY * Math.PI) / 180;
+ const fx = -Math.sin(rx) * Math.cos(ry), fy = -Math.sin(rx) * Math.sin(ry), fz = -Math.cos(rx);
+ const d = (Number.isFinite(camera.perspective) && camera.perspective > 0 ? camera.perspective : 32000) / BASE_TILE;
+ const o = fpv.getOrigin();
+ camera.target = [o[0] + fx * d, o[1] + fy * d, o[2] + fz * d];
+ scene.rerender();
+ }
+ let lookId: number | null = null, lookX = 0, lookY = 0;
+ const onLookMove = (e: PointerEvent): void => {
+ if (e.pointerId !== lookId) return;
+ e.preventDefault();
+ const dx = e.clientX - lookX, dy = e.clientY - lookY;
+ lookX = e.clientX; lookY = e.clientY;
+ applyLook(camera.rotX - dy * LOOK_SENS, camera.rotY - dx * LOOK_SENS);
+ };
+ const endLook = (e?: PointerEvent): void => {
+ if (lookId === null || (e && e.pointerId !== lookId)) return;
+ lookId = null;
+ window.removeEventListener("pointermove", onLookMove);
+ window.removeEventListener("pointerup", endLook);
+ window.removeEventListener("pointercancel", endLook);
+ };
+ // One host pointerdown handles both look models: mouse → pointer-lock
+ // (see below), touch → drag-to-look via window-level listeners (robust to
+ // the finger leaving the element).
+ host.addEventListener("pointerdown", (e) => {
+ if (mode !== "fpv") return;
+ if (e.pointerType === "mouse") {
+ // FPV's own pointer-lock trigger listens for a native `click`, but the
+ // matrix effect rewrites the
spans every frame, detaching the
+ // mousedown target before mouseup so `click` never fires on the
+ // temple. `pointerdown` fires synchronously at press time, so route
+ // desktop pointer-lock through it instead.
+ if (!fpv.isLocked()) { try { fpv.lock(); } catch { /* ignore */ } }
+ return;
}
+ if (lookId !== null) return;
+ lookId = e.pointerId; lookX = e.clientX; lookY = e.clientY;
+ window.addEventListener("pointermove", onLookMove, { passive: false });
+ window.addEventListener("pointerup", endLook);
+ window.addEventListener("pointercancel", endLook);
});
+ window.addEventListener("blur", () => endLook());
+ document.addEventListener("visibilitychange", () => { if (document.hidden) endLook(); });
// Matrix rain over the temple surfaces: green monochrome code flowing
// down each face (space: "surface" derives per-face downhill directions,
@@ -1055,6 +1215,7 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
styleSeg?.querySelectorAll("button").forEach((b) =>
b.classList.toggle("active", (b as HTMLElement).dataset.style === next));
scene.rerender();
+ syncGamePad?.();
}
styleSeg?.addEventListener("click", (e) => {
const btn = (e.target as HTMLElement).closest("[data-style]") as HTMLElement | null;
@@ -1063,6 +1224,21 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
scheduleWrite();
});
+ // Recording shortcuts: M = toggle matrix/marble, C = toggle orbit/fpv.
+ // (WASD/Space/Ctrl stay reserved for FPV movement.)
+ window.addEventListener("keydown", (e) => {
+ const tag = (e.target as HTMLElement | null)?.tagName;
+ if (tag === "INPUT" || tag === "TEXTAREA" || e.metaKey || e.ctrlKey || e.altKey) return;
+ const k = e.key.toLowerCase();
+ if (k === "m") {
+ applyStyle(style === "matrix" ? "marble" : "matrix");
+ scheduleWrite();
+ } else if (k === "c") {
+ setMode(mode === "fpv" ? "orbit" : "fpv");
+ scheduleWrite();
+ }
+ });
+
const densityInput = $("density") as HTMLInputElement | null;
const densityVal = $("density-val");
densityInput?.addEventListener("input", () => {
@@ -1292,6 +1468,249 @@ const description = "The Parthenon — octastyle Doric peripteral temple built f
const initialState = location.hash.length > 1 ? decodeState(location.hash.slice(1)) : null;
if (initialState) applyState(initialState);
+ // ── Mobile game pad (touch only) ─────────────────────────────────────
+ // A touch controller for phones. Everything is drawn by glyphcss: the
+ // joystick is its own glyph scene (finer density than the temple) driven
+ // by a hand-rolled pointer-drag handler (with pointer capture, so the
+ // drag keeps tracking outside the ring), and each action button is a
+ // spinning themed glyph cube. The joystick feeds synthetic WASD — the FPV
+ // control walks on keysHeld and moves without pointer-lock, which touch
+ // can't grant anyway. M toggles style, C toggles orbit/FPV.
+ setupGamePad();
+ function setupGamePad(): void {
+ // Touch-device gate for the whole pad. Media queries alone are
+ // unreliable (some phones report hover: hover), so combine the touch
+ // signals; `?pad=1`/`?pad=0` in the URL force it on/off for testing.
+ const padParam = new URLSearchParams(location.search).get("pad");
+ const isTouch = padParam === "1" ? true
+ : padParam === "0" ? false
+ : ((navigator.maxTouchPoints ?? 0) > 0
+ || (window.matchMedia?.("(pointer: coarse)").matches ?? false)
+ || /Mobi|Android|iP(hone|od|ad)|Tablet|Touch/i.test(navigator.userAgent));
+ document.documentElement.classList.toggle("is-touch", isTouch);
+
+ // ── Glyph HUD meshes (joystick ring/knob) ──
+ const BASE_R = 1.05, KNOB_R = 0.42, MAX_OFF = BASE_R - KNOB_R;
+ const RING_COLOR = "#41708a", KNOB_COLOR = "#8fe6ff"; // dim + bright cyan UI palette
+ const disc = (cx: number, cy: number, cz: number, r: number, color: string): Polygon[] => {
+ const sides = 20, out: Polygon[] = [];
+ for (let k = 0; k < sides; k++) {
+ const a0 = (k / sides) * Math.PI * 2, a1 = ((k + 1) / sides) * Math.PI * 2;
+ out.push({
+ vertices: [[cx, cy, cz], [cx + r * Math.cos(a0), cy + r * Math.sin(a0), cz], [cx + r * Math.cos(a1), cy + r * Math.sin(a1), cz]],
+ color,
+ });
+ }
+ return out;
+ };
+ // Base ring (annulus) — outlines the joystick bounds so the knob reads
+ // against the scene behind it.
+ const ring = (r0: number, r1: number, color: string): Polygon[] => {
+ const sides = 28, out: Polygon[] = [];
+ for (let k = 0; k < sides; k++) {
+ const a0 = (k / sides) * Math.PI * 2, a1 = ((k + 1) / sides) * Math.PI * 2;
+ out.push({
+ vertices: [
+ [r0 * Math.cos(a0), r0 * Math.sin(a0), 0], [r1 * Math.cos(a0), r1 * Math.sin(a0), 0],
+ [r1 * Math.cos(a1), r1 * Math.sin(a1), 0], [r0 * Math.cos(a1), r0 * Math.sin(a1), 0],
+ ],
+ color,
+ });
+ }
+ return out;
+ };
+ // knobAt(vx,vy): ring + knob offset. This top-down ortho basis maps
+ // world +X → screen-DOWN and +Y → screen-right (measured), so the knob
+ // feeds (-vy, vx): thumb-up (vy>0) → world -X → screen-up, thumb-right
+ // (vx>0) → world +Y → screen-right. The WASD mapping stays (vx, vy).
+ const joyRing = ring(BASE_R * 0.82, BASE_R, RING_COLOR);
+ const knobAt = (vx: number, vy: number): Polygon[] =>
+ joyRing.concat(disc(-vy * MAX_OFF, vx * MAX_OFF, 0.02, KNOB_R, KNOB_COLOR));
+
+ // ── HUD layer (page-local prototype of the future glyphcss feature) ──
+ // Renders a mesh into its own
through a FIXED camera — its own
+ // viewpoint, independent of the temple camera — positioned by the host's
+ // CSS anchor, with optional spin and pointer routing (drag → onDrag(vx,vy),
+ // vx right+/vy up+ unit-clamped; tap handled by the caller). The library
+ // version folds this into the scene as a managed detail-