cube-tui 0.1.9

Terminal UI timer and session manager for speedcubing, with optional web dashboard and BLE (GAN) timer support.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

import { useEffect, useMemo, useState } from "react";
import { formatMillis } from "../utils/format";

interface TimerDisplayProps {
	ms: number | null;
	label?: string;
	animate?: boolean;
	size?: "hero" | "large" | "small";
	fallback?: string;
}

function useSettledValue(
	target: number | null,
	enabled: boolean,
): number | null {
	const prefersReducedMotion = useMemo(() => {
		if (typeof window === "undefined") return true;
		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
	}, []);

	const shouldAnimate =
		enabled && !prefersReducedMotion && target !== null && target > 0;
	const [display, setDisplay] = useState(shouldAnimate ? 0 : target);

	useEffect(() => {
		if (!shouldAnimate) {
			setDisplay(target);
			return;
		}

		const duration = 600;
		const start = performance.now();
		const from = 0;
		const to = target;

		let raf = 0;
		const step = (now: number) => {
			const t = Math.min((now - start) / duration, 1);
			const eased = 1 - Math.pow(1 - t, 3);
			setDisplay(Math.round(from + (to - from) * eased));
			if (t < 1) {
				raf = requestAnimationFrame(step);
			}
		};

		raf = requestAnimationFrame(step);
		return () => cancelAnimationFrame(raf);
	}, [target, shouldAnimate]);

	return display;
}

export function TimerDisplay({
	ms,
	label,
	animate = false,
	size = "large",
	fallback = "—",
}: TimerDisplayProps) {
	const settled = useSettledValue(ms, animate);

	const textSize =
		size === "hero"
			? "text-5xl sm:text-6xl md:text-7xl"
			: size === "large"
				? "text-4xl sm:text-5xl"
				: "text-2xl sm:text-3xl";

	return (
		<div className={`flex flex-col ${size === "hero" ? "gap-2" : "gap-1"}`}>
			<span
				className={`font-mono font-medium tabular-nums tracking-tight text-ink ${textSize}`}
				aria-label={ms === null ? fallback : formatMillis(ms)}
			>
				{settled === null ? fallback : formatMillis(settled)}
			</span>
			{label && (
				<span className="text-[10px] uppercase tracking-[0.14em] text-muted font-semibold">
					{label}
				</span>
			)}
		</div>
	);
}