|
function updateDimensions( dimension ){
|
|
less.modifyVars({"@sizeWidth":dimension+"px"});
|
|
}
|
|
function populateHoneycomb( honeyCells ){
|
|
|
|
// 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)/(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" : "";
|
|
|
|
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);
|
|
|
|
};
|
|
|
|
|
|
};
|
|
setFilled( honeyCells );
|
|
|
|
}
|
|
function setFilled( honeyCells ){
|
|
// honeyCells = jsonExample;
|
|
|
|
var hexCells = document.getElementsByClassName("hex");
|
|
|
|
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};
|