Celebrate

"use client";

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

export type CelebrateProps = ComponentProps<"div"> & {
  /** Fires a burst whenever it changes after mount. Never fires on first render. */
  burstKey?: number | string;
  /** Where pieces fly from: the centre, the top edge, or a point in percent of the wrapper. */
  origin?: "center" | "centre" | "top" | { x: number; y: number };
  /** Pieces per burst. */
  count?: number;
  /** Announced politely with each burst, and the only thing shown when motion is off. */
  message?: string;
};

type Piece = { tone: number; dot: boolean; style: CSSProperties };
type Burst = { id: number; x: number; y: number; pieces: Piece[] };

/* A small seeded generator, so a burst looks random but is the same every time for its key. */
function seeded(seed: number) {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function hash(text: string) {
  let h = 2166136261;
  for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619);
  return h >>> 0;
}

function makePieces(count: number, seed: number): Piece[] {
  const random = seeded(seed);
  const between = (min: number, max: number) => min + random() * (max - min);
  return Array.from({ length: count }, (_, i) => {
    /* Mostly upward, fanned out, so pieces rise, spread and fall back past the origin. */
    const angle = ((-90 + between(-68, 68)) * Math.PI) / 180;
    const distance = between(48, 112);
    const size = between(5, 9);
    return {
      tone: Math.floor(random() * 5),
      dot: i % 4 === 0,
      style: {
        "--_x": `${(Math.cos(angle) * distance).toFixed(1)}px`,
        "--_y": `${(Math.sin(angle) * distance).toFixed(1)}px`,
        "--_fall": `${between(56, 120).toFixed(1)}px`,
        "--_spin": `${(between(240, 720) * (random() < 0.5 ? -1 : 1)).toFixed(0)}deg`,
        "--_delay": between(0, 0.14).toFixed(3),
        "--_s": `${size.toFixed(1)}px`,
      } as CSSProperties,
    };
  });
}

export function Celebrate({
  burstKey,
  origin = "center",
  count = 28,
  message,
  className,
  children,
  ...rest
}: CelebrateProps) {
  const [bursts, setBursts] = useState<Burst[]>([]);
  const [status, setStatus] = useState("");
  const lastKey = useRef(burstKey);
  const serial = useRef(0);
  const ended = useRef(new Map<number, number>());
  const statusRef = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    if (Object.is(lastKey.current, burstKey)) return;
    lastKey.current = burstKey;
    serial.current += 1;
    const id = serial.current;

    /* Alternating a trailing space makes the same message announce again. */
    if (message) setStatus(id % 2 ? message : `${message} `);

    const probe = statusRef.current;
    const moving = probe ? parseFloat(getComputedStyle(probe).transitionDuration) > 0 : false;
    if (!moving || count <= 0) return;

    const point = origin === "top" ? { x: 50, y: 0 } : origin === "center" || origin === "centre" ? { x: 50, y: 50 } : origin;
    const pieces = makePieces(count, hash(String(burstKey)) ^ Math.imul(id, 2654435761));
    setBursts((list) => [...list, { id, x: point.x, y: point.y, pieces }]);
    // The burst is keyed on burstKey alone; other props are read as they are at that moment.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [burstKey]);

  function handleAnimationEnd(event: AnimationEvent<HTMLSpanElement>, burst: Burst) {
    if (!(event.target instanceof Element) || !event.target.classList.contains("eq-celebrate-piece")) return;
    const done = (ended.current.get(burst.id) ?? 0) + 1;
    if (done < burst.pieces.length) {
      ended.current.set(burst.id, done);
      return;
    }
    ended.current.delete(burst.id);
    setBursts((list) => list.filter((b) => b.id !== burst.id));
  }

  return (
    <div {...rest} className={["eq-celebrate", className].filter(Boolean).join(" ")}>
      {children}
      <span ref={statusRef} className="eq-celebrate-status" role="status">
        {status}
      </span>
      {bursts.map((burst) => (
        <span
          key={burst.id}
          className="eq-celebrate-burst"
          aria-hidden="true"
          style={{ left: `${burst.x}%`, top: `${burst.y}%` }}
          onAnimationEnd={(event) => handleAnimationEnd(event, burst)}
        >
          {burst.pieces.map((piece, i) => (
            <span
              key={i}
              className="eq-celebrate-piece"
              data-tone={piece.tone}
              data-shape={piece.dot ? "dot" : "bar"}
              style={piece.style}
            />
          ))}
        </span>
      ))}
    </div>
  );
}