diff --git a/Webserver/src/lib/client/color.ts b/Webserver/src/lib/client/color.ts new file mode 100644 index 0000000..37390a5 --- /dev/null +++ b/Webserver/src/lib/client/color.ts @@ -0,0 +1,36 @@ +export interface Color { + r: number; + g: number; + b: number; +} + +export function getContrastColor(hexColor: string): string { + const rgb = hexToRgb(hexColor); + const luminance = getLuminance(rgb ?? ({ r: 0, g: 0, b: 0 } as Color)); + return luminance > 0.5 ? '000000' : 'FFFFFF'; +} + +export function hexToRgb(hex: string): Color | null { + const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } + : null; +} + +export function getLuminance(rgb: Color): number { + const a = [rgb.r, rgb.g, rgb.b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); + }); + return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2]; +} + +export function rgbToHex(color: Color): string { + return (Object.entries(color) as [string, number][]) + .map((e) => e[1].toString(16).padStart(2, '0')) + .join(''); +} diff --git a/Webserver/src/lib/client/gamepad.ts b/Webserver/src/lib/client/gamepad.ts new file mode 100644 index 0000000..dc3540f --- /dev/null +++ b/Webserver/src/lib/client/gamepad.ts @@ -0,0 +1,21 @@ +export interface Coordinates { + x: number; + y: number; +} + +export function detectGamepad() { + const gps = navigator.getGamepads(); + if (gps.length === 0) return null; + + return gps[0]; +} + +export function gamepadButtonPress(gamepad: Gamepad | null, gameCoords: Coordinates) { + if (!gamepad) return; + + gamepad.axes.forEach((axis, index) => { + if (Math.abs(axis) !== 1) return; + if (index === 1) gameCoords.y += axis; + if (index === 0) gameCoords.x += axis; + }); +} diff --git a/Webserver/src/lib/client/matrix.ts b/Webserver/src/lib/client/matrix.ts new file mode 100644 index 0000000..154ef3d --- /dev/null +++ b/Webserver/src/lib/client/matrix.ts @@ -0,0 +1,14 @@ +export interface MatrixCell { + xIndex: number; + yIndex: number; + color: string; +} + +export function initializeMatrix(scaling: number): MatrixCell[][] { + return Array.from({ length: 192 / scaling }, (_, yIndex) => + Array.from( + { length: 192 / scaling }, + (_, xIndex) => ({ xIndex, yIndex, color: '000000' }) as MatrixCell + ) + ) as MatrixCell[][]; +} diff --git a/Webserver/src/lib/client/miscellaneous.ts b/Webserver/src/lib/client/miscellaneous.ts new file mode 100644 index 0000000..4d5030c --- /dev/null +++ b/Webserver/src/lib/client/miscellaneous.ts @@ -0,0 +1,3 @@ +export function toRadians(degrees: number): number { + return (degrees / 180) * Math.PI; +} diff --git a/Webserver/src/lib/interfaces.ts b/Webserver/src/lib/interfaces.ts new file mode 100644 index 0000000..c1e03cb --- /dev/null +++ b/Webserver/src/lib/interfaces.ts @@ -0,0 +1,3 @@ +export interface APIResponse { + success: boolean; +} diff --git a/Webserver/src/routes/+page.svelte b/Webserver/src/routes/+page.svelte index 29cd3a1..e4c3642 100644 --- a/Webserver/src/routes/+page.svelte +++ b/Webserver/src/routes/+page.svelte @@ -1,13 +1,10 @@

Matrix Control Panel

@@ -203,7 +234,7 @@ required />
- - + + />
+ +
+ +
+ +
+ +
- - (mousePressed = true)} - on:mouseup|preventDefault={() => (mousePressed = false)} - > +
{#each matrix as row} - + {#each row as cell} - {/each}
+ {/each}
+
+ + (mousePressed = true)} + on:mouseup|preventDefault={() => (mousePressed = false)} + > + {#each matrix as row} + + {#each row as cell} + + {/each} +
+ {/each} +
+
diff --git a/Webserver/tailwind.config.js b/Webserver/tailwind.config.js index 1cb5f5d..bfe0bc2 100644 --- a/Webserver/tailwind.config.js +++ b/Webserver/tailwind.config.js @@ -2,11 +2,7 @@ export default { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { - extend: { - spacing: { - 0.75: '0.1875rem' - } - } + extend: {} }, plugins: [] };