Added customizible time limit

html/logic.js

@@ -1,17 +1,29 @@
 var serverAddress = document.getElementById("server-address").value;
 var serverPort = document.getElementById("server-port").value
 var socket = new WebSocket(`ws://${serverAddress}:${serverPort}`);
+
 var canvas = document.getElementById("board");
 var colorInput = document.getElementById("color");
 var canvasHidden = document.getElementById("hidden");
+var timer = document.getElementById("timer");
+
 var ctx = canvas.getContext("2d");
 var ctx2 = canvasHidden.getContext("2d");
+var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
 var currentColor = "#000000"
+
+var timeBetweenPixels = undefined;
+
 canvas.width = 1920;
 canvas.height = 1080;
 canvasHidden.width = 1920;
 canvasHidden.height = 1080;
-var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
+
+function drawTimer() {
+    timer.textContent = Number(timer.textContent) > 0? 
+    Number(timer.textContent - 1):
+    0
+}
 
 function connect() {
     socket.close();
@@ -19,7 +31,7 @@ function connect() {
     serverPort = document.getElementById("server-port").value
     console.log(`Connecting ${serverAddress}:${serverPort}`)
     socket = new WebSocket(`ws://${serverAddress}:${serverPort}`)
-
+    timer.textContent="Board is loading, please wait";
     socket.addEventListener("open", (event) => {
         socket.send("{\"code\":0}");
     });
@@ -32,6 +44,12 @@ function connect() {
             let content = packet.content
             switch (code){
                 case 0:
+                    timeBetweenPixels = packet.timeBetweenPixels;
+                    timer.textContent = 0;
+                    setInterval(() => {
+                        drawTimer();
+                    }, 1000);
+                    console.log(`time between pixels ${timeBetweenPixels}`)
                     //Ineffective way to do that, fix that later ;)
                     let converted = Uint8ClampedArray.from(content)
     
@@ -46,7 +64,9 @@ function connect() {
                         g: contentJson.g,
                         b: contentJson.b
                     }
-                    
+
+                    if (packet.pixelOwner == true) timer.textContent = timeBetweenPixels;
+
                     drawPixel(contentJson.x * 4, contentJson.y * 4, color)
                     redraw();
                 break;
@@ -162,7 +182,7 @@ window.onload = function() {
                 socket.send(JSON.stringify(packet));
                 // console.log(`{\"code\":1, \"content\":${pixel}}`)
 
-                drawPixel(point.x, point.y, undefined);
+                // drawPixel(point.x, point.y, undefined);
         }
     },false);