|
|
|
@ -1,181 +1,151 @@ |
|
|
|
var points = 0; |
|
|
|
var totalRenders = 0; |
|
|
|
function updateDimensions( dimension ){ |
|
|
|
less.modifyVars({"@sizeWidth":dimension+"px"}); |
|
|
|
var urlToImageMap = {}; |
|
|
|
|
|
|
|
function loadImageGroup(urls, onCompleteFunc) { |
|
|
|
var numImagesNotYetLoaded = urls.length; |
|
|
|
urlToImageMap = {}; |
|
|
|
var markLoaded = function() { |
|
|
|
if (--numImagesNotYetLoaded == 0) |
|
|
|
onCompleteFunc(urlToImageMap); |
|
|
|
} |
|
|
|
|
|
|
|
for (var i = 0; i < urls.length; i++) { |
|
|
|
var img = new Image(); |
|
|
|
img.onload = markLoaded; |
|
|
|
img.src = urls[i]; |
|
|
|
urlToImageMap[urls[i]] = img; |
|
|
|
} |
|
|
|
} |
|
|
|
function prePopulate(honeyCells){ |
|
|
|
var honeyCells = JSON.parse(honeyCells); |
|
|
|
var urls = [ |
|
|
|
'images/neutral.png', |
|
|
|
'images/active.png', |
|
|
|
'images/touched.png', |
|
|
|
'images/unit.png', |
|
|
|
|
|
|
|
if( honeyCells.constructor === Array){ |
|
|
|
for (var i = 0; i < honeyCells.length; i++) { |
|
|
|
populateHoneycomb( honeyCells[i], i ); |
|
|
|
|
|
|
|
}; |
|
|
|
}else{ |
|
|
|
populateHoneycomb( honeyCells , 0); |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
loadImageGroup(urls, function(urlToImageMap) { |
|
|
|
//all are loaded. draw to canvas here
|
|
|
|
if( honeyCells.constructor === Array){ |
|
|
|
for (var i = 0; i < honeyCells.length; i++) { |
|
|
|
populateHoneycomb( honeyCells[i], i ); |
|
|
|
|
|
|
|
}; |
|
|
|
}else{ |
|
|
|
document.getElementById("honeyComb").innerHTML=""; |
|
|
|
populateHoneycomb( honeyCells , 0); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function populateHoneycomb( honeyCells , index){ |
|
|
|
|
|
|
|
|
|
|
|
// honeyCells = jsonExample;
|
|
|
|
function populateHoneycomb( honeyCells , index){ |
|
|
|
|
|
|
|
var height = "innerHeight" in window |
|
|
|
? window.innerHeight |
|
|
|
: document.documentElement.offsetHeight; |
|
|
|
var width = "innerWidth" in window |
|
|
|
? window.innerWidth |
|
|
|
: document.documentElement.offsetWidth; |
|
|
|
|
|
|
|
// var cellWidth = ( height/honeyCells.height )*Math.sqrt(3);
|
|
|
|
// if( width/honeyCells.width < height/honeyCells.height ){
|
|
|
|
|
|
|
|
var cellWidth = (width - honeyCells.width)/(honeyCells.width+1); |
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
updateDimensions( cellWidth ); |
|
|
|
|
|
|
|
var horizontal = false; |
|
|
|
if(width/height > 1){ |
|
|
|
horizontal = true; |
|
|
|
} |
|
|
|
|
|
|
|
var honeyCombHorizontal = false; |
|
|
|
|
|
|
|
if( honeyCells.width/honeyCells.height > 1){ |
|
|
|
honeyCombHorizontal = true; |
|
|
|
} |
|
|
|
|
|
|
|
var honeyComb = document.getElementById("honeyComb"); |
|
|
|
var renderedHoneyComb = document.getElementById("renderedHoneyComb"); |
|
|
|
renderedHoneyComb.innerHTML=""; |
|
|
|
if( typeof honeyCells.score == "undefined"){ |
|
|
|
var cellWidth = width/(honeyCells.width); |
|
|
|
var cellHeigth = (cellWidth / Math.sqrt(3))*2; |
|
|
|
var canvas = document.createElement("canvas"); |
|
|
|
canvas.id = "canvas_"+index; |
|
|
|
canvas.width = honeyCells.width*cellWidth; |
|
|
|
var heightDifference = 0; |
|
|
|
for( var i = 0; i < honeyCells.height; i++){ |
|
|
|
heightDifference = ((cellHeigth-(cellHeigth/2))/2)*i; |
|
|
|
} |
|
|
|
canvas.height = honeyCells.height*cellHeigth - heightDifference; |
|
|
|
document.getElementById("honeyComb").appendChild(canvas); |
|
|
|
|
|
|
|
canvas.setAttribute("data-index", index); |
|
|
|
|
|
|
|
if( typeof honeyCells.score == "undefined"){ |
|
|
|
honeyCells.score = 0; |
|
|
|
} |
|
|
|
honeyComb.innerHTML = "<div class='honeycombIndex'>Index: "+index+"</div>"; |
|
|
|
honeyComb.innerHTML += "<div class='honeycombScore'>Score:"+honeyCells.score+"</div>"; |
|
|
|
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
canvas.setAttribute("data-score", honeyCells.score ); |
|
|
|
canvas.className += " canvasRendered"; |
|
|
|
if(index == 0){ |
|
|
|
canvas.className += " visible"; |
|
|
|
updateLabels(document.getElementById("canvas_0")); |
|
|
|
} |
|
|
|
var context = canvas.getContext('2d'); |
|
|
|
|
|
|
|
for (var i = 0; i < honeyCells.height; i++) { |
|
|
|
var even = (i%2 == 0) ? true : false; |
|
|
|
for (var j = 0; j < honeyCells.width; j++) { |
|
|
|
var startx = (even) ? j*cellWidth : (j*cellWidth)+(cellWidth*0.5); |
|
|
|
var starty = i*cellHeigth-((cellHeigth-(cellHeigth/2))/2)*i; |
|
|
|
context.drawImage(urlToImageMap['images/neutral.png'], startx, starty , cellWidth, cellHeigth); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
addHexDetails( honeyCells ); |
|
|
|
|
|
|
|
renderImage( index ); |
|
|
|
totalRenders++; |
|
|
|
removeHexs(); |
|
|
|
addDetails( honeyCells, cellWidth, cellHeigth, context ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
function addHexDetails( honeyCells ){ |
|
|
|
setFilled( honeyCells, honeyCells.filled, "active" ); |
|
|
|
function addDetails( honeyCells, cellWidth, cellHeigth, context ){ |
|
|
|
|
|
|
|
setFilled( honeyCells, honeyCells.filled, "active" , cellWidth, cellHeigth, context); |
|
|
|
|
|
|
|
if(honeyCells.touched){ |
|
|
|
setFilled( honeyCells, honeyCells.touched, "touched" ); |
|
|
|
setFilled( honeyCells, honeyCells.touched, "touched" , cellWidth, cellHeigth, context); |
|
|
|
} |
|
|
|
if(honeyCells.unit){ |
|
|
|
setFilled( honeyCells, honeyCells.unit, "unitMember" ); |
|
|
|
setFilled( honeyCells, honeyCells.unit, "unit" , cellWidth, cellHeigth, context); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
function removeHexs(){ |
|
|
|
var honeyComb = document.getElementById("honeyComb"); |
|
|
|
honeyComb.innerHTML = ""; |
|
|
|
} |
|
|
|
function setFilled( honeyCells, cellsToCheck, className ){ |
|
|
|
// honeyCells = jsonExample;
|
|
|
|
|
|
|
|
var hexCells = document.getElementsByClassName("hex"); |
|
|
|
function setFilled( honeyCells, cellsToCheck, className, cellWidth, cellHeigth, context ){ |
|
|
|
// honeyCells = jsonExample;
|
|
|
|
|
|
|
|
for (var i = 0; i < cellsToCheck.length; i++) { |
|
|
|
var x = cellsToCheck[i].x; |
|
|
|
var y = cellsToCheck[i].y; |
|
|
|
var filledCell = ( y * honeyCells.width ) + x; |
|
|
|
var honeyCell = hexCells[ filledCell ]; |
|
|
|
honeyCell.className += " "+className; |
|
|
|
var y = honeyCells.height - cellsToCheck[i].y; |
|
|
|
var even = ( y % 2 == 0 ) ? true : false; |
|
|
|
var startx = (even) ? x*cellWidth : (x*cellWidth)+(cellWidth*0.5); |
|
|
|
var starty = y*cellHeigth-((cellHeigth-(cellHeigth/2))/2)*y; |
|
|
|
context.drawImage(urlToImageMap['images/'+className+'.png'], startx, starty , cellWidth, cellHeigth); |
|
|
|
}; |
|
|
|
} |
|
|
|
function renderImage(index){ |
|
|
|
html2canvas(document.getElementById("honeyComb")).then(function(canvas) { |
|
|
|
canvas.id = "rendered_"+index; |
|
|
|
canvas.className = "renderedCanvas"; |
|
|
|
if(index == 0){ |
|
|
|
canvas.className += " visible"; |
|
|
|
} |
|
|
|
document.getElementById("renderedHoneyComb").appendChild(canvas); |
|
|
|
totalRenders--; |
|
|
|
if( totalRenders == 0){ |
|
|
|
document.getElementById("controlBar").className += " visible"; |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
function orderRenderedCanvas(){ |
|
|
|
renders = [].slice.call(renders); |
|
|
|
renders.sort(function(a,b){ |
|
|
|
|
|
|
|
if(a.id.split("_")[1] == 0){ |
|
|
|
a.className += " visible"; |
|
|
|
} |
|
|
|
|
|
|
|
if(a.id.split("_")[1] < b.id.split("_")[1] ){ |
|
|
|
return -1; |
|
|
|
} |
|
|
|
}); |
|
|
|
var container = document.getElementById("renderedHoneyComb"); |
|
|
|
container.innerHTML = ""; |
|
|
|
for (var i = 0; i < renders.length; i++) { |
|
|
|
container.appendChild(renders[i]); |
|
|
|
}; |
|
|
|
// 17:43
|
|
|
|
} |
|
|
|
function slideBack(){ |
|
|
|
var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0]; |
|
|
|
var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0]; |
|
|
|
var actualId = actual.id.split("_")[1]; |
|
|
|
if(actualId > 0){ |
|
|
|
actualId--; |
|
|
|
actual.className = "renderedCanvas"; |
|
|
|
document.getElementById("rendered_"+actualId).className += " visible"; |
|
|
|
actual.className = "canvasRendered"; |
|
|
|
document.getElementById("canvas_"+actualId).className += " visible"; |
|
|
|
} |
|
|
|
updateLabels(document.getElementById("canvas_"+actualId)); |
|
|
|
|
|
|
|
} |
|
|
|
function updateLabels( e ){ |
|
|
|
document.getElementById("score").innerHTML = e.getAttribute("data-score"); |
|
|
|
document.getElementById("index").innerHTML = e.getAttribute("data-index"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function slideForward(){ |
|
|
|
var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0]; |
|
|
|
var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0]; |
|
|
|
var actualId = actual.id.split("_")[1]; |
|
|
|
if(actualId < document.getElementsByClassName("renderedCanvas").length - 1){ |
|
|
|
if(actualId < document.getElementsByClassName("canvasRendered").length - 1){ |
|
|
|
actualId++; |
|
|
|
actual.className = "renderedCanvas"; |
|
|
|
document.getElementById("rendered_"+actualId).className += " visible"; |
|
|
|
actual.className = " canvasRendered"; |
|
|
|
document.getElementById("canvas_"+actualId).className += " visible"; |
|
|
|
} |
|
|
|
updateLabels(document.getElementById("canvas_"+actualId)); |
|
|
|
} |
|
|
|
|
|
|
|
function hasClass(el, cls) { |
|
|
|
@ -211,6 +181,7 @@ function populateBoard(){ |
|
|
|
|
|
|
|
for (var i = rankings.length - 1; i >= 0; i--) { |
|
|
|
if( rankings[i].teamId == 235 ){ |
|
|
|
|
|
|
|
results += "<p>Updated "+hour+"h "+minutes+"m "+seconds+"s</p>"; |
|
|
|
results += "<h1>Cazziammolla Placement: "+rankings[i].rank+"</h1>"; |
|
|
|
results += "<h2>with a score of: "+rankings[i].score+"</h2>"; |
|
|
|
@ -275,12 +246,11 @@ function checkKey(e) { |
|
|
|
|
|
|
|
e = e || window.event; |
|
|
|
|
|
|
|
if ( document.getElementById("controlBar").className.indexOf("visible") != -1 ) { |
|
|
|
if (e.keyCode == '37') { |
|
|
|
slideBack(); |
|
|
|
}else if(e.keyCode == '39') { |
|
|
|
slideForward(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
// 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};
|
edoardoo
10 years ago
