initialize clock page

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>