implemented display on matrix on submit

Webserver/src/routes/+page.svelte

@@ -10,13 +10,14 @@
 	}
 
 	async function get(event: SubmitEvent) {
+		clearMatrix();
 		const form = event.target as HTMLFormElement;
 
 		const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
 			mode: 'cors'
 		});
-		const data = (await response.json()) as MatrixResponse;
+		const mdata = (await response.json()) as MatrixResponse;
-		alert(data.success ? 'Success!' : 'Error!');
+		if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
 	}
 
 	async function post(event: SubmitEvent) {
@@ -27,6 +28,18 @@
 			case 'color':
 				colorSelect(fdata);
 				break;
+			case 'pixel':
+				setPixel(fdata);
+				break;
+			case 'rectangle':
+				drawRectangle(fdata);
+				break;
+			case 'circle':
+				drawCircle(fdata);
+				break;
+			// case 'text':
+			// 	displayText(fdata);
+			// 	break;
 		}
 
 		const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
@@ -35,7 +48,48 @@
 			body: fdata
 		});
 		const mdata = (await response.json()) as MatrixResponse;
-		alert(mdata.success ? 'Success!' : 'Error!');
+		if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
+	}
+
+	// function displayText(formData: FormData) {}
+
+	function drawCircle(formData: FormData) {
+		const x = parseInt((formData.get('x') as string) ?? '191');
+		const y = parseInt((formData.get('y') as string) ?? '191');
+		const r = parseInt((formData.get('r') as string) ?? '95');
+
+		const hex = colorToHex();
+		for (let a = 0; a < 360; a++) {
+			const nx = Math.round(Math.cos(toRadians(a)) * r + x);
+			const ny = Math.round(Math.sin(toRadians(a)) * r + y);
+
+			if (nx >= 0 && nx < 192 && ny >= 0 && ny < 192) matrix[ny][nx].color = hex;
+		}
+	}
+
+	function toRadians(degrees: number): number {
+		return (degrees / 180) * Math.PI;
+	}
+
+	function drawRectangle(formData: FormData) {
+		const x = parseInt((formData.get('x') as string) ?? '191');
+		const y = parseInt((formData.get('y') as string) ?? '191');
+		const w = parseInt((formData.get('w') as string) ?? '191');
+		const h = parseInt((formData.get('h') as string) ?? '191');
+
+		const hex = colorToHex();
+		for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) matrix[j][i].color = hex;
+	}
+
+	function setPixel(formData: FormData) {
+		const x = parseInt((formData.get('x') as string) ?? '191');
+		const y = parseInt((formData.get('y') as string) ?? '191');
+
+		matrix[y][x].color = colorToHex();
+	}
+
+	function clearMatrix() {
+		matrix.forEach((y) => y.forEach((x) => (x.color = '000000')));
 	}
 
 	function colorSelect(formData: FormData) {
@@ -47,14 +101,15 @@
 	function setColor(event: MouseEvent) {
 		if (!mousePressed) return;
 
-		const toHex = pixelColor.map((e) => e.toString(16).padStart(2, '0'));
-		const colStr = toHex.join('');
-
 		const parent = event.target as HTMLTableCellElement;
 		const x = parseInt(parent.dataset.x ?? '0');
 		const y = parseInt(parent.parentElement?.dataset.y ?? '0');
 
-		matrix[y][x].color = colStr;
+		matrix[y][x].color = colorToHex();
+	}
+
+	function colorToHex(): string {
+		return pixelColor.map((e) => e.toString(16).padStart(2, '0')).join('');
 	}
 
 	const matrix = Array.from({ length: 192 }, (_, yIndex) =>
@@ -106,6 +161,7 @@
 			max="255"
 			step="1"
 			value="255"
+			required
 		/>
 		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="green">Green:</label>
 		<input
@@ -117,6 +173,7 @@
 			max="255"
 			step="1"
 			value="255"
+			required
 		/>
 		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="blue">Blue:</label>
 		<input
@@ -128,6 +185,7 @@
 			max="255"
 			step="1"
 			value="255"
+			required
 		/>
 		<input
 			class="border-2 border-black border-b-0 hover:bg-gray-200"
@@ -155,6 +213,7 @@
 			max="191"
 			step="1"
 			value="0"
+			required
 		/>
 		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="py">Y:</label>
 		<input
@@ -166,6 +225,7 @@
 			max="191"
 			step="1"
 			value="0"
+			required
 		/>
 		<input
 			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
@@ -193,7 +253,8 @@
 			min="0"
 			max="191"
 			step="1"
-			value="0"
+			value="176"
+			required
 		/>
 		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="ry">Y:</label>
 		<input
@@ -205,6 +266,7 @@
 			max="191"
 			step="1"
 			value="0"
+			required
 		/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="w">W:</label>
 		<input
 			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
@@ -214,7 +276,8 @@
 			min="0"
 			max="191"
 			step="1"
-			value="0"
+			value="15"
+			required
 		/>
 		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="h">H:</label>
 		<input
@@ -225,7 +288,8 @@
 			min="0"
 			max="191"
 			step="1"
-			value="0"
+			value="15"
+			required
 		/>
 		<input
 			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
@@ -252,7 +316,8 @@
 			min="0"
 			max="191"
 			step="1"
-			value="0"
+			value="20"
+			required
 		/>
 		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cy">Y:</label>
 		<input
@@ -263,7 +328,8 @@
 			min="0"
 			max="191"
 			step="1"
-			value="0"
+			value="171"
+			required
 		/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="radius">R:</label>
 		<input
 			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
@@ -273,7 +339,8 @@
 			min="0"
 			max="95"
 			step="1"
-			value="0"
+			value="20"
+			required
 		/>
 		<input
 			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
@@ -298,6 +365,7 @@
 			max="191"
 			step="1"
 			value="0"
+			required
 		/>
 		<label class="border-2 border-black border-r-0 pl-1" for="ty">Y:</label>
 		<input
@@ -309,12 +377,15 @@
 			max="191"
 			step="1"
 			value="0"
+			required
 		/><label class="border-2 border-black border-r-0 pl-1" for="tin">Input:</label>
 		<input
 			class="border-2 border-black border-r-0 cursor-text pl-1 pr-1 bg-gray-100"
 			id="tin"
 			name="text"
 			type="text"
+			value="Hello, World!"
+			required
 		/>
 		<input
 			class="border-2 border-black cursor-pointer hover:bg-gray-200"