leca
/
pixelbattle
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
html/index.html
View File

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

16
index.js
View File

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