<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 = 4;
  export let show = false;

  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)
  );

  $: points = nums(count).map(i => ([
    circlePoint(center, radius, 360/count * i),
    circlePoint(center, radius, 360/count * i + angle)
  ]));
</script>
  
<Animation run={animate} />
<SvgContainer>
  <circle cx={center.x} cy={center.y} r={radius}  stroke="#fff" fill="none" />
  {#each points as [s, e], i}
    {#if show}
      <circle cx={s.x} cy={s.y} r={5}  fill={colors[i]} stroke="none" />
    {/if}
    <path d={linePath(s, e)} stroke-width={1.25} stroke="{colors[i]}" fill="none" />
  {/each}
</SvgContainer>