import { render_and_copy } from "./common.tsx"; const Digit = ({ length_per_s, digits, }: { length_per_s: number; digits: (number | string)[]; }) => ( <div style={{ display: "inline-block", fontVariant: "tabular-nums", overflow: "hidden", height: "1rem", }} > <div style={{ transform: "translateY(-100%)", animation: `spin ${ (length_per_s * digits.length) / 60 }s 0s reverse infinite alternate steps(${digits.length}, end)`, position: "relative", }} > {...digits.map(d => ( <div style={{ height: "1rem", transform: "translateY(75%)", textAlign: "right", }} > {d} </div> ))} </div> </div> ); // silly const make_digits = ({ up, cycle_up, cycle_down, }: { up: number[]; cycle_up: number; cycle_down: number; }) => [ ...new Array(cycle_up).flatMap(() => up), ...new Array(cycle_down).flatMap((_, i) => i == 0 ? up.toReversed().slice(1) : up.toReversed() ), ]; console.log( make_digits({ up: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], cycle_up: 6, cycle_down: 10, }) ); render_and_copy( <span> <Digit length_per_s={60} digits={new Array(20).fill(undefined).map((_, i) => (i < 10 ? 10 - i : -(i - 10)) .toString() .replace(/-([0-9])$/, "-0$1") .replace(/^([0-9])$/, "0$1") )} /> : <Digit length_per_s={1} digits={new Array(60 * 20) .fill(undefined) .map((_, i) => (i < 30 * 60 ? 59 - (i % 60) : i % 60) .toString() .padStart(2, "0") )} /> </span> );