From 149c03e82fb03e163c150a207488bb16d0bea3cf Mon Sep 17 00:00:00 2001
From: waltem01 <simon.waltemathe@ptb.de>
Date: Thu, 22 Feb 2024 13:43:56 +0100
Subject: [PATCH] initialize clock page

---
 Webserver/src/routes/clock/+page.svelte | 58 +++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 Webserver/src/routes/clock/+page.svelte

diff --git a/Webserver/src/routes/clock/+page.svelte b/Webserver/src/routes/clock/+page.svelte
new file mode 100644
index 0000000..396409b
--- /dev/null
+++ b/Webserver/src/routes/clock/+page.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	interface Clock {
+		body: number;
+		hands: {
+			minute: number;
+			hour: number;
+		};
+		time: {
+			minute: number;
+			hour: number;
+		};
+	}
+
+	const clock = {
+		body: 50,
+		hands: {
+			minute: 45,
+			hour: 25
+		},
+		time: {
+			minute: 0,
+			hour: 0
+		}
+	} as Clock;
+	const TWO_PI = 2 * Math.PI;
+	const HALF_PI = Math.PI / 2;
+
+	// (x = r * cos(a), y = r * sin(a))
+	function calcPos(time: 'minute' | 'hour', operation: 'sin' | 'cos') {
+		const radius = clock.hands[time];
+		const angle = TWO_PI * clock.time[time];
+		const relative = Math[operation](angle - HALF_PI);
+
+		return 50 + radius * relative;
+	}
+</script>
+
+<div class="bg-black">
+	<svg class="text-white" viewBox="0 0 100 100">
+		<circle class="stroke-current" cx="50" cy="50" r={clock.body} fill="none" stroke-width="2" />
+		<line
+			class="stroke-current"
+			x1="50"
+			y1="50"
+			x2={calcPos('minute', 'cos')}
+			y2={calcPos('minute', 'sin')}
+			stroke-width="1"
+		/>
+		<line
+			class="stroke-current"
+			x1="50"
+			y1="50"
+			x2={calcPos('hour', 'cos')}
+			y2={calcPos('hour', 'sin')}
+			stroke-width="2"
+		/>
+	</svg>
+</div>