From 76e2be5ae51b5e3577cb1312e4172e5b34a15034 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
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 @@
 			<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]