From f49e9415b75e64b667666d443a5a4a17a49c3021 Mon Sep 17 00:00:00 2001 From: leca Date: Wed, 2 Aug 2023 07:17:23 +0300 Subject: [PATCH] Added customizible time limit --- html/logic.js | 28 ++++++++++++++++++++++++---- settings.json | 3 ++- src/index.js | 28 +++++++++++++++++++++------- views/index.pug | 3 +++ 4 files changed, 50 insertions(+), 12 deletions(-) diff --git a/html/logic.js b/html/logic.js index e4db91f..df7261a 100644 --- a/html/logic.js +++ b/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); diff --git a/settings.json b/settings.json index 6e87484..b94cd1a 100644 --- a/settings.json +++ b/settings.json @@ -4,5 +4,6 @@ "boardWidth": 1920, "boardHeight": 1080, "serverAddress": "foxarmy.org", - "saveFile": "../board.png" + "saveFile": "../board.png", + "timeBetweenPixels": 5 } \ No newline at end of file diff --git a/src/index.js b/src/index.js index a17b094..9a65b0a 100644 --- a/src/index.js +++ b/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); diff --git a/views/index.pug b/views/index.pug index 4017bff..5c8ad5f 100644 --- a/views/index.pug +++ b/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") \ No newline at end of file