implement clock animation

Webserver/src/routes/+page.svelte

@@ -5,3 +5,6 @@
 <h2 class="font-bold text-xl">
 	<a class="underline text-blue-600" href="/image">Image upload</a>
 </h2>
+<h2 class="font-bold text-xl">
+	<a class="underline text-blue-600" href="/clock">Clock</a>
+</h2>

Webserver/src/routes/clock/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+
 	interface Clock {
 		body: number;
 		hands: {
@@ -9,9 +11,20 @@
 			minute: number;
 			hour: number;
 		};
+		positions?: {
+			minute: {
+				x: number;
+				y: number;
+			};
+			hour: {
+				x: number;
+				y: number;
+			};
+		};
+		speed: number;
 	}
 
-	const clock = {
+	const clock: Clock = {
 		body: 50,
 		hands: {
 			minute: 45,
@@ -20,8 +33,9 @@
 		time: {
 			minute: 0,
 			hour: 0
-		}
+		},
-	} as Clock;
+		speed: 4
+	};
 	const TWO_PI = 2 * Math.PI;
 	const HALF_PI = Math.PI / 2;
 
@@ -33,6 +47,31 @@
 
 		return 50 + radius * relative;
 	}
+
+	function update() {
+		const current = new Date();
+		const time = current.toTimeString();
+		const [hour, minute, _] = time.split(' ')[0].split(':');
+		clock.time = {
+			hour: Number(hour) / 12,
+			minute: Number(minute) / 60
+		};
+		clock.positions = {
+			minute: {
+				x: calcPos('minute', 'cos'),
+				y: calcPos('minute', 'sin')
+			},
+			hour: {
+				x: calcPos('hour', 'cos'),
+				y: calcPos('hour', 'sin')
+			}
+		};
+	}
+
+	onMount(() => {
+		update();
+		setInterval(update, clock.speed * 1000);
+	});
 </script>
 
 <div class="bg-black">
@@ -42,16 +81,16 @@
 			class="stroke-current"
 			x1="50"
 			y1="50"
-			x2={calcPos('minute', 'cos')}
+			x2={clock.positions?.minute.x ?? 50}
-			y2={calcPos('minute', 'sin')}
+			y2={clock.positions?.minute.y ?? 0}
 			stroke-width="1"
 		/>
 		<line
 			class="stroke-current"
 			x1="50"
 			y1="50"
-			x2={calcPos('hour', 'cos')}
+			x2={clock.positions?.hour.x ?? 50}
-			y2={calcPos('hour', 'sin')}
+			y2={clock.positions?.hour.y ?? 0}
 			stroke-width="2"
 		/>
 	</svg>