feat(client): implement handlers tfor controls

This commit is contained in:
Julien Oculi 2024-06-25 13:15:04 +02:00
parent 6044a3e50c
commit 76e2be5ae5

View file

@ -36,25 +36,25 @@
<label>
<span>Rotation en degrés</span>
<input
id="rotate-input"
type="number"
title="Rotation en degrés (0° - 360°)"
min="0"
title="Rotation en degrés (-360° à 360°)"
min="-360"
max="360"
step="1"
placeholder="90"
onchange="rotate()"
/>
</label>
<label>
<span>Longueur en cm</span>
<input
id="move-input"
type="number"
title="Longueur en cm (0 - 2^31)"
title="Longueur en cm (-2^31 à 2^31)"
min="-2147483647"
step="1"
max="2147483647"
placeholder="10"
onchange="move()"
/>
</label>
</div>
@ -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<void>}
*/
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]