Tablet frame

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type ReactNode,} from 'react';import { BUTTON_NAME, ButtonGlyph, type TabletButton } from './glyphs';import { Corner, TILES } from './ornament';import { SAMPLE_HINTS, SAMPLE_TABS, SampleScreen } from './samples';import { useAutoplay } from './use-autoplay';import styles from './tablet-frame.module.css';/* * Tablet frame: the device that wraps a game's tablet screens (abilities, map, album…). A deep * navy screen with a faint engraved texture and a glowing blue-cyan inner edge, held in a dark

// Copyright (c) 2026 Bruno Delorence. MIT License.import { useId, type SVGProps } from 'react';/* * The bezel's carved ornament, drawn as engraved circuit traces: tubes that run straight, step at * 45 degrees, bend round in small rounded notches and end in ring pads or round studs. * * Every shape is a stroke on one shared geometry, stacked like a relief: two wide, faint blue * strokes for the glow round the carving, a blue bed, a dark shadow pushed down and right, the * bronze body, a pale rim pushed up and left (the light catching the top edge) and a dashed dark * grain. No filter and no bitmap: it is all vector, so it stays sharp at any size. A pad is a * point-sized circle whose round stroke makes a stud; a ring is a circle stroked as a tube. * * The four corners are drawn apart (the bezel is heaviest at the top: a broad piece top left, a * tall one running down the right side, a small one bottom right and low arches bottom left), each * in a box measured in --u, so the CSS places and sizes them. The bands between them repeat a * tile of the same carving (bandTile), set as a background image sized in --u. */type CornerArt = {  /** The viewBox's width and height, in --u. */  w: number;  h: number;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The controller glyphs the tablet prints in its bars: shoulder buttons as a rounded square with * the letter cut out of it, face and system buttons as a disc, sticks as a disc with a ring and a * small cap. All are drawn in currentColor with the letter in var(--glyph-ink), so the bar decides * their colour; they are decorative (the buttons they sit in carry the name). */export type TabletButton =  'A' | 'B' | 'X' | 'Y' | 'L' | 'R' | 'ZL' | 'ZR' | '+' | '-' | 'LS' | 'RS';const SQUARE = new Set<TabletButton>(['L', 'R', 'ZL', 'ZR']);export function ButtonGlyph({ button }: { button: TabletButton }) {  if (SQUARE.has(button)) {    const small = button.length === 2;    return (      <svg viewBox="0 0 37 30" aria-hidden="true" data-shape="square">        <rect x="0.5" y="0.5" width="36" height="29" rx="5.5" fill="currentColor" />        <text          x="18.5"          y={small ? 20.4 : 21.4}          textAnchor="middle"

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import type { CSSProperties } from 'react';import type { TabletButton } from './glyphs';import styles from './samples.module.css';/* * The sample screens the frame shows when it is given no children: three of a tablet's pages, in * flat original art, so the frame is seen doing its job. An abilities page (a row of slots, one * picked, its name and what it does), a map page (a faint grid, a route, the player's arrow and * two pins) and an album page (a grid of abstract snapshots, one framed). `beat` moves the * selection on the abilities and album pages, for the demo; a click picks too. */export type SampleTab = { id: string; label: string };export const SAMPLE_TABS: SampleTab[] = [  { id: 'abilities', label: 'Abilities' },  { id: 'map', label: 'Map' },  { id: 'album', label: 'Album' },];

/* Tablet frame (tablet-frame.tsx): a game tablet's device frame, centred on a plain stage.   Every size is a multiple of --u, 1 px when the frame is 960 px wide; text and the bars have a   floor so a phone stays readable.   The bezel, the screen and their glow are dark on any page, as a game draws them; only the   shadow on the page and the focus ring follow the colour scheme, through light-dark() tokens.   The ornament is inline SVG (the corners) and SVG tiles (the bands, the stone, the screen's   texture) sized in --u, so nothing is a bitmap and nothing blurs.   Motion: the power-on is keyframes on elements keyed by each boot (the sweep, the blackout, the   bars' labels, the content, the hints); a screen change replays the labels' and content's   keyframes from the side of travel; power off is transitions. */@property --tf-sweep {  syntax: '<angle>';  inherits: false;  initial-value: 180deg;}.root {  /* The screen. */  --navy: #17213d;  --navy-deep: #0d1429;  --slot: #0b1424;

/* The sample screens (samples.tsx), drawn inside the frame's screen. Sizes are multiples of the   frame's --u, with a floor on text so it stays readable on a phone; colours come from the   frame's tokens (--cyan, --cyan-soft, --text-soft, --slot). *//* Abilities: a centred column. */.abilities {  display: grid;  justify-items: center;  align-content: center;  gap: calc(10 * var(--u));  height: 100%;  text-align: center;}.abilityName {  margin: 0;  font-size: max(16px, calc(25 * var(--u)));  font-style: italic;  font-weight: 600;  color: var(--cyan);  text-shadow: 0 0 calc(8 * var(--u)) var(--cyan-haze);  animation: rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;}.ticks {  width: calc(90 * var(--u));

// 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` and `reduced` are returned too, for * the frame's power-on, which waits until it is first seen. */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);