Damage Numbers

import { useRef } from "react";
import { DamageNumbers, type DamageNumbersHandle } from "@/components/ui/damage-numbers";

export function Arena() {
  const numbers = useRef<DamageNumbersHandle>(null);

  function hit(e: React.MouseEvent<HTMLElement>) {
    const damage = 120 + Math.round(Math.random() * 80);
    const crit = Math.random() < 0.2;
    numbers.current?.spawnAt(e.currentTarget, { value: crit ? damage * 2 : damage, kind: crit ? "crit" : "hit" });
  }

  return (
    <div className="relative h-80">
      <button onClick={hit}>Attack</button>
      <DamageNumbers ref={numbers} />
    </div>
  );
}