From fa098ad2e03af2ad71600a985df6d75c638d63d1 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sun, 25 Feb 2024 22:31:41 +0100
Subject: [PATCH] =?UTF-8?q?=20=F0=9F=9B=9DAdds=20slider=20for=20height=20a?=
 =?UTF-8?q?nd=20speed=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/Controls.svelte     | 36 ++++++++++++++++++++------
 app/src/components/input/Button.svelte | 11 ++++++++
 app/src/components/input/Range.svelte  | 29 +++++++++++++++++++++
 app/src/routes/Controller.svelte       |  4 +--
 4 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 app/src/components/input/Button.svelte
 create mode 100644 app/src/components/input/Range.svelte

diff --git a/app/src/components/Controls.svelte b/app/src/components/Controls.svelte
index c37e0eb..954c86b 100644
--- a/app/src/components/Controls.svelte
+++ b/app/src/components/Controls.svelte
@@ -2,15 +2,17 @@
 	import nipplejs from 'nipplejs';
 	import { onMount } from 'svelte';
 	import { capitalize, throttler, toInt8 } from '$lib/utilities';
-	import { input, outControllerData, mode, modes } from '$lib/stores';
+	import { input, outControllerData, mode, modes, type Modes } from '$lib/stores';
 	import type { vector } from '$lib/models';
+    import Range from './input/Range.svelte';
+	import Button from './input/Button.svelte';
 
 	let throttle = new throttler();
 	let left: nipplejs.JoystickManager;
 	let right: nipplejs.JoystickManager;
 
 	let throttle_timing = 40;
-	let data = new Int8Array(6);
+	let data = new Int8Array(7);
 
 	onMount(() => {
 		left = nipplejs.create({
@@ -67,6 +69,15 @@
 		throttle.throttle(updateData, throttle_timing);
 	};
 
+    const handleRange = (event:CustomEvent, key: 'speed' | 'height') => {
+        const value:number = event.detail
+        input.update((inputData) => {
+			inputData[key] = value;
+			return inputData;
+		});
+        throttle.throttle(updateData, throttle_timing);
+    }
+
 	const changeMode = (modeValue: Modes) => {
 		mode.set(modeValue);
 	};
@@ -78,14 +89,23 @@
 		<div class="flex-1" />
 		<div id="right" class="flex w-60 items-center" />
 	</div>
-	<div class="absolute bottom-0 z-10 p-4 gap-4 flex">
+	<div class="absolute bottom-0 z-10 p-4 gap-4 flex items-end">
 		{#each modes as modeValue}
-			<button
-				on:click={() => changeMode(modeValue)}
-				class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 p-2">
-                {capitalize(modeValue)}
-            </button>
+			<div>
+				<Button
+					on:click={() => changeMode(modeValue)}
+					active={$mode === modeValue}
+				>
+					{capitalize(modeValue)}
+				</Button>
+			</div>
 		{/each}
+        <div>
+            {#if $mode === 'walk'}
+			    <Range label="Speed" on:value={(e) => handleRange(e, 'speed')}></Range>
+            {/if}
+            <Range label="Height" on:value={(e) => handleRange(e, 'height')}></Range>
+        </div>
 	</div>
 </div>
 
diff --git a/app/src/components/input/Button.svelte b/app/src/components/input/Button.svelte
new file mode 100644
index 0000000..8f47822
--- /dev/null
+++ b/app/src/components/input/Button.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    export let active = false
+</script>
+
+<button
+    on:click
+    class={$$restProps.class + ' rounded-md outline outline-2 text-zinc-200 outline-zinc-600 p-2' + 
+        (active ? ' bg-zinc-600' : '')}
+>
+<slot/>
+</button>
\ No newline at end of file
diff --git a/app/src/components/input/Range.svelte b/app/src/components/input/Range.svelte
new file mode 100644
index 0000000..bd95b04
--- /dev/null
+++ b/app/src/components/input/Range.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte'
+    const dispatch = createEventDispatcher()
+
+	export let value = 50;
+	export let min = 0;
+	export let max = 100;
+	export let label = '';
+
+    const dispatchValueInput = () => {
+        dispatch('value', value)
+    }
+</script>
+
+<div class="">
+	<input
+		id="range"
+		type="range"
+		{min}
+		{max}
+		bind:value
+        on:change
+        on:input={dispatchValueInput}
+		class="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+	/>
+</div>
+<label for="range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{label}</label
+>
+
diff --git a/app/src/routes/Controller.svelte b/app/src/routes/Controller.svelte
index ac332ad..88db930 100644
--- a/app/src/routes/Controller.svelte
+++ b/app/src/routes/Controller.svelte
@@ -7,9 +7,9 @@
 
 <div class="flex justify-center items-center w-full h-full">
 	{#if $emulateModel}
-    <Model />
+		<Model />
 	{:else}
-    <Stream />
+		<Stream />
 	{/if}
 	<Controls />
 </div>