You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
5.7 KiB
178 lines
5.7 KiB
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};
|