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

  let { fx }: { fx: FxOf<"burst"> } = $props();
  const uid = $props.id();
  const c = $derived(center(fx.at));
  const EMBERS = [15, 80, 145, 210, 275, 340];
</script>

<defs>
  <radialGradient id={`burst-fire-${uid}`}>
    <stop offset="0" stop-color="#fffde0" />
    <stop offset="0.3" stop-color="#ffd34e" />
    <stop offset="0.65" stop-color="#ff8c1a" stop-opacity="0.85" />
    <stop offset="1" stop-color="#ef3b08" stop-opacity="0" />
  </radialGradient>
</defs>

<circle cx={c.x} cy={c.y} r="16" fill={`url(#burst-fire-${uid})`} class="bloom" />
<circle cx={c.x} cy={c.y} r="6" class="shockwave" />
{#each EMBERS as deg (deg)}
  <circle
    cx={c.x + 13 * Math.cos((deg * Math.PI) / 180)}
    cy={c.y + 13 * Math.sin((deg * Math.PI) / 180)}
    r={deg % 2 === 0 ? 2 : 1.5}
    class="ember"
    style={`transform-origin: ${c.x}px ${c.y}px`}
  />
{/each}

<style>
  .bloom {
    transform-box: fill-box;
    transform-origin: center;
    animation: bloom 0.5s ease-out forwards;
  }
  .shockwave {
    transform-box: fill-box;
    transform-origin: center;
    fill: none;
    stroke: #ffd27a;
    stroke-width: 2.5;
    animation: shockwave 0.45s ease-out 0.08s forwards;
    opacity: 0;
  }
  .ember {
    fill: #ff9d19;
    animation: ember-fly 0.55s ease-out forwards;
  }
  @keyframes bloom {
    0% { opacity: 0; transform: scale(0.2); }
    25% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(2.4); }
  }
  @keyframes shockwave {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(6); }
  }
  @keyframes ember-fly {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.1) rotate(24deg); }
  }
</style>
