Rune Harlyk
79 lines
2.1 KiB
Svelte
79 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import nipplejs from 'nipplejs';
|
|
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 = 40;
|
|
|
|
let mode = 'rest'; // 'rest' | 'stand' | 'stand+' | 'walk'
|
|
|
|
let data = new Uint8Array(6);
|
|
|
|
onMount(() => {
|
|
left = nipplejs.create({
|
|
zone: document.getElementById('left') as HTMLElement,
|
|
color: 'grey',
|
|
dynamicPage: true,
|
|
mode: 'static',
|
|
restOpacity: 0.3
|
|
});
|
|
|
|
left.on('move', (evt, data) => {
|
|
input.update(o => {o.left = data.vector; return o;})
|
|
throttle.throttle(updateData, throttle_timing);
|
|
});
|
|
|
|
left.on('end', (evt, data) => {
|
|
input.update(o => {o.left = { x: 0, y: 0 }; return o;})
|
|
throttle.throttle(updateData, throttle_timing);
|
|
});
|
|
|
|
right = nipplejs.create({
|
|
zone: document.getElementById('right') as HTMLElement,
|
|
color: 'grey',
|
|
dynamicPage: true,
|
|
mode: 'static',
|
|
restOpacity: 0.3
|
|
});
|
|
|
|
right.on('move', (evt, data) => {
|
|
input.update(o => {o.right = data.vector; return o;})
|
|
throttle.throttle(updateData, throttle_timing);
|
|
});
|
|
|
|
right.on('end', (evt, data) => {
|
|
input.update(o => {o.right = { x: 0, y: 0 }; return o;})
|
|
throttle.throttle(updateData, throttle_timing);
|
|
});
|
|
});
|
|
|
|
const updateData = () => {
|
|
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;
|
|
|
|
outControllerData.set(data)
|
|
|
|
if(!$emulateModel) $socket.send(data);
|
|
};
|
|
|
|
</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 id="left" class="flex w-60 items-center justify-end" />
|
|
<div class="flex-1" />
|
|
<div id="right" class="flex w-60 items-center" />
|
|
</div>
|
|
</div>
|