<script lang="ts">
	export let frame: number;
	export let fps: number;

	let el: SVGSVGElement;
	$: center = el?.clientWidth / 2;
	$: radius = center;
	let d = '';

	$: {
		const angle = ((frame / fps) * 360) % 360;
		const radians = (angle * Math.PI) / 180;
		const x = center + radius * Math.cos(radians);
		const y = center + radius * Math.sin(radians);
		d = `M${center},${center} L${center + radius},${center} A${radius},${radius} 0 ${angle > 180 ? 1 : 0} 1 ${x},${y} Z`;
	}
</script>

<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}>
	<circle cx={center} cy={center} r={radius}></circle>
	<path {d}></path>
</svg>

<style>
	.indicator {
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
	}

	.indicator:not(.sync) circle {
		display: none;
	}

	circle {
		fill: var(--color-active);
	}

	path {
		fill: var(--color-inactive);
	}
</style>
