<script lang="ts">
  import type { FxOf } from "../fx";
  import { center } from "./geom";
  let { fx }: { fx: FxOf<"tacks-ow"> } = $props();
  const c = $derived(center(fx.at));
  // Each tack: head disc + spike, at its own angle and beat.
  const TACKS = [
    { x: -10, y: -4, rot: -18, cls: "" },
    { x: 5, y: -9, rot: 12, cls: "late" },
    { x: -1, y: 5, rot: -5, cls: "later" },
  ];
</script>

{#each TACKS as t (t.cls)}
  <g transform={`translate(${c.x + t.x} ${c.y + t.y}) rotate(${t.rot})`}>
    <g class={`tack ${t.cls}`}>
      <circle cx="0" cy="2.5" r="2.6" class="head" />
      <path d="M -1.4 1 L 0 -5 L 1.4 1 z" class="spike" />
    </g>
  </g>
{/each}

<style>
  .tack .head {
    fill: #8a2f24;
    stroke: #5c1c14;
    stroke-width: 0.8;
  }
  .tack .spike { fill: #b9b3a4; stroke: #6e6450; stroke-width: 0.5; }
  .tack {
    opacity: 0;
    animation: tack-hop 0.55s ease-out forwards;
  }
  .tack.late { animation-delay: 0.1s; }
  .tack.later { animation-delay: 0.2s; }
  @keyframes tack-hop {
    0% { opacity: 0; transform: translateY(3px); }
    25% { opacity: 1; transform: translateY(-6px); }
    55% { transform: translateY(-1px); }
    75% { transform: translateY(-4px); }
    100% { opacity: 0; transform: translateY(-1px); }
  }
</style>
