From 8d561f14c31aefd29c021c577dfca9759b9e10d5 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Tue, 25 Jun 2024 12:27:16 +0200
Subject: [PATCH] refactor(client): :recycle: remove deprecated `xhr` API and
 rewrite hard coded and redundant parts

---
 client/index.html | 55 ++++++++++++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/client/index.html b/client/index.html
index af8c2cd..0ea38b1 100644
--- a/client/index.html
+++ b/client/index.html
@@ -63,18 +63,31 @@
 			directionnelles pour le diriger et la barre espace pour le stopper.
 		</p>
 	</body>
-	<script>
+	<script type="module">
+		/**
+		 * A command string.
+		 * @typedef {('forward' | 'backward' | 'left' | 'right' | 'stop')} Command
+		 */
+
+		/**
+		 * Send command to the robot.
+		 *
+		 * @param {string} endpoint Address IP of the robot
+		 * @param {Command} command Command to send.
+		 * @param {number} value Value of the command if needed.
+		 */
+		async function sendCommand(endpoint, command, value) {
+			const response = await fetch(
+				`http://${endpoint}/get?command=${command}&value=${value}`
+			)
+			const text = await response.text()
+			console.log(text)
+		}
+
 		document.addEventListener('keydown', (event) => {
 			const key = event.keyCode
-			const url = keyMap[key]
-			console.log(url)
-			const xhr = new XMLHttpRequest()
-			xhr.open('GET', url)
-			xhr.onload = () => {
-				const response = xhr.responseText
-				console.log(response)
-			}
-			xhr.send()
+			const { command, value } = keyMap[key]
+			sendCommand(endpoint, command, value)
 		})
 
 		function storeInput() {
@@ -82,23 +95,11 @@
 			valueRot = document.getElementById('valueRot').value
 			valueLength = document.getElementById('valueLength').value
 			keyMap = {
-				38:
-					'http://' +
-					ipInput +
-					'/get?command=forward&value=' +
-					valueLength,
-				40:
-					'http://' +
-					ipInput +
-					'/get?command=backward&value=' +
-					valueLength,
-				37: 'http://' + ipInput + '/get?command=left&value=' + valueRot,
-				39:
-					'http://' +
-					ipInput +
-					'/get?command=right&value=' +
-					valueRot,
-				32: 'http://' + ipInput + '/get?command=stop',
+				38: { command: 'forward', value: valueLength },
+				40: { command: 'backward', value: valueLength },
+				37: { command: 'left', value: valueRot },
+				39: { command: 'right', value: valueRot },
+				32: { command: 'stop', value: 0 },
 			}
 		}
 	</script>