Merge branch 'main' of ssh://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-2/cuujooceevii61

.gitlab-ci.yml

@@ -12,6 +12,8 @@ pages:
   script:
     - time mkdocs build --site-dir public
     - time cp -rf web public
+    - time cp -rf webdev public
+
   artifacts:
     paths:
       - public

docs/index.md

@@ -5,6 +5,6 @@ die jullie gaan schrijven voor jullie project.
 
 Maak je pagina's vooral leuk door plaatjes, video's en diagrammen toe te voegen; dit kan allemaal in markdown!
 
-Klik [hier](/web/) om je game te kunnen spelen.
+Klik [hier](/web/) of [hier](/webdev/) om je game te kunnen spelen.
 
 {{ mdocotion_header('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') }}

webdev/Serial.js

@@ -0,0 +1,70 @@
+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');
+                        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;
+            }
+        }
+    }
+    
+}
+export {booleanArray};
+
+// Sluit de poort
+async function disconnect() {
+    await reader.cancel();
+    await port.close();
+    console.log("Port is closed!");
+}

webdev/game.js

@@ -0,0 +1,33 @@
+let Playerposx = 500;
+let Playerposy = 300;
+import {booleanArray} from './Serial.js';
+
+if (booleanArray) {
+    if (booleanArray[1]) {
+        Playerposx += 1;}
+    if (booleanArray[3]) {
+        Playerposx -= 1;}
+    if (booleanArray[0]) {
+        Playerposy += 1;}
+    if (booleanArray[2]) {
+        Playerposy -= 1;}
+    
+}
+
+// the function setup() is called once when the page is loaded
+function setup(){
+    // create a canvas element and append it to the body
+    createCanvas(1250, 600);    
+    
+    // disable the outline of shapes
+    noStroke();
+}
+
+// the function draw() is called every frame
+function draw(){
+    // clear the background with a transparent black color
+    background(0,0,0,10);
+
+    // draw a circle at the mouse position
+    circle(Playerposx, Playerposy, 50);
+}

webdev/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Open Dag Game</title>
+
+    <!-- support p5-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
+    <script src="game.js"></script>
+    <script src="Serial.js"></script>
+</head>
+<body>
+    
+</body>
+</html>