Split the script and added eventlistener

web/Serial.js

@@ -0,0 +1,74 @@
+let port;
+let reader;
+const decoder = new TextDecoder("utf-8");
+let readibleoutput = 0;
+
+// Request a port and open a connection.
+async function connect() {
+    //vraag aan de browser om een serial port te selecteren
+    port = await navigator.serial.requestPort();
+    await port.open({ baudRate: 9600 });
+    reader = port.readable.getReader();
+    console.log("Port is open!");
+    readLoop()
+}
+
+// Read data from serial port
+async function readLoop() {
+    let buffer = [];
+
+    // loop until reader.cancel() is called
+    while (true) {
+        // Wait for data
+        const { value, done } = await reader.read();
+
+
+        for (let iByte = 0; iByte < value.length; iByte++) {
+            let singleByte = value[iByte];
+            //functie maken er van met boolean!!!
+            if (singleByte != 10) {
+                buffer.push(singleByte);
+            }
+
+            else {
+                let sensorString = decoder.decode(new Uint8Array(buffer));
+                //Put all data in a json Array and parse it to a boolean array
+                try {
+                    // Parse the incoming data as JSON
+                    // "replace(/'/g, '\"')" replaces all single quotes with double quotes with use of regular expressions. So we can use Jsonparse to parse it into a booleanArray
+                    let SerialArray = JSON.parse(sensorString.replace(/'/g, '"'));
+                    // Ensure SerialArray is an array
+                    if (Array.isArray(SerialArray)) {
+                        //Convert the array of strings to a boolean array
+                        //When a bit is 1 it becomes true, when a bit is 0 it becomes false
+                        let booleanArray = SerialArray.map(bit => bit == '1');
+                     // Dispatch an event with booleanArray as detail
+                        let event = new CustomEvent('booleanArrayUpdated', { detail: booleanArray });
+                        window.dispatchEvent(event);
+                        console.log(booleanArray);
+                    } else {
+                        console.error("Dit is geen Array");
+                    }
+                } catch (e) {
+                    console.log("json niet geparserd");
+                }
+                
+                buffer = [];
+            }
+            if (done) {
+                console.log('[readLoop] DONE', done);
+                reader.releaseLock();
+                break;
+            }
+        }
+    }
+    
+}
+
+
+// Sluit de poort
+async function disconnect() {
+    await reader.cancel();
+    await port.close();
+    console.log("Port is closed!");
+}

web/game.js

@@ -1,71 +1,3 @@
-let port;
-let reader;
-const decoder = new TextDecoder("utf-8");
-let readibleoutput = 0;
-let booleanArray = [];
-// Request a port and open a connection.
-async function connect() {
-    //vraag aan de browser om een serial port te selecteren
-    port = await navigator.serial.requestPort();
-    await port.open({ baudRate: 9600 });
-    reader = port.readable.getReader();
-    console.log("Port is open!");
-    readLoop()
-}
-
-// Read data from serial port
-async function readLoop() {
-    let buffer = [];
-
-    // loop until reader.cancel() is called
-    while (true) {
-        // Wait for data
-        const { value, done } = await reader.read();
-
-
-        for (let iByte = 0; iByte < value.length; iByte++) {
-            let singleByte = value[iByte];
-            //functie maken er van met boolean!!!
-            if (singleByte != 10) {
-                buffer.push(singleByte);
-            }
-            else {
-                let sensorString = decoder.decode(new Uint8Array(buffer));
-                //Put all data in a json Array and parse it to a boolean array
-                try {
-                    // Parse the incoming data as JSON
-                    // "replace(/'/g, '\"')" replaces all single quotes with double quotes with use of regular expressions. So we can use Jsonparse to parse it into a booleanArray
-                    let SerialArray = JSON.parse(sensorString.replace(/'/g, '"'));
-                    // Ensure SerialArray is an array
-                    if (Array.isArray(SerialArray)) {
-                        //Convert the array of strings to a boolean array
-                        //When a bit is 1 it becomes true, when a bit is 0 it becomes false
-                        booleanArray = SerialArray.map(bit => bit == '1');
-                        console.log(booleanArray);
-                    } else {
-                        console.error("Dit is geen Array");
-                    }
-                } catch (e) {
-                    console.log("json niet geparserd");
-                }
-                Movementloop()
-                buffer = [];
-            }
-            if (done) {
-                console.log('[readLoop] DONE', done);
-                reader.releaseLock();
-                break;
-            }
-        }
-    }
-
-}
-// Sluit de poort
-async function disconnect() {
-    await reader.cancel();
-    await port.close();
-    console.log("Port is closed!");
-}
 //--------------------Game--------------------
 // Game variables
 const width = 1000;
@@ -77,8 +9,7 @@ let radius = playerSize / 2;
 let playerPosX = 500
 let playerPosY = 300;
 let playerSpeed = 3;
-
-
+let booleanArray = window.booleanArray;
 // let squareX = 100;
 // let squareY = 100;
 // const squareSize = 100;
@@ -113,7 +44,13 @@ function keyPressed() {
     }
 }
 
+
 async function Movementloop() {
+    window.addEventListener('booleanArrayUpdated', function (event) {
+        // event.detail contains the booleanArray
+        let booleanArray = event.detail;
+        // Use booleanArray here...
+  
     if (booleanArray[1]) {
         playerPosX += playerSpeed;
     }
@@ -126,6 +63,7 @@ async function Movementloop() {
     if (booleanArray[0]) {
         playerPosY -= playerSpeed;
     }
+});
 }
 
 // function object_collision() {