use instruction set to call respective endpoint

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

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { initializeMatrix, type Matrix } from '$lib/client/matrix';
-	import { redirectAPI } from '$lib/client/httpRequests';
+	import {
+		redirectAPI,
+		type LineInstruction,
+		type CircleInstruction,
+		type UpdateInstruction
+	} from '$lib/client/httpRequests';
 	import { onMount } from 'svelte';
 
 	// Data structure to keep track of clock
@@ -115,15 +120,14 @@
 
 	// Function to generate line instructions with start and end points
 	function lineInstruction(
-		endpoint: string,
 		x1: number,
 		y1: number,
 		position: { x: number; y: number }
-	) {
+	): LineInstruction {
 		// Calculate the matrix coordinates of the ending position
 		const coords = coordsToMatrix(position.x, position.y);
 		return {
-			endpoint,
+			endpoint: 'line',
 			x1,
 			y1,
 			x2: coords.x,
@@ -138,18 +142,18 @@
 
 		// Array of instructions for drawing lines and shapes
 		const instructions = [
-			lineInstruction('line', middle.x, middle.y, clock.positions?.second!),
-			lineInstruction('line', middle.x, middle.y, clock.positions?.minute!),
-			lineInstruction('line', middle.x, middle.y, clock.positions?.hour!),
+			lineInstruction(middle.x, middle.y, clock.positions?.second!),
+			lineInstruction(middle.x, middle.y, clock.positions?.minute!),
+			lineInstruction(middle.x, middle.y, clock.positions?.hour!),
 			{
 				endpoint: 'circle',
 				x: middle.x,
 				y: middle.y,
-				r: ((clock.body / 100) * matrix.height).toFixed(0) // Calculate circle radius based on clock body size
-			},
+				r: Math.floor((clock.body / 100) * matrix.height)
+			} as CircleInstruction,
 			{
-				endpoint: 'update' // Update instruction for the clock display
-			}
+				endpoint: 'update'
+			} as UpdateInstruction
 		];
 
 		// Create a new FormData object to send instructions to the server