feat(client): ✨ implement handlers tfor controls

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>
@@ -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]