Controller glyphs

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useState,  type KeyboardEvent,  type PointerEvent,} from 'react';import {  Glyph,  describeGlyph,  type GlyphDirection,  type GlyphName,  type GlyphSize,  type StickMotion,} from './glyph';import { useAutoplay } from './use-autoplay';import styles from './controller-glyphs.module.css';/*

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useId, type CSSProperties, type ReactNode } from 'react';import styles from './glyph.module.css';/* * Glyph: one controller input as a game draws it in its prompts, flat tan inside a dark edge. * * - Each glyph is an SVG on a grid where a face button's box is 40 units: a round badge of 32, a *   slanted shoulder tab, a cross, four direction buttons, or a stick seen from the side (an oval *   cap with a rim, on a short foot), with arrows that say how to move it. * - The letter is not painted: it is cut out of the tan shape by a mask, over a dark edge drawn *   behind (the same shape, filled and stroked 2.4 units wider), so the glyph reads on a light *   stage and a dark one alike, as a game's prompts read on any scene. Arrows that overlap a *   stick are cut around in the same way, and get their own edge. * - Its size is the box's, in px: the SVG is drawn in em of it, so a 40 px glyph is the kit's *   own, and a label beside it is 0.6 of it (24 px). * - pressed dips it in 70 ms and springs it back with an overshoot on release, with a flash of *   light; a stick leans the way it is pushed. lit makes it glow. animate loops its hint: arrows *   nudge out, the press arrow bobs, the rotate arrows swing, a lit direction pulses. */

/* Controller glyphs (controller-glyphs.tsx): a plain stage with the sheet of glyphs on it, in   groups, centred, and the last input at its foot as a prompt. The glyphs are 48 px on a wide   stage, 40 (the kit's) under 760 px, 32 under 560, 26 under 380 (a container query), or the size   prop.   Colours are the tokens below, light-dark(light, dark) where the two differ: only the stage and   its captions change, white by day and near-black at night; the glyphs keep their tan inside a   dark edge, and their words sit on dark plates, so they read on both, as a game's prompts do.   Motion lives in glyph.module.css; here, only the keys' hover and focus. */.root {  /* The stage, its edge, and the captions over each group. */  --surface: #fff;  --line: rgb(0 0 0 / 0.06);  --caption: rgb(23 25 29 / 0.55);  /* The keys: hover wash and focus ring. */  --key-hover: rgb(0 0 0 / 0.05);  --focus: #387bff;  position: relative;  container-type: inline-size;  isolation: isolate;  display: flex;  flex-direction: column;

/* Glyph (glyph.tsx): one controller input. Its size is --glyph-size, the box of a face button   (40 px, as the kit draws it); the SVG is sized in em of it, and a label is 0.6 of it.   Colours: the tan of the shapes, the dark edge behind them that the letters are cut into, the   label's warm white on its dark plate, and the glow. A game keeps its prompts' colours on any   scene, so the shapes, the edge and the plate are the same on a light stage and a dark one; only   the glow changes, a warm white on dark and an amber that shows on light.   Crispness: the shapes are plain SVG fills and strokes, never blurred; a glow is a drop-shadow   behind them, so the shapes themselves stay sharp at any pixel ratio.   Motion: a press dips the art in 70 ms and springs it back with an overshoot (transitions of   scale and translate), with a flash of light (a keyframe on a ring behind it); a pushed stick's   cap leans the way it goes; animate loops the hints (keyframes on the arrows and marks). */.glyph {  --glyph-ink: #e2ded3;  /* The dark edge round every shape, and the plate behind the words. */  --glyph-edge: #1d1c19;  --glyph-plate: rgb(29 28 25 / 0.86);  --glyph-text: #efe8da;  --glyph-glow: rgb(255 249 228 / 0.85);  --glyph-glow-soft: rgb(255 240 200 / 0.4);  --glyph-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. `visible` alone says whether it is on screen * in a visible tab, for clocks that should stop when nobody can see them. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);