|
|
- 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};
|