From 76e2be5ae51b5e3577cb1312e4172e5b34a15034 Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Tue, 25 Jun 2024 13:15:04 +0200 Subject: [PATCH] feat(client): :sparkles: implement handlers tfor controls --- client/index.html | 49 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/client/index.html b/client/index.html index a6c748e..c9fccb1 100644 --- a/client/index.html +++ b/client/index.html @@ -36,25 +36,25 @@ @@ -135,9 +135,9 @@ /** * Test connection to endpoint. - * + * * @param {string} endpoint Endpoint to test for. - * + * * @returns {void} * @throws {Error} Endpoint unreachable. */ @@ -153,6 +153,41 @@ } } + document + .querySelector('move-input') + .addEventListener('change', (event) => + assignCommands('backward', 'forward', event) + ) + document + .querySelector('rotate-input') + .addEventListener('change', (event) => + assignCommands('left', 'right', event) + ) + + /** + * Assign a command to an input. + * Do negative command if value < 0 else do positive command. + * + * @param {Command} negativeCommand Command if value < 0. + * @param {Command} positiveCommand Command if value >= 0. + * @param {event} event Event of the input. + * + * @returns {Promise} + */ + function assignCommands(negativeCommand, positiveCommand, event) { + if (event.target === null) return + + /** @type {HTMLInputElement} */ + const target = event.target + const value = target.valueAsNumber + + const endpoint = getEndpoint() + if (value < 0) { + return sendCommand(endpoint, negativeCommand, Math.abs(value)) + } + return sendCommand(endpoint, positiveCommand, value) + } + document.addEventListener('keydown', (event) => { const key = event.keyCode const { command, value } = keyMap[key]