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