Ability icons

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,} from 'react';import { ABILITIES, ABILITY_IDS, AbilityGlyph, type AbilityId } from './glyphs';import { useAutoplay } from './use-autoplay';import styles from './ability-icons.module.css';export { AbilityGlyph, ABILITIES, ABILITY_IDS, type AbilityId } from './glyphs';/* * Ability icons: the tool abilities of a game HUD, shown on their own on a plain stage. A strip * lists the kit, one glyph per ability in its own colour; the equipped one also sits in a slot * inside a ring of 48 ticks, which is how the player reads, without looking, whether it can be * used again. Like a game's HUD it brings its own dark plates, so it reads on any backdrop. * * - Using an ability kicks its glyph (a squash, then a punch) and, if it has a cooldown, darkens

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useId, type ReactNode } from 'react';/* * The ability glyphs: flat, bold silhouettes, one colour each, drawn on a 54-unit square (the * motorbike is wider and spills 5 units out each side, so every glyph sits in the same 64 × 60 * box). Details are cut out of the shape, never painted over it, so whatever is behind shows * through them: each glyph is a filled group under a mask whose black shapes are the cuts. * * An upgraded glyph gets a cream "+" in its lower right corner, with a 2.5-unit moat cut around it * so the badge reads on top of any colour. */export type AbilityId =  'round-bomb' | 'square-bomb' | 'magnet' | 'lock' | 'ice' | 'camera' | 'bike';export const ABILITY_IDS: AbilityId[] = [  'round-bomb',  'square-bomb',  'magnet',  'lock',

// 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. */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(

/* Ability icons (ability-icons.tsx): the HUD on its own, centred on the lab's plain stage, white by   day and near-black at night: the ability strip on top, the equipped ability's name under it, then   the equipped slot with its cooldown ring and the Use button.   Sizes are in units of the drawing, `--u` for the strip and `--s` for the slot: one unit is 1px   when the stage is wide enough, and both shrink with the stage's width (a container query), so   the strip always fits a 320px phone.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page, or the one its colorScheme prop sets   (data-color-scheme). As in a game, the HUD brings its own dark plates (the strip, the name's   pill, the slot's disc, the Use pill), so the glyphs, the cream words and the ring's dark ticks   read the same on a white stage and a black one; on the light stage the plates also cast a soft   shadow so they sit on it.   Crispness. Everything is vector: SVG glyphs and rings, CSS plates. No shape is blurred or scaled   as a bitmap; the only soft things are glows and shadows, painted behind the sharp shapes.   Memory. The stage is one layout boundary sized from outside. The rings' ticks change only an   attribute, 48 times per cooldown; everything that moves does it by transform, opacity or   filter. */.root {  /* The stage, and its edge. */