Clean up web code

beef-config/eslint.config.js

@@ -27,6 +27,23 @@ export default [
 			}
 		}
 	},
+	{
+		rules: {
+			'no-unused-vars': 'off',
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					'args': 'all',
+					'argsIgnorePattern': '^_',
+					'caughtErrors': 'all',
+					'caughtErrorsIgnorePattern': '^_',
+					'destructuredArrayIgnorePattern': '^_',
+					'varsIgnorePattern': '^_',
+					'ignoreRestSiblings': true
+				}
+			]
+		}
+	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/']
 	}

beef-config/package.json

@@ -12,14 +12,15 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.11.0",
+		"@eslint/js": "^9.12.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^9.6.0",
 		"@types/estree": "^1.0.6",
 		"@types/json-schema": "^7.0.15",
+		"@types/w3c-web-hid": "^1.0.6",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -38,7 +39,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@types/w3c-web-hid": "^1.0.6",
 		"bits-ui": "^0.21.15",
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.441.0",

beef-config/src/lib/ColorPicker.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import ColorPicker from 'svelte-awesome-color-picker';
+	import type { HsvaColor } from 'colord';
+
+	import { type Config } from '$lib/types/config';
+	import { Hsv } from '$lib/types/types';
+
+	export let config: Config;
+	export let hsvField: keyof Config | undefined;
+
+	let hsva = { h: 0, s: 0, v: 0 } as HsvaColor;
+	let colourPickerElement: HTMLDivElement;
+
+	onMount(updateHsvBinding);
+
+	$: if (hsvField) {
+		updateHsvBinding();
+	}
+
+	function updateHsvBinding(): void {
+		if (hsvField) {
+			const hsv = config[hsvField] as Hsv;
+			hsva.h = hsv.h;
+			hsva.s = hsv.s;
+			hsva.v = hsv.v;
+		}
+	}
+
+	// Limit updates so that we don't immediately wear out EEPROM if the user spasms out on the colour picker
+	function handleHsvStart(event: PointerEvent): void {
+		colourPickerElement.setPointerCapture(event.pointerId);
+	}
+
+	function handleHsvEnd(event: PointerEvent): void {
+		colourPickerElement.releasePointerCapture(event.pointerId);
+		handleHsvChange();
+	}
+
+	function handleHsvChange(): void {
+		if (hsvField) {
+			const hsv = config[hsvField];
+			if (hsv instanceof Hsv) {
+				hsv.fromHsva(hsva);
+				// Hack to force an update
+				config = config;
+			}
+		}
+	}
+</script>
+
+{#if hsvField}
+	<div class="mb-4">
+		<div
+			bind:this={colourPickerElement}
+			role="none"
+			on:pointerdown={handleHsvStart}
+			on:pointerup={handleHsvEnd}
+			on:input={handleHsvChange}
+		>
+			<ColorPicker position="responsive" isAlpha={false} on:input bind:hsv={hsva} />
+		</div>
+	</div>
+{/if}

beef-config/src/lib/InputModes.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+
+	import { InputMode } from '$lib/types/types';
+
+	export let inputMode: InputMode;
+
+	const inputModes = Object.values(InputMode)
+		.filter((v) => isNaN(Number(v)))
+		.map((_, index) => ({
+			value: index,
+			label: InputMode[index]
+		}));
+</script>
+
+<div class="mb-4">
+	<Label>Input Mode</Label>
+	<Select.Root
+		selected={{
+			value: inputMode,
+			label: InputMode[inputMode]
+		}}
+		onSelectedChange={(value) => {
+			if (value) {
+				inputMode = value.value;
+			}
+		}}
+	>
+		<Select.Trigger class="w-[180px]">
+			<Select.Value placeholder="Input Mode" />
+		</Select.Trigger>
+		<Select.Content>
+			<Select.Group>
+				{#each inputModes as mode}
+					<Select.Item value={mode.value} label={mode.label}>{mode.label}</Select.Item>
+				{/each}
+			</Select.Group>
+		</Select.Content>
+	</Select.Root>
+</div>

beef-config/src/lib/LightEffectSelect.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" extends generics="T extends TurntableMode | BarMode">
+	import { Label } from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+
+	import ColorPicker from '$lib/ColorPicker.svelte';
+	import type { Config } from '$lib/types/config';
+	import type { BarMode, EnumMapping, TurntableMode } from '$lib/types/types';
+
+	export let label: string;
+	export let config: Config;
+	export let effect: T;
+	export let modeMapping: Record<T, EnumMapping>;
+
+	const modeMappingIter = Object.entries<EnumMapping>(modeMapping);
+</script>
+
+<div class="mb-4">
+	<Label>{label}</Label>
+	<Select.Root
+		selected={{
+			value: effect,
+			label: modeMapping[effect].displayName
+		}}
+		onSelectedChange={(value) => {
+			if (value) {
+				effect = value.value;
+			}
+		}}
+	>
+		<Select.Trigger class="w-[180px]">
+			<Select.Value placeholder={label} />
+		</Select.Trigger>
+		<Select.Content>
+			<Select.Group>
+				{#each modeMappingIter as [value, label]}
+					<Select.Item value={Number(value)} label={label.displayName}
+						>{label.displayName}</Select.Item
+					>
+				{/each}
+			</Select.Group>
+		</Select.Content>
+	</Select.Root>
+</div>
+<ColorPicker bind:config hsvField={modeMapping[effect].hsvField} />

beef-config/src/lib/Switch.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label';
+	import { Switch } from '$lib/components/ui/switch';
+
+	export let label: string;
+	export let checked: boolean;
+</script>
+
+<div class="mb-4 flex items-center space-x-2">
+	<Label for={label}>{label}</Label>
+	<Switch id={label} bind:checked />
+</div>