fix: client wasn't conneting if server is not restarted meanwhile

package.json

@@ -5,6 +5,7 @@
   "main": "server.js",
   "dependencies": {
     "body-parser": "^1.13.3",
+    "cookie-parser": "^1.3.5",
     "express": "^4.13.3",
     "socket.io": "^1.3.6"
   },

public/index.html

@@ -5,8 +5,7 @@
 	<!-- <link rel="stylesheet" type="text/css" href="style/style.css"> -->
     <link rel="stylesheet/less" type="text/css" href="style/style.less" />
     <script type="text/javascript" src="scripts/less.min.js"></script>
-    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
-    <script type="text/javascript" src="scripts/functions.js"></script>
+    <script type="text/javascript" src="scripts/socket.io.js"></script>
 
 
 </head>
@@ -15,6 +14,8 @@
     <section id="honeyComb">
     	
     </section>
+    <script type="text/javascript" src="scripts/socketSetup.js"></script>
+    <script type="text/javascript" src="scripts/functions.js"></script>
 
 </body>
 </html>

public/scripts/functions.js

@@ -1,18 +1,19 @@
 function updateDimensions( dimension ){
 	less.modifyVars({"@sizeWidth":dimension+"px"});
 }
-function populateHoneycomb( ){
+function populateHoneycomb( honeyCells ){
 
-	honeyCells = jsonExample;
+	// honeyCells = jsonExample;
 	var height = "innerHeight" in window 
                ? window.innerHeight
                : document.documentElement.offsetHeight;
     var width = "innerWidth" in window 
                ? window.innerWidth
                : document.documentElement.offsetWidth;
-    var cellWidth = width/(honeyCells.width+0.7);
+    var cellWidth = (width - honeyCells.width)/(honeyCells.width+0.5);
     updateDimensions( cellWidth );
     var honeyComb = document.getElementById("honeyComb");
+    honeyComb.innerHTML = "";
 
     for (var i = honeyCells.height - 1; i >= 0; i--) {
     	var even = (i%2 == 0) ? "even" : "";
@@ -43,28 +44,21 @@ function populateHoneycomb( ){
 
 
     };
+        setFilled( honeyCells );
+
 }
-function setFilled(){
-		honeyCells = jsonExample;
+function setFilled( honeyCells ){
+		// honeyCells = jsonExample;
 
 	var hexCells = document.getElementsByClassName("hex");
-	for (var i = honeyCells.filled.length - 1; i >= 0; i--) {
-			
-			honeyCell = hexCells[ (honeyCells.filled[i].x * honeyCells.width)+honeyCells.filled[i].y];
+
+	for (var i =  0; i < honeyCells.filled.length; i++) {
+			var x = honeyCells.filled[i].x;
+			var y = honeyCells.filled[i].y;
+			var filledCell = ( y * honeyCells.width ) + x;
+			var honeyCell = hexCells[ filledCell ];
 			honeyCell.className += " disabled";
 		};	
 }
 	
-jsonExample = {"height":15,"width":15,"sourceSeeds":[0],"units":[{"members":[{"x":0,"y":0}],"pivot":{"x":0,"y":0}}],"id":1,"filled":[{"x":2,"y":4},{"x":3,"y":4},{"x":4,"y":4},{"x":5,"y":4},{"x":6,"y":4},{"x":11,"y":4},{"x":2,"y":5},{"x":8,"y":5},{"x":11,"y":5},{"x":2,"y":6},{"x":11,"y":6},{"x":2,"y":7},{"x":3,"y":7},{"x":4,"y":7},{"x":8,"y":7},{"x":11,"y":7},{"x":2,"y":8},{"x":9,"y":8},{"x":11,"y":8},{"x":2,"y":9},{"x":8,"y":9},{"x":2,"y":10},{"x":3,"y":10},{"x":4,"y":10},{"x":5,"y":10},{"x":6,"y":10},{"x":9,"y":10},{"x":11,"y":10}],"sourceLength":100};
-
-var socket = io.connect("/"); 
-            /*Initializing the connection with the server via websockets */
-socket.on("message",function(message){  
-    /*
-        When server sends data to the client it will trigger "message" event on the client side , by 
-        using socket.on("message") , one cna listen for the ,message event and associate a callback to 
-        be executed . The Callback function gets the dat sent from the server 
-    */
-    console.log("Message from the server arrived")
-    console.log(message); /*converting the data into JS object */
-});
+// jsonExample = {"height":15,"width":15,"sourceSeeds":[0],"units":[{"members":[{"x":0,"y":0}],"pivot":{"x":0,"y":0}}],"id":1,"filled":[{"x":2,"y":4},{"x":3,"y":4},{"x":4,"y":4},{"x":5,"y":4},{"x":6,"y":4},{"x":11,"y":4},{"x":2,"y":5},{"x":8,"y":5},{"x":11,"y":5},{"x":2,"y":6},{"x":11,"y":6},{"x":2,"y":7},{"x":3,"y":7},{"x":4,"y":7},{"x":8,"y":7},{"x":11,"y":7},{"x":2,"y":8},{"x":9,"y":8},{"x":11,"y":8},{"x":2,"y":9},{"x":8,"y":9},{"x":2,"y":10},{"x":3,"y":10},{"x":4,"y":10},{"x":5,"y":10},{"x":6,"y":10},{"x":9,"y":10},{"x":11,"y":10}],"sourceLength":100};

public/scripts/socketSetup.js

@@ -0,0 +1,18 @@
+
+var socket = io(); 
+            /*Initializing the connection with the server via websockets */
+socket.emit('ackMessage', "true");
+socket.on("jsonHoneycomb",function(message){  
+    /*
+        When server sends data to the client it will trigger "message" event on the client side , by 
+        using socket.on("message") , one cna listen for the ,message event and associate a callback to 
+        be executed . The Callback function gets the dat sent from the server 
+    */
+    console.log("Message from the server arrived")
+    var honeyCells = JSON.parse(message);
+    populateHoneycomb( honeyCells );
+    socket.emit('ackMessage', "true");
+
+});
+
+

public/style/style.less

@@ -1,7 +1,8 @@
-@disabledColor: #efefef;
+@disabledColor: #FFDDA0;
 @sizeWidth: 100px;
 @border: 1px;
 @sizeHeight: @sizeWidth/sqrt(3);
+@color: #efefef;
 
 html, body{
 	margin: 0;
@@ -26,31 +27,31 @@ body{
 	
 	.top {
 		width: 0;
-		border-bottom: @sizeHeight/2  solid #6C6;
+		border-bottom: @sizeHeight/2  solid @color;
 		border-left: @sizeWidth/2  solid transparent;
 		border-right: @sizeWidth/2  solid transparent;
 	}
 	.middle {
 		width: @sizeWidth;
 		height: @sizeHeight;
-		background: #6C6;
+		background: @color;
 	}
 	.bottom {
 		width: 0;
-		border-top: @sizeHeight/2 solid #6C6;
+		border-top: @sizeHeight/2 solid @color;
 		border-left: @sizeWidth/2 solid transparent;
 		border-right: @sizeWidth/2 solid transparent;
 	}
 
 	&.disabled{
-		.top:extend(.top){
+		.top:extend(.hex .top){
 			border-bottom-color: @disabledColor; 
 
 		}
-		.middle:extend(.middle){
+		.middle:extend(.hex .middle){
 			background: @disabledColor; 
 		}
-		.bottom:extend(.bottom){
+		.bottom:extend(.hex .bottom){
 			border-top-color: @disabledColor; 
 		}
 	}

server.js

@@ -2,42 +2,57 @@ var express = require('express');
 var http = require('http');
 var io = require('socket.io');
 var bodyParser = require('body-parser');
-
+var cookieParser = require('cookie-parser');
  
 var app = express();
 
 app.use(express.static('./public'));
 //Specifying the public folder of the server to make the html accesible using the static middleware
-
+app.use(cookieParser());
 
 var jsonParser = bodyParser.json()
  
 // create application/x-www-form-urlencoded parser 
-var urlencodedParser = bodyParser.urlencoded({ extended: true })
+var urlencodedParser = bodyParser.urlencoded({ extended: false })
  
 // POST /login gets urlencoded bodies 
 
 
 
+function findSocketByCookie(cookie) {
+  for(var i in io.sockets.connected) {
+    var socket = io.sockets.connected[i];
+    if(socket.handshake.headers.cookie.indexOf(cookie) !== -1){
+      return socket;
+    }
+  }
+}
+
+app.post('/show', urlencodedParser, function (req, res) {
+  var socket = findSocketByCookie(req.cookies.myUniqueCookie);
+  res.sendStatus(200);
+  console.log("Sending json to live interface");
+  socket.emit("jsonHoneycomb", req.body.honeyComb);
+});
 
 var server = http.createServer(app).listen(8080);
+
 console.log("Listening on port 8080");
 console.log("Send jsons to /show please.")
 //Server listens on the port 8124
-io = io.listen(server); 
+var io = io.listen(server); 
 /*initializing the websockets communication , server instance has to be sent as the argument */
- 
-io.sockets.on("connection",function(socket){
-    /*Associating the callback function to be executed when client visits the page and 
-      websocket connection is made */
-    console.log("New Connection");
-    
-    
-    app.post('/show', urlencodedParser, function (req, res) {
-
-      res.send('200');
-      console.log("sending porcoddio");
-      socket.emit("message", "porcoddio");
+io.sockets.on('connection', function(socket){
+
+	console.log("New Client Connected.");
+
+    socket.on('disconnect', function () {
+      console.log("Client disconnected.")
     });
 
-});
+    socket.on('ackMessage', function(msg){
+      if(msg == "true"){
+        console.log('Message received.');
+      }
+  });
+});