feat: settings drawer

src/lib/polysynth.svelte

@@ -6,12 +6,14 @@
 
 	const cmaj = Scale.get('C5 major');
 
-	poly.set({
-		envelope: {
-			...$synth_options
-		},
-		volume: -24
-	});
+	$: {
+		poly.set({
+			envelope: {
+				...$synth_options
+			},
+			volume: -24
+		});
+	}
 
 	function attack(note: string) {
 		poly.triggerAttack(note);

src/lib/settings.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { synth_options } from './store';
+	const maxTime = 10;
+</script>
+
+<div class="flex flex-col gap-4 p-5">
+	<div class="flex flex-col gap-2">
+		<label for="attack" class="capitalize"
+			>Attack <small class="px-4">{$synth_options.attack}</small></label
+		>
+		<input
+			type="range"
+			class="range"
+			id="attack"
+			min="0"
+			max={maxTime}
+			step="0.1"
+			bind:value={$synth_options.attack}
+		/>
+	</div>
+	<div class="flex flex-col gap-2">
+		<label for="release" class="capitalize"
+			>Release <small class="px-4">{$synth_options.release}</small></label
+		>
+		<input
+			type="range"
+			class="range"
+			id="release"
+			min="0"
+			max={maxTime}
+			step="0.1"
+			bind:value={$synth_options.release}
+		/>
+	</div>
+	<div class="flex flex-col gap-2">
+		<label for="decay" class="capitalize"
+			>Decay <small class="px-4">{$synth_options.decay}</small></label
+		>
+		<input
+			type="range"
+			class="range"
+			id="decay"
+			min="0"
+			max={maxTime}
+			step="0.1"
+			bind:value={$synth_options.decay}
+		/>
+	</div>
+
+	<div class="flex flex-col gap-2">
+		<label for="sustain" class="capitalize"
+			>Sustain <small class="px-4">{$synth_options.sustain}</small></label
+		>
+		<input
+			type="range"
+			class="range"
+			id="sustain"
+			min="0"
+			max="1"
+			step="0.1"
+			bind:value={$synth_options.sustain}
+		/>
+	</div>
+</div>

src/routes/+layout.svelte

@@ -2,9 +2,16 @@
 	import '../app.postcss';
 	import Start from '$lib/start.svelte';
 	import { app_started } from '$lib/store';
+	import { initializeStores, Drawer } from '@skeletonlabs/skeleton';
+	import Settings from '$lib/settings.svelte';
+
+	initializeStores();
 </script>
 
 {#if $app_started}
+	<Drawer>
+		<Settings />
+	</Drawer>
 	<slot />
 {:else}
 	<Start />

src/routes/+page.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
 	import Polysynth from '$lib/polysynth.svelte';
+	import { getDrawerStore, type DrawerSettings } from '@skeletonlabs/skeleton';
+	const drawerStore = getDrawerStore();
+
+	const drawerSettings: DrawerSettings = {
+		position: 'right',
+		width: 'w-full max-w-sm md:max-w-md'
+	};
 </script>
 
+<div class="fixed top-5 left-5">
+	<button on:click={() => drawerStore.open(drawerSettings)} class="btn variant-filled"
+		>Settings</button
+	>
+</div>
 <Polysynth />