feat(client): ✨ add touch ui and handlers for controls

client/index.html

@@ -32,7 +32,7 @@
 			</label>
 			<button>Se connecter</button>
 		</form>
-		<div class="controls">
+		<div class="input-controls">
 			<label>
 				<span>Rotation en degrés</span>
 				<input
@@ -58,6 +58,31 @@
 				/>
 			</label>
 		</div>
+		<div class="touch-controls" id="touch-controls">
+			<span class="placeholder"></span>
+			<button title="Avancer" data-command="forward" data-value="2">
+				⬆️
+			</button>
+			<span class="placeholder"></span>
+			<button title="Tourner à gauche" data-command="left" data-value="5">
+				⬅️
+			</button>
+			<button title="Arrêter" data-command="stop" data-value="0">
+				⏸️
+			</button>
+			<button
+				title="Tourner à droite"
+				data-command="right"
+				data-value="5"
+			>
+				➡️
+			</button>
+			<span class="placeholder"></span>
+			<button title="Reculer" data-command="backward" data-value="2">
+				⬇️
+			</button>
+			<span class="placeholder"></span>
+		</div>
 		<h2>Contrôle</h2>
 		<p>
 			Amusez vous ! Pour contrôler le robot, utilisez les flèches
@@ -77,6 +102,51 @@
 				assignCommands('left', 'right', event)
 			)
 
+		// Buttons handlers
+		for (const button of document
+			.querySelector('#touch-controls')
+			.querySelectorAll('button')) {
+			button.addEventListener('click', () => {
+				const { command, value } = button.dataset
+
+				// Check datas are set for button
+				if (command === undefined || value === undefined) {
+					alert(
+						`Pas de command ou de valeur assigné au bouton "${button.title}"`
+					)
+					throw new Error(
+						`no command or value assigned to ${button.title}`
+					)
+				}
+
+				// Check command is valid
+				if (
+					!['forward', 'backward', 'left', 'right', 'stop'].includes(
+						command
+					)
+				) {
+					alert(
+						`La command "${command}" n'est pas valide en tant que ('forward', 'backward', 'left', 'right', 'stop')`
+					)
+					throw new Error(
+						`specified command "${command}" is not in ['forward', 'backward', 'left', 'right', 'stop']`
+					)
+				}
+
+				// Check value is valid finite number
+				if (!Number.isFinite(Number(value))) {
+					alert(
+						`La valeur "${value}" n'est convertible en entier fini`
+					)
+					throw new Error(
+						`value "${value}" cannot be casted to finite integer`
+					)
+				}
+
+				sendCommand(command, Number(value))
+			})
+		}
+
 		// Keyboard handler
 		document.addEventListener('keydown', ({ code }) => {
 			if (code === 'ArrowUp') {
@@ -208,4 +278,10 @@
 			return sendCommand(positiveCommand, value)
 		}
 	</script>
+	<style>
+		.touch-controls {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+		}
+	</style>
 </html>