icfp2015/public/scripts/renderer.js

var points = 0;
var totalRenders = 0;
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);
    console.dir(honeyCells);
    var urls = [
		'images/neutral.png',
		'images/active.png',
		'images/touched.png',
		'images/unit.png',


	];

	loadImageGroup(urls, function(urlToImageMap) {
	//all are loaded. draw to canvas here
	   	document.getElementById("honeyComb").innerHTML="";
	    if( honeyCells.constructor === Array){
	        for (var i = 0; i < honeyCells.length; i++) {
	            populateHoneycomb( honeyCells[i], i );

	        };
	    }else{        
	        populateHoneycomb( honeyCells , 0);
	    }
	});

}



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 = width/(honeyCells.width);
   	var cellHeigth = (cellWidth / Math.sqrt(3))*2;
   	var canvas = document.createElement("canvas");
   	canvas.id = "canvas_"+index;
   	canvas.width = (honeyCells.width+1)*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;
    }
   	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);    		
    	};
    };

    addDetails( honeyCells, cellWidth, cellHeigth, context );
   


}
function addDetails( honeyCells, cellWidth, cellHeigth, context ){

	setFilled( honeyCells, honeyCells.filled, "active" , cellWidth, cellHeigth, context);

    if(honeyCells.touched){
   		setFilled( honeyCells, honeyCells.touched, "touched" , cellWidth, cellHeigth, context);
    }
    if(honeyCells.unit){
    	setFilled( honeyCells, honeyCells.unit, "unit" , cellWidth, cellHeigth, context);
    	
    }
}

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 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 slideBack(){
	var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0];
	var actualId = actual.id.split("_")[1];
	if(actualId > 0){
		actualId--;
		actual.className = "canvasRendered";
		document.getElementById("canvas_"+actualId).className += " visible";
	}
	updateLabels(document.getElementById("canvas_"+actualId));
	
}

function slideForward(){
	var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0];
	var actualId = actual.id.split("_")[1];
	if(actualId < document.getElementsByClassName("canvasRendered").length - 1){
		actualId++;
		
	}else{
		actualId = 0;
	}
	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 slidePlay(){
	var play = document.getElementById("playSlide");

	if( play.getAttribute("data-intervalId") == "-1"){
		var intervalID = setInterval( function(){
			slideForward();
		}, 50);
		play.setAttribute('data-intervalId', intervalID);	
	}else{
		var intervalID = play.getAttribute("data-intervalId");
		clearInterval( intervalID );
		play.setAttribute('data-intervalId', "-1");	

	}
}

function sendJson(){
	// console.log("sending mama some json.")
	var query = document.getElementById("sendHCJson").value;
	socket.emit("jsonToParse", query);
	prePopulate( query);
}
// 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};