<script>
  import SvgContainer from '$lib/shared/svg-container.svelte';
  import Animation from '$lib/shared/animation.svelte';
  import { circlePoint, point } from '$lib/utils/path-utils';
  import { linePath } from '$lib/utils/svg-utils';
  import { hue2color } from '$lib/utils/color-utils';
  import { nums } from '$lib/utils/math-utils';
  
  export let count = 3;
  export let corners = 3;

  let angle = 0;

  const animate = () => angle = angle + 2;

  const center = point(200, 200);
  const radius = 180;

  $: colors = nums(count).map(i =>
    hue2color(45 + 360/count * i)
  );

  $: polygons = nums(count).map(i =>
    nums(corners).map(k =>
      linePath(
        circlePoint(center, radius, 360/corners/count * i + 360/corners * k),
        circlePoint(center, radius, 360/corners/count * i + 360/corners * (k+1))
      )
    )
  );
</script>
  
<Animation run={animate} />
<SvgContainer>
  <!-- <circle cx={center.x} cy={center.y} r={radius}  stroke="#fff" fill="none" /> -->
  {#each polygons as pathes, i}
    {#each pathes as path, k}
      <path d={path} stroke-width={1.25} stroke="{colors[i]}" fill="none" />
    {/each}
  {/each}
</SvgContainer>