🪺 Adds multible generic components

app/src/components/Card.svelte

@@ -0,0 +1,3 @@
+<div class={`${$$props.class} p-4 m-2 rounded-md shadow-lg bg-surface`}>
+    <slot />
+</div>

app/src/components/CardHeader.svelte

@@ -0,0 +1 @@
+<h2 class={`${$$props.class} text-lg border-b border-gray-600 text-on-background`}><slot/></h2>

app/src/components/Controls.svelte

@@ -3,20 +3,15 @@
 	import { onMount } from 'svelte';
 	import { throttler } from '../lib/throttle';
 	import { socket } from '../lib/socket';
+	import { emulateModel, input, outControllerData } from '../lib/store';
 
 	let throttle = new throttler();
 	let left: nipplejs.JoystickManager;
 	let right: nipplejs.JoystickManager;
 
-	let throttle_timing = 50;
+	let throttle_timing = 40;
 
-	let left_vector = { x: 0, y: 0 };
-	let right_vector = { x: 0, y: 0 };
-	let height = 45; // 0 to 50
-	let speed = 0;
 	let mode = 'rest'; // 'rest' | 'stand' | 'stand+' | 'walk'
-	let stream_rotation = 0;
-	let temp = 0;
 
 	let data = new Uint8Array(6);
 
@@ -30,12 +25,12 @@
 		});
 
 		left.on('move', (evt, data) => {
-			left_vector = data.vector;
+            input.update(o => {o.left = data.vector; return o;})
 			throttle.throttle(updateData, throttle_timing);
 		});
 
 		left.on('end', (evt, data) => {
-			left_vector = { x: 0, y: 0 };
+            input.update(o => {o.left = { x: 0, y: 0 }; return o;})
 			throttle.throttle(updateData, throttle_timing);
 		});
 
@@ -48,35 +43,34 @@
 		});
 
 		right.on('move', (evt, data) => {
-			right_vector = data.vector;
+            input.update(o => {o.right = data.vector; return o;})
 			throttle.throttle(updateData, throttle_timing);
 		});
 
 		right.on('end', (evt, data) => {
-			right_vector = { x: 0, y: 0 };
+            input.update(o => {o.right = { x: 0, y: 0 }; return o;})
 			throttle.throttle(updateData, throttle_timing);
 		});
 	});
 
 	const updateData = () => {
-		data[0] = left_vector.x * 128 + 128;
-		data[1] = left_vector.y * 128 + 128;
-		data[2] = right_vector.x * 128 + 128;
-		data[3] = right_vector.y * 128 + 128;
-		data[4] = height;
-		data[5] = speed;
-		data[6] = 0;
+		data[0] = 0;
+		data[1] = $input.left.x * 127 + 128;
+		data[2] = $input.left.y * 127 + 128;
+		data[3] = $input.right.x * 127 + 128;
+		data[4] = $input.right.y * 127 + 128;
+		data[5] = $input.height;
+		data[6] = $input.speed;
 
-		$socket.send(data);
+        outControllerData.set(data)
+
+        if(!$emulateModel) $socket.send(data);
 	};
 
-	const lerp = (start: number, end: number, amt: number) => {
-		return (1 - amt) * start + amt * end;
-	};
 </script>
 
 <div class="absolute top-0 left-0 w-screen h-screen">
-	<div class="absolute top-0 left-0 h-full w-full flex portrait:hidden z-10">
+	<div class="absolute top-0 left-0 h-full w-full flex portrait:hidden">
 		<div id="left" class="flex w-60 items-center justify-end" />
 		<div class="flex-1" />
 		<div id="right" class="flex w-60 items-center" />

app/src/components/Input.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let value
+    export let placeholder = ""
+    export let required = false
+    export let disabled = false
+</script>
+<div  class="{$$restProps.class || ''}">
+    <label for="first_name" class="block text-sm font-medium text-gray-900 dark:text-white"><slot/></label>
+    <input type="number" on:change placeholder={placeholder} disabled={disabled} bind:value={value} required={required} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+</div>

app/src/components/Topbar.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { isConnected, data } from '../lib/socket';
-	import { Icon, ArrowsPointingIn, ArrowsPointingOut, Bars3, Power } from 'svelte-hero-icons';
+	import { isConnected, dataBuffer } from '../lib/socket';
+	import { Icon, ArrowsPointingIn, ArrowsPointingOut, Bars3, Power, Cube } from 'svelte-hero-icons';
 	import { tweened } from 'svelte/motion';
 	import { quadInOut } from 'svelte/easing';
-	import { sidebarOpen } from '../lib/store';
+	import { emulateModel, sidebarOpen } from '../lib/store';
+	import { text } from 'svelte/internal';
 
 	let isFullscreen = false;
 
@@ -31,7 +32,7 @@
                 <Icon src={Bars3} size="32" />
             </button>
         </div>
-        <div class="w-20 p-4 text-right">{Math.floor($data[5])}°🌡️</div>
+        <div class="w-20 p-4 text-right">{Math.floor($dataBuffer[5])}°🌡️</div>
     </div>
     <div class="absolute flex justify-center w-full">
         <div>
@@ -47,6 +48,9 @@
                         <button>
                             <Icon src={Power} size="32" />
                         </button>
+                        <button class:text-blue-600={$emulateModel} on:click={() => emulateModel.update(v => {v = !v; return v})}>
+                            <Icon src={Cube} size="32"/>
+                        </button>
                     </div>
                 {/if}
             </div>

app/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from "./Card.svelte";
+export { default as CardHeader } from "./CardHeader.svelte";