Ability select

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,} from 'react';import { textOf, plain, type AbilityText, type Piece } from './abilities';import { Corner, Rail } from './bezel';import { ABILITY_IDS, AbilityGlyph, type AbilityId } from './glyphs';import { useAutoplay } from './use-autoplay';import styles from './ability-select.module.css';export { AbilityGlyph, ABILITY_IDS, type AbilityId } from './glyphs';export { TEXTS, type AbilityText, type Piece } from './abilities';/* * Ability select: the page of a game's pause tablet where the player picks the ability the

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { AbilityId } from './glyphs';/* * What the page says about each ability: its name, a heading that says what the button does, and * two or three short lines. A line is a list of pieces; a piece in `{ mark }` is the one thing to * remember, picked out in red. An upgraded ability has its own heading and lines. */export type Piece = string | { mark: string };export type AbilityText = {  /** The name above the row, without the "+" of an upgrade (added on its own). */  name: string;  heading: string;  text: Piece[];  /** What the page says once the ability is upgraded; without it, the same as above. */  upgraded?: { heading?: string; text: Piece[] };};export const TEXTS: Record<AbilityId, AbilityText> = {  'round-bomb': {    name: 'Round Bomb',

// 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 { useId } from 'react';/* * The tablet's bezel ornaments: a carved sandstone inlay, drawn as SVG strokes so it stays sharp * at any size. Each stroke is laid three times: a dark bed a little wider than the stone, the * stone, then a thin darker groove down its middle, which reads as a channel cut into it. A * blurred cyan copy sits behind the corners, the light leaking from the screen under the stone. * * A corner is a stepped key: an outer bracket that follows the tablet's edge and an inner line * that steps in towards the screen, ending in two rings with a lit core, plus a diamond stud. * The rails along the top and bottom bands repeat a long rounded bar and a small stud. */const STONE = '#b39a6a';const BED = '#1c160d';const GROOVE = '#7a6544';const CORE = '#62ddff';const KEY = 'M7 132V34Q7 7 34 7H124M26 112V64L44 46H64V26H104';

// 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 select (ability-select.tsx): a page of a game's pause tablet, centred on a plain stage.   Every size is a multiple of --u, 1 px at full size (a 960 × 540 tablet), less on a narrower   stage. Under 700 px the tablet switches to a compact layout 520 units wide, with its own   sizes, and grows as tall as its content instead of keeping 16:9; words never go under 11 px.   The tablet's bezel and screen are dark on any page, as a game draws them; only its edge and its   shadow on the page follow the colour scheme, through light-dark() tokens.   No filter touches a glyph or a word: glows are box- and text-shadows behind the sharp shapes.   Motion: the highlight glides by a transition on translate; the name and the description   crossfade by keyframes; nudges, pulses and pops are Web Animations (in the component). */.root {  /* Words on the screen. */  --cyan: #3cd3fc;  --cyan-glow: rgb(24 160 255 / 0.85);  --mark: #f0484a;  /* The screen: a navy field, lit blue along its top and bottom edges. */  --navy: #191b31;  --navy-dot: rgb(140 156 236 / 0.075);  --edge-light: #05428c;  /* The bezel. */  --bezel: #1a1a1b;  --bezel-deep: #101011;