<script lang="ts">
  import type { FxOf } from "../fx";
  import { center } from "./geom";

  let { fx }: { fx: FxOf<"fireworks"> } = $props();
  const c = $derived(center(fx.at));
  const COLORS = ["#e74c3c", "#f1c40f", "#3b8dd6", "#7ac47e"];
  // Deliberately uneven: a real burst has no protractor.
  const RAYS = [
    { deg: 8, len: 22, r: 2.8, cls: "" },
    { deg: 52, len: 17, r: 2.2, cls: "late" },
    { deg: 88, len: 24, r: 3, cls: "" },
    { deg: 141, len: 16, r: 2, cls: "later" },
    { deg: 176, len: 21, r: 2.6, cls: "late" },
    { deg: 224, len: 18, r: 2.3, cls: "" },
    { deg: 267, len: 23, r: 2.8, cls: "later" },
    { deg: 309, len: 15, r: 2, cls: "late" },
  ];
</script>

<g class="fireworks">
  {#each RAYS as ray, i (ray.deg)}
    {@const dx = Math.cos((ray.deg * Math.PI) / 180)}
    {@const dy = Math.sin((ray.deg * Math.PI) / 180)}
    <line
      x1={c.x + 4 * dx} y1={c.y + 4 * dy}
      x2={c.x + ray.len * dx} y2={c.y + ray.len * dy}
      stroke={COLORS[i % 4]}
      class={`trail ${ray.cls}`}
      style={`transform-origin: ${c.x}px ${c.y}px`}
    />
    <circle
      cx={c.x + (ray.len + 1) * dx} cy={c.y + (ray.len + 1) * dy} r={ray.r}
      fill={COLORS[i % 4]}
      class={`spark ${ray.cls}`}
      style={`transform-origin: ${c.x}px ${c.y}px`}
    />
  {/each}
  <circle cx={c.x} cy={c.y} r="3.5" class="heart" />
</g>

<style>
  .trail {
    stroke-width: 2;
    stroke-linecap: round;
    animation: trail-out 0.9s ease-out forwards;
  }
  .spark { animation: spark-out 1.05s ease-out forwards; }
  .trail.late, .spark.late { animation-delay: 0.07s; }
  .trail.later, .spark.later { animation-delay: 0.14s; }
  .heart { fill: #fffdf0; animation: heart-pop 0.4s ease-out forwards; }
  @keyframes trail-out {
    0% { opacity: 0; transform: scale(0.15); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.5); }
  }
  @keyframes spark-out {
    0% { opacity: 0; transform: scale(0.15); }
    30% { opacity: 1; }
    80% { opacity: 0.9; transform: scale(1.55); }
    100% { opacity: 0; transform: scale(1.6) translateY(4px); }
  }
  @keyframes heart-pop {
    0% { opacity: 1; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(3); }
  }
</style>
