use matrix interface on admin

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

@@ -1,7 +1,13 @@
 <script lang="ts">
+	import {
+		PUBLIC_LED_CHAIN,
+		PUBLIC_LED_HEIGHT,
+		PUBLIC_LED_PARALLEL,
+		PUBLIC_LED_WIDTH
+	} from '$env/static/public';
 	import { rgbToHex, type Color, getContrastColor } from '$lib/client/color';
 	import { detectGamepad, gamepadButtonPress } from '$lib/client/gamepad';
-	import { initializeMatrix } from '$lib/client/matrix';
+	import { initializeMatrix, type Matrix } from '$lib/client/matrix';
 	import { toRadians } from '$lib/client/miscellaneous';
 	import type { APIResponse } from '$lib/interfaces';
 	import { onMount } from 'svelte';
@@ -81,7 +87,8 @@
 			const ny = Math.round(Math.sin(toRadians(a)) * r + y);
 
 			// If within bounds, draw pixel with color
-			if (nx >= 0 && nx < 192 && ny >= 0 && ny < 192) matrix[ny][nx].color = hex;
+			if (nx >= 0 && nx < 192 && ny >= 0 && ny < 192 && matrix.grid)
+				matrix.grid[ny][nx].color = hex;
 		}
 	}
 
@@ -96,7 +103,8 @@
 		// Convert stored color data to hex
 		const hex = rgbToHex(pixelColor);
 		// Loop through every position in rectangle to set color
-		for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) matrix[j][i].color = hex;
+		if (!matrix.grid) return;
+		for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) matrix.grid[j][i].color = hex;
 	}
 
 	// Draw pixel onto matrix
@@ -106,12 +114,12 @@
 		const y = parseInt((formData.get('y') as string) ?? '191');
 
 		// Set singular coodinate to given color
-		matrix[y][x].color = rgbToHex(pixelColor);
+		if (matrix.grid) matrix.grid[y][x].color = rgbToHex(pixelColor);
 	}
 
 	// Clear simulated matrix
 	function clearMatrix() {
-		matrix.forEach((y) => y.forEach((x) => (x.color = '000000')));
+		matrix.grid?.forEach((y) => y.forEach((x) => (x.color = '000000')));
 	}
 
 	function colorSelect(formData: FormData) {
@@ -135,9 +143,9 @@
 		// Convert stored color data to hex
 		const next = rgbToHex(pixelColor);
 		// Ignore if color stays the same to reduce API calls
-		if (matrix[y][x].color === next) return;
+		if (matrix.grid?.[y][x].color === next) return;
 		// Set pixel to color
-		matrix[y][x].color = next;
+		matrix.grid![y][x].color = next;
 
 		// Create new formdata
 		const fdata = new FormData();
@@ -184,7 +192,7 @@
 		padding = 0.1875 * scaling;
 
 		// Reinitialize matrix
-		matrix = initializeMatrix(scaling);
+		matrix.grid = initializeMatrix(scaling);
 	}
 
 	// System variables
@@ -192,7 +200,7 @@
 		padding = 0.5625;
 	let mousePressed = false;
 	let gamepad: Gamepad | null = null;
-	let matrix = initializeMatrix(scaling);
+	let matrix: Matrix;
 
 	const gameCoords = { x: 0, y: 0 };
 	const pixelColor = { r: 255, g: 255, b: 255 } as Color;
@@ -223,6 +231,12 @@
 			// Remove only if it's the same gameapd
 			if (e.gamepad.id === gamepad?.id) gamepad = null;
 		});
+
+		matrix = {
+			width: +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN,
+			height: +PUBLIC_LED_HEIGHT * +PUBLIC_LED_PARALLEL,
+			grid: initializeMatrix(scaling)
+		};
 	});
 </script>
 
@@ -561,7 +575,7 @@
 <div class="flex justify-center">
 	<!-- Color display -->
 	<table id="main" class="mt-5 border-2 border-black">
-		{#each matrix as row}
+		{#each matrix?.grid ?? [] as row}
 			<tr>
 				{#each row as cell}
 					<td style="padding: {padding}rem; background-color: #{cell.color}" />
@@ -578,7 +592,7 @@
 			on:mousedown|preventDefault={() => (mousePressed = true)}
 			on:mouseup|preventDefault={() => (mousePressed = false)}
 		>
-			{#each matrix as row}
+			{#each matrix?.grid ?? [] as row}
 				<tr data-y={row[0].y}>
 					{#each row as cell}
 						<td