From 597aff5784094f4a095a39c192ab5237ff76e85b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 27 Sep 2025 21:27:00 +0200
Subject: [PATCH] fix: migrate & fix av-sync

---
 av-sync/src/App.svelte                        | 30 +++++++++++--------
 av-sync/src/components/FlashIndicator.svelte  | 20 ++++++++-----
 av-sync/src/components/Scale.svelte           |  8 +++--
 av-sync/src/components/SectorIndicator.svelte | 22 ++++++++------
 av-sync/src/main.ts                           |  3 +-
 5 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/av-sync/src/App.svelte b/av-sync/src/App.svelte
index 86296cb..3cf8150 100644
--- a/av-sync/src/App.svelte
+++ b/av-sync/src/App.svelte
@@ -8,21 +8,25 @@
 	import FlashIndicator from './components/FlashIndicator.svelte';
 	import Scale from './components/Scale.svelte';
 
-	export let frame = 0;
-	export let fps = 60;
-	export let debug = false;
+	interface Props {
+		frame?: number;
+		fps?: number;
+		debug?: boolean;
+	}
+
+	let { frame = $bindable(0), fps = $bindable(60), debug = $bindable(false) }: Props = $props();
+
+	window.setFps = async (newFps: number) => {
+		fps = newFps;
+		await tick();
+	};
+
+	window.setFrame = async (frameNumber: number) => {
+		frame = frameNumber;
+		await tick();
+	};
 
 	onMount(() => {
-		window.setFps = async (newFps: number) => {
-			fps = newFps;
-			await tick();
-		};
-
-		window.setFrame = async (frameNumber: number) => {
-			frame = frameNumber;
-			await tick();
-		};
-
 		if (window.location.search.includes('debug')) {
 			debug = true;
 		}
diff --git a/av-sync/src/components/FlashIndicator.svelte b/av-sync/src/components/FlashIndicator.svelte
index a565d12..d4fd38b 100644
--- a/av-sync/src/components/FlashIndicator.svelte
+++ b/av-sync/src/components/FlashIndicator.svelte
@@ -1,18 +1,24 @@
 <script lang="ts">
-	export let frame: number;
-	export let fps: number;
+	interface Props {
+		frame: number;
+		fps: number;
+	}
 
-	let el: SVGSVGElement;
-	$: center = el?.clientWidth / 2;
-	$: radius = center;
+	let { frame, fps }: Props = $props();
 
-	let opacity = 1;
-	$: opacity = ease(1 - ((frame % fps) / fps) * 2);
+	let el: SVGSVGElement | undefined = $state();
+
+	let opacity = $state(1);
 
 	function ease(x: number) {
 		x = Math.max(0, Math.min(1, x));
 		return 1 - Math.cos((x * Math.PI) / 2);
 	}
+	let center = $derived((el?.clientWidth ?? 0) / 2);
+	let radius = $derived(center);
+	$effect(() => {
+		opacity = ease(1 - ((frame % fps) / fps) * 2);
+	});
 </script>
 
 <svg class="indicator" bind:this={el} style="--opacity: {opacity}">
diff --git a/av-sync/src/components/Scale.svelte b/av-sync/src/components/Scale.svelte
index 0d86c5c..c47d0c4 100644
--- a/av-sync/src/components/Scale.svelte
+++ b/av-sync/src/components/Scale.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let frame: number;
-	export let fps: number;
+	interface Props {
+		frame: number;
+		fps: number;
+	}
+
+	let { frame, fps }: Props = $props();
 </script>
 
 <div class="scale" style="--frame: {frame}; --fps: {fps}">
diff --git a/av-sync/src/components/SectorIndicator.svelte b/av-sync/src/components/SectorIndicator.svelte
index 684cf61..e705ddf 100644
--- a/av-sync/src/components/SectorIndicator.svelte
+++ b/av-sync/src/components/SectorIndicator.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-	export let frame: number;
-	export let fps: number;
+	interface Props {
+		frame: number;
+		fps: number;
+	}
 
-	let el: SVGSVGElement;
-	$: center = el?.clientWidth / 2;
-	$: radius = center;
-	let d = '';
-	let circleOpacity = 1;
+	let { frame, fps }: Props = $props();
 
-	$: {
+	let el: SVGSVGElement | undefined = $state();
+	let center = $derived((el?.clientWidth ?? 0) / 2);
+	let radius = $derived(center);
+	let d = $state('');
+	let circleOpacity = $state(1);
+
+	$effect(() => {
 		const angle = ((frame / fps) * 360) % 360;
 		const radians = (angle * Math.PI) / 180;
 		const x = center + radius * Math.cos(radians);
@@ -17,7 +21,7 @@
 
 		const flashFrames = fps / 10;
 		circleOpacity = (flashFrames - (frame % fps)) / flashFrames;
-	}
+	});
 </script>
 
 <svg class="indicator" style="--circle-opacity: {circleOpacity}" bind:this={el}>
diff --git a/av-sync/src/main.ts b/av-sync/src/main.ts
index 9d73b4d..c1fc811 100644
--- a/av-sync/src/main.ts
+++ b/av-sync/src/main.ts
@@ -1,7 +1,8 @@
 import './app.css';
 import App from './App.svelte';
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
 	target: document.getElementById('app')!
 });