better commentary

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

@@ -1,16 +1,21 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
+	// Data structure to keep track of clock
 	interface Clock {
+		// Clock circle radius
 		body: number;
+		// Clock hand radii
 		hands: {
 			minute: number;
 			hour: number;
 		};
+		// Clock time percentages
 		time: {
 			minute: number;
 			hour: number;
 		};
+		// Clock hand positions
 		positions?: {
 			minute: {
 				x: number;
@@ -21,9 +26,11 @@
 				y: number;
 			};
 		};
+		// Clock update speed in seconds
 		speed: number;
 	}
 
+	//.System variables
 	const clock: Clock = {
 		body: 50,
 		hands: {
@@ -39,8 +46,8 @@
 	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') {
+	// Calculate (x = r * cos(a), y = r * sin(a))
 		const radius = clock.hands[time];
 		const angle = TWO_PI * clock.time[time];
 		const relative = Math[operation](angle - HALF_PI);
@@ -52,10 +59,12 @@
 		const current = new Date();
 		const time = current.toTimeString();
 		const [hour, minute, _] = time.split(' ')[0].split(':');
+		// Update time variables
 		clock.time = {
 			hour: Number(hour) / 12,
 			minute: Number(minute) / 60
 		};
+		// Update hand positions
 		clock.positions = {
 			minute: {
 				x: calcPos('minute', 'cos'),
@@ -74,8 +83,10 @@
 	});
 </script>
 
+<!-- Virtual clock display using SVG -->
 <div class="bg-black">
 	<svg class="text-white" viewBox="0 0 100 100">
+		<!-- Clock body -->
 		<circle class="stroke-current" cx="50" cy="50" r={clock.body} fill="none" stroke-width="2" />
 		<line
 			class="stroke-current"
@@ -85,6 +96,7 @@
 			y2={clock.positions?.minute.y ?? 0}
 			stroke-width="1"
 		/>
+		<!-- Clock hours hand -->
 		<line
 			class="stroke-current"
 			x1="50"