Spur gauge

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  type AnimationEvent as ReactAnimationEvent,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,} from 'react';import { SpurGlyph } from './spur-glyph';import { useAutoplay } from './use-autoplay';import styles from './spur-gauge.module.css';/* * Spur gauge: the riding HUD that counts the mount's bursts of speed. Each spur (a kick) spends * one charge; spent charges come back one by one. * * - A charge is a rowel glyph in a slot. Pale yellow: ready. Blue: being restored, filling from *   the bottom over `regenMs`; when full it flashes and settles pale yellow. A dim silhouette: *   spent, so the player still sees the maximum. Gold with a feather: a bonus charge beyond the

// Copyright (c) 2026 Bruno Delorence. MIT License.import { useId } from 'react';/* * The spur glyph: a 13-point rowel with a pin (a round hub and a shank) laid over it, and, on a * bonus charge, a feather tucked into its lower right. Drawn in a 96-unit box centred on the * rowel's hub, the size of one slot of the gauge at its native scale. * * Where the pin and the feather sit on the rowel, a mask cuts a thin gap around them, so the * plate behind shows through: the three parts read apart without a darker outline colour. Everything * else is one fill (currentColor), so a state is just a colour and a glow on the slot. *//** The rowel's points: tip and valley radii, the turn of its first tip from straight up. */const TIP = 35.6;const VALLEY = 21.5;const POINTS = 13;const FIRST = 3.3;/** The point the shank covers is left out. */const SKIP = 11;/** The pin: the hub's radius, the shank's width and its far end, and the gap around both. */const HUB = 8.6;const SHANK = 7;

/* Spur gauge (spur-gauge.tsx): a row of rowel glyphs on a dark pill, with two button chips below.   Sizes inside the gauge are in --u, one unit of the 96-unit slot (1px at the kit's own size), so   a smaller slot scales the glyphs, their glows, their bursts and the pill together.   Colours are the tokens below, light-dark(light, dark) where the two differ. The HUD's own   colours (the glyphs, their glows, the pill) are the same on both schemes, as a game's are over   any scene: the pill is what lets the pale glyphs read on a light page. Only the pill's edge and   shadow and the chips follow the scheme. */.root {  /* The HUD, on both schemes. A ready charge, a restoring one, a bonus one, a spent one. */  --ready: #fbfbbe;  --regen: #a6edff;  --gold: #fefc6b;  --empty: #f4f1cf;  --refused: rgb(255 72 60 / 0.95);  /* The pill behind the row, its hairline edge and its shadow on the page. */  --plate: rgb(26 31 33 / 0.92);  --plate-edge: rgb(0 0 0 / 0.2);  --plate-shadow: rgb(20 24 26 / 0.22);  /* The chips: a quiet lab control, and the dark controller face inside it. */  --chip: #fff;  --chip-edge: rgb(0 0 0 / 0.1);  --chip-ink: #2a2a28;

'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. */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);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;