Added customizible time limit

This commit is contained in:
leca 2023-08-02 07:17:23 +03:00
parent 5e063cae03
commit f49e9415b7
4 changed files with 50 additions and 12 deletions

View File

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

View File

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

View File

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

View File

@ -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")