Save indicator

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useEffectEvent, useRef, useState, type CSSProperties } from 'react';import { useAutoplay } from './use-autoplay';import styles from './save-indicator.module.css';/* * Save indicator: the small sign in a corner of a game's screen that says progress is being * written, so the player does not quit or switch off. A ring of six dots and the word "Saving". * * - The glyph is six dots on a hexagon, alternately large and small. While saving they breathe: *   every 300 ms (ease-in-out) the large ones shrink as the small ones grow, so the ring seems to *   turn by a sixth each beat. `motion="spin"` sends the large size round the ring instead, a *   chase. Each dot is scaled by a transform, so no SVG is ever restyled. * - It stays on screen for at least `minSavingMs`, so an instant save is still seen. Then the dots *   gather into the middle, a check mark draws itself with a little pop, and the word crosses over *   to "Saved". After `holdMs` the whole sign fades out with a slight drift, and `onDone` is called. * - Back to 'idle' while saving, it simply fades out. * - Controlled by `state`, or on its own: the stage has a Save button, and a demo plays an autosave *   now and then while on screen and untouched. The breathing pauses offscreen or in a hidden tab; *   under reduced motion the ring stands still and the changes are cross-fades. * - The stage is the lab's plain one, light or dark, with the sign in its middle and a small Save

/* Save indicator (save-indicator.tsx): the lab's plain stage, white by day and near-black at   night, with the sign in its middle and a small Save game chip under it. The sign's sizes are in   em of its word (22 px in a game, drawn larger on the stage from its width by a container   query), and a bare sign takes its size from --save-size.   Colours are the tokens below, light-dark(light, dark) where the two differ. The sign keeps its   own colours on both schemes, as a game's HUD does: pale dots and words on a dark plate of its   own, so it reads on a light stage, a dark one, or a game. Everything is drawn sharp: SVG and   type, no blur filter and no raster; the plate's lift is a box-shadow behind it.   Motion: the dots breathe by keyframes on their transform; the entrance pops them by `scale`,   and the gathering moves them by `translate` and `scale`, which add to the transform, so the   three never fight. The check draws by its dash offset; the words and the sign fade by   opacity and translate. */.root {  /* The sign: the glyph's dots and check, its word, its plate, the plate's edge and lift. */  --glyph: #ece8de;  --word: #f1ebdf;  --plate: rgb(22 23 21 / 0.9);  --plate-edge: rgb(255 255 255 / 0.1);  --lift: rgb(0 0 0 / 0.16);  /* The stage, its edge, and the Save game chip. */  --surface: #fff;

// 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` alone says whether it is on screen * in a visible tab, for clocks that should stop when nobody can see them. */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);