Rank shields

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState } from 'react';import { RankShield } from './rank-shield';import { TIER_NAMES, type Tier } from './tiers';import { useAutoplay } from './use-autoplay';import styles from './rank-shields.module.css';export { RankShield, type RankShieldProps } from './rank-shield';export { TIERS, type Tier } from './tiers';/* * Rank shields: a podium of game-style rank emblems (gold 1, silver 2, bronze 3) on a dark navy * stage. Each emblem is a RankShield (rank-shield.tsx), any number in any of five metals. * * - Each shield is a button: hovering tilts it towards the pointer and sweeps a sheen across it, *   focusing it from the keyboard sweeps the sheen, pressing it plays its unlock again. "Replay" *   plays all three, one after another. * - While on screen and untouched, the demo plays the unlock once, then now and then leans one *   shield after another as if hovered, sweeping its sheen, and every few rounds plays the unlock *   again. Any real input hands it to the reader. Off screen, in a hidden tab or under reduced *   motion, nothing plays.

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useRef,  useState,  type CSSProperties,  type PointerEvent as ReactPointerEvent,} from 'react';import {  DIGITS,  FRAME,  GLYPH,  MIRROR,  PANEL,  SPARKLES,  STAR,  TOP_EDGE,  VIEW,  WING_LOWER,  WING_UPPER,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The drawing of a rank shield, in the units of a 461 × 340 view box whose mirror axis is * x = 230.5. Every symmetric shape is drawn as its left half only; `symmetric()` closes it with * the right half, mirrored. The wings are drawn on the left and mirrored as a whole. */export const VIEW = { width: 461, height: 340 };const AXIS = 461;type Point = [number, number];type Segment = { c?: [Point, Point]; q?: Point; to: Point };const n = (value: number) => +value.toFixed(2);const pt = ([x, y]: Point) => `${n(x)} ${n(y)}`;const flip = ([x, y]: Point): Point => [AXIS - x, y];/** A closed path from its left half: from a point on the axis, down the left, to the axis again. */function symmetric(start: Point, half: Segment[]) {  let d = `M${pt(start)}`;  for (const segment of half) {    if (segment.c) d += `C${pt(segment.c[0])} ${pt(segment.c[1])} ${pt(segment.to)}`;    else if (segment.q) d += `Q${pt(segment.q)} ${pt(segment.to)}`;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The metals. Each tier is one set of colours on the same drawing: the outline, the frame's lit * (left) and shaded (right) halves, its bevels, the recessed panel and its rim (the wings share the * panel's colour), and the numeral's highlight, face and drop. */export type Tier = 'gold' | 'silver' | 'bronze' | 'platinum' | 'diamond';export type Palette = {  /** The thick outline around everything. */  outline: string;  /** The frame, lit half and shaded half. */  frame: string;  frameShade: string;  /** The light caught by the top edges, and by the frame's inner lip along the bottom. */  bevel: string;  lip: string;  /** The deep shadow along the frame's right edge, where it meets the wings. */  deep: string;  /** The recessed panel (and the wings), and the shadow its rim casts on it. */  panel: string;  rim: string;

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

/* Rank shields (rank-shields.tsx, rank-shield.tsx): a navy stage at night, a pale lavender grey by   day, with three emblems in a row, as large as the stage allows (a container query), and a small   Replay button under them. The emblems' own colours are in tiers.ts: they are art, the same on   both schemes.   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).   Motion. Everything moves by transform and opacity: the tilt (a 3D rotation of each emblem's   HTML box), the sheen (a band of light translated across, clipped to the metal) and the unlock's   keyframes on the drawing's groups. */.root {  /* The stage. */  --surface: #e9e8f1;  /* The Replay button, its words and its edge. */  --ink: #2b2a3d;  --button: rgb(255 255 255 / 0.7);  --button-hover: #fff;  --edge: rgb(30 28 60 / 0.12);  --focus: #387bff;  position: relative;  container-type: inline-size;