clerie/pixelnode
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reloading the page dont't causes image lost anymore

Browse Source
This commit is contained in:
clerie 2018-04-04 15:48:10 +02:00
parent da1ff37c5a
commit 9b3aed22f0
3 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.js
View File

@ -91,6 +91,7 @@ io.on('connection', function (socket){
port: input_port port: input_port
} }
}); });
socket.emit('drawn', canvas_content);
}); });
// input socket // input socket
@ -110,7 +111,7 @@ server.on('connection', function (server_socket) {
if (command[3] != undefined) { if (command[3] != undefined) {
var color = str_to_color(command[3]); var color = str_to_color(command[3]);
if (color !== false) { if (color !== false) {
io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color_to_html(color)}); io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color});
pixel_count++; pixel_count++;
color_to_canvas_content(x, y, color); color_to_canvas_content(x, y, color);
} }
@ -122,7 +123,7 @@ server.on('connection', function (server_socket) {
else if (command[0] == 'SIZE') { else if (command[0] == 'SIZE') {
server_socket.write('SIZE ' + canvas_size_x + ' ' + canvas_size_x + '\n'); server_socket.write('SIZE ' + canvas_size_x + ' ' + canvas_size_x + '\n');
} }
else if (command[1] == 'STATS') { else if (command[0] == 'STATS') {
server_socket.write('STATS px:' + pixel_count_flat + ' conn:' + conn_count_flat + '\n'); server_socket.write('STATS px:' + pixel_count_flat + ' conn:' + conn_count_flat + '\n');
} }
}); });

19
public/main.js
View File

@ -14,6 +14,7 @@
var canvas_size_y = 100; var canvas_size_y = 100;
socket.on('setting', onSetting); socket.on('setting', onSetting);
socket.on('drawn', onDrawn);
socket.on('draw', onDraw); socket.on('draw', onDraw);
socket.on('stats', onStats); socket.on('stats', onStats);
@ -51,12 +52,11 @@
} }
function drawPixel(x, y, color){ function drawPixel(x, y, color){
context.fillStyle = color; context.fillStyle = '#' + color;
context.fillRect(x - (canvas.width * (0.5/canvas_size_x)),y - (canvas.height * (0.5/canvas_size_y)), canvas.width * (1/canvas_size_x), canvas.height * (1/canvas_size_y)); context.fillRect(x - (canvas.width * (0.5/canvas_size_x)),y - (canvas.height * (0.5/canvas_size_y)), canvas.width * (1/canvas_size_x), canvas.height * (1/canvas_size_y));
} }
function onDraw(data){ function onDraw(data){
console.log(data);
var w = canvas.width; var w = canvas.width;
var h = canvas.height; var h = canvas.height;
if (data.type == 'pixel') { if (data.type == 'pixel') {
@ -64,6 +64,21 @@
} }
} }
function onDrawn(data){
console.log(data);
var w = canvas.width;
var h = canvas.height;
data.forEach(function (d, x){
if (d !== null) {
d.forEach(function (c, y) {
if (c !== null) {
drawPixel((x / canvas_size_x) * w, (y / canvas_size_y) * h, c);
}
});
}
});
}
function onStats(data) { function onStats(data) {
stats.innerHTML = 'px/s: ' + data.pixel + ' connections: ' + data.connections; stats.innerHTML = 'px/s: ' + data.pixel + ' connections: ' + data.connections;
} }

6
public/style.css
View File

@ -6,6 +6,7 @@ html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #ffffff;
} }
.display { .display {
@ -16,12 +17,13 @@ html, body {
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
background-color: #000000;
} }
.stats { .stats {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
background-color: #00000022; background-color: #333333aa;
padding: 3px; padding: 3px;
left: 10px; left: 10px;
bottom: 10px; bottom: 10px;
@ -30,7 +32,7 @@ html, body {
.play { .play {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
background-color: #00000022; background-color: #333333aa;
padding: 3px; padding: 3px;
left: 10px; left: 10px;
right: 10px; right: 10px;