diff --git a/index.js b/index.js
index 5a4421f..88e0077 100644
--- a/index.js
+++ b/index.js
@@ -10,7 +10,65 @@ const input_port = 1337;
// define canvas
var canvas_size_x = 100;
var canvas_size_y = 100;
+var canvas_background = 'ffffff';
+var canvas_content = [];
+// stats counter
+var pixel_count = 0;
+var pixel_count_flat = 0;
+var conn_count = 0;
+var conn_count_flat = 0;
+
+// FUNCTIONS
+// get color
+function get_color(x, y) {
+ if (canvas_content[x] != undefined) {
+ if (canvas_content[x][y] != undefined) {
+ return canvas_content[x][y];
+ }
+ }
+ return canvas_background;
+}
+
+// str to color
+function str_to_color(color) {
+ color = color.trim();
+ color = color.toLowerCase();
+ if (color.match(/^[a-f0-9]{6}$/i) == color) {
+ return color;
+ }
+ else if (color.match(/^[a-f0-9]{8}$/i) == color) {
+ return color.substr(0, 6);
+ }
+ else {
+ return false;
+ }
+}
+
+// color to HTML color
+function color_to_html(color) {
+ return '#' + color;
+}
+
+// save color to canvas content
+function color_to_canvas_content(x, y, color) {
+ if (canvas_content[x] == undefined) {
+ canvas_content[x] = [];
+ }
+ canvas_content[x][y] = color;
+}
+
+// STATS
+function stats() {
+ pixel_count_flat = pixel_count;
+ pixel_count = 0;
+ conn_count_flat = conn_count;
+ io.sockets.emit('stats', {pixel: pixel_count_flat, connections: conn_count_flat})
+
+}
+setInterval(() => stats(), 1000);
+
+// CONNECTIONS
// define static folder
app.use(express.static(__dirname + '/public'));
@@ -24,20 +82,44 @@ io.on('connection', function (socket){
var server = net.createServer();
server.on('connection', function (server_socket) {
+ conn_count++;
server_socket.setEncoding('utf8');
console.log('[INPUT] new input');
server_socket.on('data', function (data) {
var command = data.split(" ");
- if (command.length == 4) {
- if (command[0] == "PX") {
- var x = parseInt(command[1]);
- var y = parseInt(command[2]);
+ if (command[0] == "PX") {
+ var x = parseInt(command[1]);
+ var y = parseInt(command[2]);
+ if (x <= canvas_size_x && y <= canvas_size_y) {
if (!isNaN(x) && !isNaN(y)) {
- var color = command[3]
- io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color});
+ if (command[3] != undefined) {
+ console.log("c is there");
+ var color = str_to_color(command[3]);
+ console.log(color);
+ if (color !== false) {
+ console.log("c ok");
+ io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color_to_html(color)});
+ pixel_count++;
+ color_to_canvas_content(x, y, color);
+ }
+ else {
+ console.log("c not ok");
+ }
+ }
+ server_socket.write('PX ' + x + ' ' + y + ' ' + get_color(x, y) + '\n');
}
}
}
+ else if (command[0] == 'SIZE') {
+ server_socket.write('SIZE ' + canvas_size_x + ' ' + canvas_size_x + '\n');
+ }
+ else if (command[1] == 'STATS') {
+ server_socket.write('STATS px:' + pixel_count_flat + ' conn:' + conn_count_flat + '\n');
+ }
+ });
+
+ server_socket.on('close', function() {
+ conn_count--;
});
});
diff --git a/public/index.html b/public/index.html
index 268817a..045b0ca 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,7 @@
<body>
<canvas class="display" ></canvas>
+ <div class="stats"></div>
<script src="socket.io.js"></script>
<script src="main.js"></script>
diff --git a/public/main.js b/public/main.js
index 8b024d8..aff4831 100644
--- a/public/main.js
+++ b/public/main.js
@@ -2,7 +2,10 @@
(function() {
+ var stats = document.getElementsByClassName('stats')[0];
+
var socket = io();
+
var canvas = document.getElementsByClassName('display')[0];
var context = canvas.getContext('2d');
@@ -10,8 +13,8 @@
var canvas_size_y = 100;
socket.on('setting', onSetting);
-
socket.on('draw', onDraw);
+ socket.on('stats', onStats);
window.addEventListener('resize', onResize, false);
onResize();
@@ -38,6 +41,7 @@
}
function onDraw(data){
+ console.log(data);
var w = canvas.width;
var h = canvas.height;
if (data.type == 'pixel') {
@@ -45,6 +49,10 @@
}
}
+ function onStats(data) {
+ stats.innerHTML = 'px/s: ' + data.pixel + ' connections: ' + data.connections;
+ }
+
// make the canvas fill its parent
function onResize() {
canvas.width = window.innerWidth;
diff --git a/public/style.css b/public/style.css
index 71c129a..000fdba 100644
--- a/public/style.css
+++ b/public/style.css
@@ -17,3 +17,12 @@ html, body {
bottom: 0;
top: 0;
}
+
+.stats {
+ z-index: 100;
+ position: absolute;
+ background-color: #00000022;
+ padding: 3px;
+ left: 10px;
+ bottom: 10px;
+}