try implementing clock matrix display

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

@@ -44,6 +44,17 @@
 		speed: number;
 	}
 
+	// Data structure to keep track of params when displaying clock parts on matrix
+	interface DisplayParams {
+		x: string;
+		y: string;
+		r?: string;
+		position?: {
+			x: string;
+			y: string;
+		};
+	}
+
 	//.System variables
 	let clockEnabled: boolean = false;
 	let matrix: Matrix;
@@ -101,10 +112,72 @@
 		if (clockEnabled) await displayMatrixClock();
 	}
 
-	// Handle displaying clock on matrix
+	// Converts the x and y number values in the given positions object to strings
+	function convertNumbers(positions: { x: number; y: number }): { x: string; y: string } {
+		return {
+			x: positions.x.toString(),
+			y: positions.y.toString()
+		};
+	}
+
+	// Displays a clock part on the matrix display
+	function displayClockPart(part: 'body' | 'seconds' | 'minutes' | 'hours', params: DisplayParams) {
+		const fdata = new FormData();
+		if (part === 'body') {
+			// If part is 'body', append the 'r' parameter to the form data
+			fdata.append('endpoint', 'circle');
+			fdata.append('x', params.x);
+			fdata.append('y', params.y);
+			fdata.append('r', params.r!);
+		} else {
+			// If part is not 'body', convert the position coordinates to matrix coordinates and append to form data
+			const coords = coordsToMatrix(params.position!.x, params.position!.y);
+			fdata.append('endpoint', 'line');
+			fdata.append('x1', params.x);
+			fdata.append('y1', params.y);
+			fdata.append('x2', coords.x);
+			fdata.append('y2', coords.y);
+		}
+		return redirectAPI({ fdata });
+	}
+
+	// Converts the x and y values from percentage to matrix coordinates
+	function coordsToMatrix(x: string, y: string): { x: string; y: string } {
+		// Calculate the matrix coordinates based on the percentage values of x and y
+		return {
+			x: Math.round((Number(x) / 100) * matrix.width).toString(),
+			y: Math.round((Number(y) / 100) * matrix.height).toString()
+		};
+	}
+
+	// Displays the clock on the matrix display, converting number values to strings where necessary
 	async function displayMatrixClock() {
-		// Display clock body as circle
-		await redirectAPI();
+		// Display the body of the clock
+		await displayClockPart('body', {
+			x: '50',
+			y: '50',
+			r: clock.body.toString()
+		});
+		// Display the seconds of the clock, converting position coordinates to strings
+		await displayClockPart('seconds', {
+			x: '50',
+			y: '50',
+			position: convertNumbers(clock.positions?.second!)
+		});
+		// Display the minutes of the clock, converting position coordinates to strings
+		await displayClockPart('minutes', {
+			x: '50',
+			y: '50',
+			position: convertNumbers(clock.positions?.minute!)
+		});
+		// Display the hours of the clock, converting position coordinates to strings
+		await displayClockPart('hours', {
+			x: '50',
+			y: '50',
+			position: convertNumbers(clock.positions?.hour!)
+		});
+		// Update the clock by fetching the update API endpoint
+		await fetch('/api/redirect?endpoint=update');
 	}
 
 	onMount(() => {