diff --git a/Webserver/src/routes/+page.svelte b/Webserver/src/routes/+page.svelte index 489b8d9..c24cefa 100644 --- a/Webserver/src/routes/+page.svelte +++ b/Webserver/src/routes/+page.svelte @@ -3,6 +3,12 @@ success: boolean; } + interface MatrixCell { + xIndex: number; + yIndex: number; + color: string; + } + async function get(event: SubmitEvent) { const form = event.target as HTMLFormElement; @@ -17,6 +23,12 @@ const form = event.target as HTMLFormElement; const fdata = new FormData(form); + switch (form.dataset.endpoint) { + case 'color': + colorSelect(fdata); + break; + } + const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, { method: form.method, mode: 'cors', @@ -25,9 +37,35 @@ const mdata = (await response.json()) as MatrixResponse; alert(mdata.success ? 'Success!' : 'Error!'); } + + function colorSelect(formData: FormData) { + pixelColor[0] = parseInt((formData.get('r') as string) ?? '255'); + pixelColor[1] = parseInt((formData.get('g') as string) ?? '255'); + pixelColor[2] = parseInt((formData.get('b') as string) ?? '255'); + } + + 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; + } + + const matrix = Array.from({ length: 192 }, (_, yIndex) => + Array.from({ length: 192 }, (_, xIndex) => ({ xIndex, yIndex, color: '000000' }) as MatrixCell) + ) as MatrixCell[][]; + + const pixelColor = [255, 255, 255]; + let mousePressed = false; -
+ {/each} + |