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

  let { fx }: { fx: FxOf<"chaos-swirl"> } = $props();
  const c = $derived(center(fx.at));
  const CARDS = [0, 72, 144, 216, 288];
</script>

<g class="chaos" style={`transform-origin: ${c.x}px ${c.y}px`}>
  <circle cx={c.x} cy={c.y} r="30" class="ring inner" />
  <circle cx={c.x} cy={c.y} r="55" class="ring mid" />
  <circle cx={c.x} cy={c.y} r="80" class="ring outer" />
  {#each CARDS as deg (deg)}
    <rect
      x={c.x + 46 * Math.cos((deg * Math.PI) / 180) - 5}
      y={c.y + 46 * Math.sin((deg * Math.PI) / 180) - 7}
      width="10" height="14" rx="1.5"
      class="slip"
      transform={`rotate(${deg + 25} ${c.x + 46 * Math.cos((deg * Math.PI) / 180)} ${c.y + 46 * Math.sin((deg * Math.PI) / 180)})`}
    />
  {/each}
</g>

<style>
  .ring {
    fill: none;
    stroke-width: 4;
    stroke-dasharray: 30 22;
  }
  .ring.inner { stroke: #b48ae0; }
  .ring.mid { stroke: #8a5fc0; stroke-dasharray: 44 30; }
  .ring.outer { stroke: #e2c8ff; stroke-dasharray: 60 40; }
  .slip {
    fill: #f6f0df;
    stroke: #43331f;
    stroke-width: 1;
  }
  .chaos { animation: chaos-spin 1.4s ease-in-out forwards; }
  @keyframes chaos-spin {
    0% { opacity: 0; transform: rotate(0deg) scale(0.5); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: rotate(220deg) scale(1.4); }
  }
</style>
