🕹 Adds controller functionality

app/src/components/Controls.svelte

@@ -2,6 +2,7 @@
 	import nipplejs from 'nipplejs';
 	import { onMount } from 'svelte';
 	import { throttler } from '../lib/throttle';
+	import { socket } from '../lib/socket';
 
 	let throttle = new throttler();
 	let left: nipplejs.JoystickManager;
@@ -11,18 +12,21 @@
 
 	let left_vector = { x: 0, y: 0 };
 	let right_vector = { x: 0, y: 0 };
-	let height = 0; // -50 to 50
+	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);
+
 	onMount(() => {
 		left = nipplejs.create({
 			zone: document.getElementById('left') as HTMLElement,
 			color: 'grey',
 			dynamicPage: true,
-			mode: 'static'
+			mode: 'static',
+			restOpacity: 0.3
 		});
 
 		left.on('move', (evt, data) => {
@@ -39,7 +43,8 @@
 			zone: document.getElementById('right') as HTMLElement,
 			color: 'grey',
 			dynamicPage: true,
-			mode: 'static'
+			mode: 'static',
+			restOpacity: 0.3
 		});
 
 		right.on('move', (evt, data) => {
@@ -54,7 +59,15 @@
 	});
 
 	const updateData = () => {
-		console.log(height, left_vector, right_vector);
+		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;
+
+		$socket.send(data);
 	};
 
 	const lerp = (start: number, end: number, amt: number) => {
@@ -63,7 +76,7 @@
 </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">
+	<div class="absolute top-0 left-0 h-full w-full flex portrait:hidden z-10">
 		<div id="left" class="flex w-60 items-center justify-end" />
 		<div class="flex-1" />
 		<div id="right" class="flex w-60 items-center" />