diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index e6adea6..1772bee 100644
--- a/.gitlab-ci.yml
+++ b/.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
diff --git a/docs/index.md b/docs/index.md
index 9906bdb..a2e6a80 100644
--- a/docs/index.md
+++ b/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') }}
\ No newline at end of file
diff --git a/webdev/.gitkeep b/webdev/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/webdev/Serial.js b/webdev/Serial.js
new file mode 100644
index 0000000..5b163e5
--- /dev/null
+++ b/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!");
+}
\ No newline at end of file
diff --git a/webdev/game.js b/webdev/game.js
new file mode 100644
index 0000000..3e3b4e0
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/webdev/index.html b/webdev/index.html
new file mode 100644
index 0000000..f1ae588
--- /dev/null
+++ b/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>
\ No newline at end of file