var points = 0;
|
|
var totalRenders = 0;
|
|
function updateDimensions( dimension ){
|
|
less.modifyVars({"@sizeWidth":dimension+"px"});
|
|
}
|
|
function prePopulate(honeyCells){
|
|
var honeyCells = JSON.parse(honeyCells);
|
|
|
|
if( honeyCells.constructor === Array){
|
|
for (var i = 0; i < honeyCells.length; i++) {
|
|
populateHoneycomb( honeyCells[i], i );
|
|
|
|
};
|
|
}else{
|
|
populateHoneycomb( honeyCells , 0);
|
|
}
|
|
}
|
|
|
|
function populateHoneycomb( honeyCells , index){
|
|
|
|
|
|
// honeyCells = jsonExample;
|
|
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"){
|
|
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);
|
|
|
|
};
|
|
|
|
|
|
};
|
|
|
|
addHexDetails( honeyCells );
|
|
|
|
renderImage( index );
|
|
totalRenders++;
|
|
removeHexs();
|
|
|
|
|
|
}
|
|
function addHexDetails( honeyCells ){
|
|
setFilled( honeyCells, honeyCells.filled, "active" );
|
|
|
|
if(honeyCells.touched){
|
|
setFilled( honeyCells, honeyCells.touched, "touched" );
|
|
}
|
|
if(honeyCells.unit){
|
|
setFilled( honeyCells, honeyCells.unit, "unitMember" );
|
|
|
|
}
|
|
}
|
|
function removeHexs(){
|
|
var honeyComb = document.getElementById("honeyComb");
|
|
honeyComb.innerHTML = "";
|
|
}
|
|
function setFilled( honeyCells, cellsToCheck, className ){
|
|
// honeyCells = jsonExample;
|
|
|
|
var hexCells = document.getElementsByClassName("hex");
|
|
|
|
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;
|
|
};
|
|
}
|
|
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 actualId = actual.id.split("_")[1];
|
|
if(actualId > 0){
|
|
actualId--;
|
|
actual.className = "renderedCanvas";
|
|
document.getElementById("rendered_"+actualId).className += " visible";
|
|
}
|
|
|
|
}
|
|
|
|
function slideForward(){
|
|
var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
|
|
var actualId = actual.id.split("_")[1];
|
|
if(actualId < document.getElementsByClassName("renderedCanvas").length - 1){
|
|
actualId++;
|
|
actual.className = "renderedCanvas";
|
|
document.getElementById("rendered_"+actualId).className += " visible";
|
|
}
|
|
}
|
|
|
|
function hasClass(el, cls) {
|
|
return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
|
|
}
|
|
function removeClass(ele,cls) {
|
|
if (hasClass(ele,cls)) {
|
|
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
|
|
ele.className=ele.className.replace(reg,' ');
|
|
}
|
|
}
|
|
function removeId(id) {
|
|
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
|
|
}
|
|
|
|
function toggleLeaderBoard(){
|
|
var leaderBoard = document.getElementById("leaderBoard");
|
|
if( hasClass(leaderBoard, "open")){
|
|
removeClass(leaderBoard, "open");
|
|
}else{
|
|
leaderBoard.className += " open";
|
|
}
|
|
updateLeaderBoard()
|
|
}
|
|
function populateBoard(){
|
|
var listBoard = document.getElementById("listBoard");
|
|
var results = "";
|
|
var rankings = data.data.rankings;
|
|
var date = new Date();
|
|
var seconds = date.getSeconds();
|
|
var minutes = date.getMinutes();
|
|
var hour = date.getHours();
|
|
|
|
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>";
|
|
if (rankings[i].rank != points && points != 0){
|
|
ringTheBell();
|
|
}
|
|
points = rankings[i].rank;
|
|
|
|
}
|
|
};
|
|
|
|
var settings = data.data.settings;
|
|
for (var i = 0; i < settings.length; i++) {
|
|
for (var j = settings[i].rankings.length - 1; j >= 0; j--) {
|
|
if(settings[i].rankings[j].teamId == 235){
|
|
results += "<tr><td>"+i+"</td><td>"+j+"</td></tr>"
|
|
}
|
|
};
|
|
};
|
|
var results = "<table><thead><th>Setting</th><th>Placement</th></thead>"+results+"</table>";
|
|
listBoard.innerHTML = results;
|
|
|
|
|
|
}
|
|
function updateLeaderBoard(){
|
|
loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime());
|
|
|
|
var intervalID = setInterval( function(){
|
|
loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime());
|
|
}, 30000);
|
|
|
|
}
|
|
function loadRankingJs(scriptName) {
|
|
var rankingScript = document.getElementById("rankingScript");
|
|
if ( rankingScript ){
|
|
removeId("rankingScript");
|
|
}
|
|
var docHeadObj = document.getElementsByTagName("head")[0];
|
|
var dynamicScript = document.createElement("script");
|
|
dynamicScript.type = "text/javascript";
|
|
dynamicScript.id = "rankingScript";
|
|
dynamicScript.src = scriptName;
|
|
dynamicScript.onload = function(){ populateBoard();};
|
|
docHeadObj.appendChild(dynamicScript);
|
|
|
|
return dynamicScript;
|
|
}
|
|
|
|
function ringTheBell(){
|
|
document.getElementById("bell").play();
|
|
}
|
|
|
|
document.onkeydown = checkKey;
|
|
|
|
function sendJson(){
|
|
// console.log("sending mama some json.")
|
|
// socket.emit("jsonToParse", document.getElementById("sendHCJson").value);
|
|
prePopulate( document.getElementById("sendHCJson").value);
|
|
}
|
|
|
|
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};
|