From e14ee55ff4c38c7f3b460ff305db784e637208bb Mon Sep 17 00:00:00 2001
From: waltem01 <simon.waltemathe@ptb.de>
Date: Wed, 28 Feb 2024 09:35:40 +0100
Subject: [PATCH] implement clock animation

---
 Webserver/src/routes/+page.svelte       |  3 ++
 Webserver/src/routes/clock/+page.svelte | 53 +++++++++++++++++++++----
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/Webserver/src/routes/+page.svelte b/Webserver/src/routes/+page.svelte
index e6a00b4..87cebf6 100644
--- a/Webserver/src/routes/+page.svelte
+++ b/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>
diff --git a/Webserver/src/routes/clock/+page.svelte b/Webserver/src/routes/clock/+page.svelte
index 396409b..7c86f30 100644
--- a/Webserver/src/routes/clock/+page.svelte
+++ b/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')}
-			y2={calcPos('minute', 'sin')}
+			x2={clock.positions?.minute.x ?? 50}
+			y2={clock.positions?.minute.y ?? 0}
 			stroke-width="1"
 		/>
 		<line
 			class="stroke-current"
 			x1="50"
 			y1="50"
-			x2={calcPos('hour', 'cos')}
-			y2={calcPos('hour', 'sin')}
+			x2={clock.positions?.hour.x ?? 50}
+			y2={clock.positions?.hour.y ?? 0}
 			stroke-width="2"
 		/>
 	</svg>