|
function updateDimensions( dimension ){
|
|
less.modifyVars({"@sizeWidth":dimension+"px"});
|
|
}
|
|
function populateHoneycomb( ){
|
|
|
|
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);
|
|
updateDimensions( cellWidth );
|
|
var honeyComb = document.getElementById("honeyComb");
|
|
|
|
for (var i = honeyCells.height - 1; i >= 0; i--) {
|
|
var even = (i%2 == 0) ? "even" : "";
|
|
|
|
var container = document.createElement('div');
|
|
container.className = "hex-row " + even;
|
|
honeyComb.appendChild(container);
|
|
|
|
for (var j = honeyCells.width - 1; j >= 0; j--) {
|
|
|
|
var hexCell = document.createElement("div");
|
|
hexCell.className = "hex";
|
|
|
|
container.appendChild(hexCell);
|
|
|
|
var topPart = document.createElement('div');
|
|
topPart.className = "top";
|
|
var middlePart = document.createElement('div');
|
|
middlePart.className = "middle";
|
|
var bottomPart = document.createElement('div');
|
|
bottomPart.className = "bottom";
|
|
|
|
hexCell.appendChild(topPart);
|
|
hexCell.appendChild(middlePart);
|
|
hexCell.appendChild(bottomPart);
|
|
|
|
};
|
|
|
|
|
|
};
|
|
}
|
|
function setFilled(){
|
|
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];
|
|
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 */
|
|
});
|