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);
   

settings.json

@@ -4,5 +4,6 @@
     "boardWidth": 1920,
     "boardHeight": 1080,
     "serverAddress": "foxarmy.org",
-    "saveFile": "../board.png"
+    "saveFile": "../board.png",
+    "timeBetweenPixels": 5
 }

src/index.js

@@ -16,6 +16,7 @@ const serverAddress = config.serverAddress;
 const saveFile = config.saveFile;
 const boardWidth = config.boardWidth;
 const boardHeight = config.boardHeight;
+const timeBetweenPixels = config.timeBetweenPixels;
 
 var toQuit = false;
 
@@ -50,7 +51,7 @@ const server = new WebSocket.Server({
 });
 
 let clients = [];
-
+let lastPixelTimestamp = [];
 const evaulatePixelNumber = (x, y) => {   
     let pixelNumber;
     if (y > 0)
@@ -61,9 +62,10 @@ const evaulatePixelNumber = (x, y) => {
 }
 
 server.on('connection', function(client) {
+    console.log(`New client has connected, assigning id ${clients.length} to it.`)
+    client.id = clients.length;
     clients.push(client);
 
-  // When you receive a message, send that message to every socket.
   client.on('message', function(msg) {
     let packet, content, code;
     try {
@@ -76,22 +78,34 @@ server.on('connection', function(client) {
         case 0:
             response.code = 0;
             response.content = board;
+            response.timeBetweenPixels = timeBetweenPixels;
             client.send(Buffer.from(JSON.stringify(response)));
         break;
         case 1:
             response.code = 1;
             response.content = content;
-            console.log(`response content ${response.content}`);
+            response.pixelOwner = false;
             contentJson = JSON.parse(content);
             let pixelNumber = evaulatePixelNumber(contentJson.x * 4, contentJson.y * 4);
-            if (contentJson.x < 0 || contentJson.y < 0) {
-                break;
-            }
+            if (contentJson.x < 0 || contentJson.y < 0) client.send("{\"code\":-1}");
+
             board[pixelNumber + 0] = contentJson.r;
             board[pixelNumber + 1] = contentJson.g;
             board[pixelNumber + 2] = contentJson.b;
             board[pixelNumber + 3] = 255;
-            clients.forEach(c => c.send(Buffer.from(JSON.stringify(response))));
+
+            let unixTime = Math.floor(new Date().getTime() / 1000);
+            if (lastPixelTimestamp[client.id] == undefined || unixTime - lastPixelTimestamp[client.id] > timeBetweenPixels - 1) {
+                lastPixelTimestamp[client.id] = unixTime;
+                for (let i = 0; i < clients.length; i ++) {
+                    response.pixelOwner = i == client.id? true : false;
+                    clients[i].send(Buffer.from(JSON.stringify(response)));
+                } 
+                // clients.forEach(c => c.send(Buffer.from(JSON.stringify(response))));
+                // client.send("{\"code\":2}")
+            } else {
+                // client.send("{\"code\":3}")
+            }
         break;
         default:
             console.log("Packet cannot be understood: ", packet);

views/index.pug

@@ -14,6 +14,9 @@ html(lang='en')
         p
             input(type="color" id="color")
             input(type="button" id="submicColor" value="change color" onclick="changeColor()")
+            br
+            | timer: 
+            b(id="timer")
         canvas(id="board" width="1920" height="1080" style="border:1px solid #000000;" display="block")
         canvas(hidden id="hidden" width="1920" height="1080")
         script(type="text/javascript" src="./logic.js")