draw on screen

Webserver/src/routes/+page.svelte

@@ -98,7 +98,7 @@
 		pixelColor[2] = parseInt((formData.get('b') as string) ?? '255');
 	}
 
-	function setColor(event: MouseEvent) {
+	async function setMousePixel(event: MouseEvent) {
 		if (!mousePressed) return;
 
 		const parent = event.target as HTMLTableCellElement;
@@ -106,6 +106,18 @@
 		const y = parseInt(parent.parentElement?.dataset.y ?? '0');
 
 		matrix[y][x].color = colorToHex();
+
+		const fdata = new FormData();
+		fdata.append('x', x.toString());
+		fdata.append('y', y.toString());
+
+		const response = await fetch('http://localhost:8080/pixel', {
+			method: 'POST',
+			mode: 'cors',
+			body: fdata
+		});
+		const mdata = (await response.json()) as MatrixResponse;
+		if (!mdata.success) alert("Error while processing 'pixel'!");
 	}
 
 	function colorToHex(): string {
@@ -364,7 +376,7 @@
 			min="0"
 			max="191"
 			step="1"
-			value="0"
+			value="8"
 			required
 		/>
 		<label class="border-2 border-black border-r-0 pl-1" for="ty">Y:</label>
@@ -376,7 +388,7 @@
 			min="0"
 			max="191"
 			step="1"
-			value="0"
+			value="9"
 			required
 		/><label class="border-2 border-black border-r-0 pl-1" for="tin">Input:</label>
 		<input
@@ -410,7 +422,7 @@
 						data-x={cell.xIndex}
 						class="p-0.75"
 						style="background-color: #{cell.color}"
-						on:mouseenter={setColor}
+						on:mouseenter={setMousePixel}
 					/>
 				{/each}
 			</tr>