fixed wrong full sync

This commit is contained in:
leca 2023-07-31 20:46:04 +03:00
parent 449099dd51
commit 2730b6d871
2 changed files with 21 additions and 36 deletions

View File

@ -4,7 +4,7 @@
<title>Pixel Battle</title> <title>Pixel Battle</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body style="background-color: grey;">
<p> <p>
<input type="color" id="color" /> <input type="color" id="color" />
<input type="button" id="submitColor" value="change color" onclick="changeColor()"/> <input type="button" id="submitColor" value="change color" onclick="changeColor()"/>
@ -26,7 +26,6 @@
canvasHidden.width = 1920; canvasHidden.width = 1920;
canvasHidden.height = 1080; canvasHidden.height = 1080;
var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height) var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
// imgData.data.fill(255);
function drawPixel(x, y, color) { function drawPixel(x, y, color) {
let pixelNumber; let pixelNumber;
@ -34,27 +33,16 @@
pixelNumber = (y) * canvas.width + x pixelNumber = (y) * canvas.width + x
if (y == 0) if (y == 0)
pixelNumber = x pixelNumber = x
if (color == undefined) { if (color == undefined) rgbColor = hexToRgb(currentColor);
let rgbColor = hexToRgb(currentColor); for (let l = 0; l < 4; l ++)
for (let l = 0; l < 4; l ++) for (let l = 0; l < 5; l ++){
for (let l = 0; l < 5; l ++){ imgData.data[pixelNumber + 0] = color == undefined? rgbColor.r : color.r;
imgData.data[pixelNumber + 0] = rgbColor.r; imgData.data[pixelNumber + 1] = color == undefined? rgbColor.g : color.g;
imgData.data[pixelNumber + 1] = rgbColor.g; imgData.data[pixelNumber + 2] = color == undefined? rgbColor.b : color.b;
imgData.data[pixelNumber + 2] = rgbColor.b; imgData.data[pixelNumber + 3] = 255;
imgData.data[pixelNumber + 3] = 255; }
}
redraw(); redraw();
} else {
for (let l = 0; l < 4; l ++)
for (let l = 0; l < 5; l ++){
imgData.data[pixelNumber + 0] = color.r;
imgData.data[pixelNumber + 1] = color.g;
imgData.data[pixelNumber + 2] = color.b;
imgData.data[pixelNumber + 3] = 255;
}
}
} }
function redraw() { function redraw() {
@ -82,8 +70,10 @@
case 0: case 0:
//Ineffective way to do that, fix that later ;) //Ineffective way to do that, fix that later ;)
let converted = Uint8ClampedArray.from(content) let converted = Uint8ClampedArray.from(content)
for (let i = 0; i < imgData.data.length; i ++)
for (let i = 0; i < converted.length; i ++)
imgData.data[i] = converted[i] imgData.data[i] = converted[i]
console.log(imgData.data)
redraw(); redraw();
break; break;
case 1: case 1:
@ -105,11 +95,6 @@
window.onload = function() { window.onload = function() {
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
trackTransforms(ctx); trackTransforms(ctx);
redraw();
var lastX=canvas.width/2, lastY=canvas.height/2; var lastX=canvas.width/2, lastY=canvas.height/2;
var dragStart,dragged; var dragStart,dragged;

View File

@ -6,7 +6,7 @@ const httpPort = config.httpPort
const appPort = config.appPort const appPort = config.appPort
var board = new Array(config.boardHeight * config.boardWidth * 4); var board = new Array(config.boardHeight * config.boardWidth * 4);
board.fill(127); board.fill(255);
const server = new WebSocket.Server({ const server = new WebSocket.Server({
port: appPort port: appPort
@ -28,18 +28,18 @@ server.on('connection', function(client) {
// When you receive a message, send that message to every socket. // When you receive a message, send that message to every socket.
client.on('message', function(msg) { client.on('message', function(msg) {
let packet; let packet, content, code;
try { try {
packet = JSON.parse(msg.toString()); packet = JSON.parse(msg.toString());
content = packet.content content = packet.content
code = packet.code code = packet.code
} catch (e) {console.log(e)} } catch (e) {console.log(e)}
console.log(packet)
let response = {}; let response = {};
switch(code) { switch(code) {
case 0: case 0:
response.code = 0; response.code = 0;
response.content = board; response.content = board;
console.log(Buffer.from(JSON.stringify(response)))
client.send(Buffer.from(JSON.stringify(response))); client.send(Buffer.from(JSON.stringify(response)));
break; break;
case 1: case 1:
@ -47,14 +47,14 @@ server.on('connection', function(client) {
response.content = content; response.content = content;
console.log(`response content ${response.content}`) console.log(`response content ${response.content}`)
contentJson = JSON.parse(content); contentJson = JSON.parse(content);
let pixelNumber = evaulatePixelNumber(contentJson.x, contentJson.y) let pixelNumber = evaulatePixelNumber(contentJson.x * 4, contentJson.y * 4);
if (contentJson.x < 0 || contentJson.y < 0) { if (contentJson.x < 0 || contentJson.y < 0) {
break; break;
} }
board[pixelNumber + 0] = contentJson.r board[pixelNumber + 0] = contentJson.r;
board[pixelNumber + 1] = contentJson.g board[pixelNumber + 1] = contentJson.g;
board[pixelNumber + 2] = contentJson.b board[pixelNumber + 2] = contentJson.b;
board[pixelNumber + 3] = 255 board[pixelNumber + 3] = 255;
clients.forEach(c => c.send(Buffer.from(JSON.stringify(response)))); clients.forEach(c => c.send(Buffer.from(JSON.stringify(response))));
break; break;
default: default: