Ticker

"use client";

import { useEffect, useLayoutEffect, useRef, useState, type ComponentProps, type CSSProperties } from "react";
import "./ticker.css";

export type TickerProps = Omit<ComponentProps<"span">, "children"> & {
  value: number;
  /** Passed to Intl.NumberFormat: currency, percent, compact notation, fraction digits. */
  format?: Intl.NumberFormatOptions;
  locale?: string;
  /** Read before the value by screen readers, e.g. "Live visitors". */
  label?: string;
};

type Cell = { key: string; char: string; digit: number | null };
type Leaving = { cell: Cell; before: string | null };

/* Each strip holds 0 to 9 three times; a digit rests in the middle band so it can roll either way. */
const STRIP = "012345678901234567890123456789".split("");

function toCells(value: number, locale: string, format?: Intl.NumberFormatOptions): Cell[] {
  const parts = new Intl.NumberFormat(locale, format).formatToParts(value);
  let place = parts.filter((p) => p.type === "integer").reduce((n, p) => n + [...p.value].length, 0);
  let fraction = 0;
  const seen: Record<string, number> = {};
  const cells: Cell[] = [];
  for (const part of parts) {
    const occurrence = (seen[part.type] = (seen[part.type] ?? 0) + 1);
    [...part.value].forEach((char, index) => {
      const digit = /^[0-9]$/.test(char) ? Number(char) : null;
      /* Digits are keyed by place value, so units stay units when the number grows. */
      if (part.type === "integer") cells.push({ key: `i${--place}`, char, digit });
      else if (part.type === "fraction") cells.push({ key: `f${fraction++}`, char, digit });
      else if (part.type === "group") cells.push({ key: `g${place}`, char, digit: null });
      else cells.push({ key: `${part.type}${occurrence}.${index}`, char, digit: null });
    });
  }
  return cells;
}

export function Ticker({ value, format, locale = "en-US", label, className, ...rest }: TickerProps) {
  const cells = toCells(value, locale, format);
  const text = cells.map((c) => c.char).join("");
  const [ready, setReady] = useState(false);
  const [leaving, setLeaving] = useState<Leaving[]>([]);
  const rootRef = useRef<HTMLSpanElement>(null);
  const last = useRef<{ value: number; text: string; cells: Cell[] } | null>(null);

  useEffect(() => setReady(true), []);

  useLayoutEffect(() => {
    const previous = last.current;
    last.current = { value, text, cells };
    const root = rootRef.current;
    if (!previous || previous.text === text || !root) return;

    const sample = root.querySelector<HTMLElement>(".eq-ticker-cell");
    const moving = sample ? parseFloat(getComputedStyle(sample).transitionDuration) > 0 : false;
    const up = value >= previous.value;

    for (const cell of cells) {
      if (cell.digit === null) continue;
      const strip = root.querySelector<HTMLElement>(`[data-key="${cell.key}"] > .eq-ticker-strip`);
      const old = previous.cells.find((c) => c.key === cell.key);
      if (!strip || !old || old.digit === null || old.digit === cell.digit || !moving) continue;
      const row = strip.parentElement ? parseFloat(getComputedStyle(strip.parentElement).height) : 0;
      if (!row) continue;
      /* Start from wherever the strip is now, so a change mid-roll carries on instead of snapping. */
      const shift = getComputedStyle(strip).translate.split(" ")[1];
      const now = shift ? -parseFloat(shift) / row : 10 + old.digit;
      const target = 10 + cell.digit;
      const gap = up ? (((target - now) % 10) + 10) % 10 : (((now - target) % 10) + 10) % 10;
      if (gap < 0.05 || gap > 9.95) continue;
      const start = up ? target - gap : target + gap;
      strip.style.transition = "none";
      strip.style.setProperty("--_i", String(start));
      void strip.offsetHeight;
      strip.style.transition = "";
      strip.style.setProperty("--_i", String(target));
    }

    const keys = new Set(cells.map((c) => c.key));
    const gone: Leaving[] = [];
    if (moving) {
      previous.cells.forEach((cell, index) => {
        if (keys.has(cell.key)) return;
        const next = previous.cells.slice(index + 1).find((c) => keys.has(c.key));
        gone.push({ cell, before: next?.key ?? null });
      });
    }
    setLeaving((list) => (list.length === 0 && gone.length === 0 ? list : gone));
    // Runs once per new formatted value; cells and value are derived from the same render.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [text]);

  const keys = new Set(cells.map((c) => c.key));
  const stale = leaving.filter((l) => !keys.has(l.cell.key));
  const drop = (key: string) => setLeaving((list) => list.filter((l) => l.cell.key !== key));

  const renderLeaving = (before: string | null) =>
    stale
      .filter((l) => l.before === before)
      .map(({ cell }) => (
        <span
          key={`out-${cell.key}`}
          className="eq-ticker-cell"
          data-leaving=""
          data-kind={cell.digit === null ? "literal" : "digit"}
          onTransitionEnd={(event) => {
            if (event.propertyName === "width") drop(cell.key);
          }}
        >
          {cell.char}
        </span>
      ));

  return (
    <span
      {...rest}
      ref={rootRef}
      className={["eq-ticker", className].filter(Boolean).join(" ")}
      data-ready={ready ? "" : undefined}
    >
      <span className="eq-ticker-sr" aria-live="polite" aria-atomic="true">
        {label ? `${label}: ${text}` : text}
      </span>
      <span className="eq-ticker-digits" aria-hidden="true">
        {cells.flatMap((cell) => [
          ...renderLeaving(cell.key),
          cell.digit === null ? (
            <span key={cell.key} className="eq-ticker-cell" data-key={cell.key} data-kind="literal">
              {cell.char}
            </span>
          ) : (
            <span key={cell.key} className="eq-ticker-cell" data-key={cell.key} data-kind="digit">
              <span className="eq-ticker-strip" style={{ "--_i": 10 + cell.digit } as CSSProperties}>
                {STRIP.map((d, i) => (
                  <span key={i} className="eq-ticker-face">
                    {d}
                  </span>
                ))}
              </span>
            </span>
          ),
        ])}
        {renderLeaving(null)}
      </span>
    </span>
  );
}