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

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. var points = 0;
  2. var totalRenders = 0;
  3. var urlToImageMap = {};
  4. function loadImageGroup(urls, onCompleteFunc) {
  5. var numImagesNotYetLoaded = urls.length;
  6. urlToImageMap = {};
  7. var markLoaded = function() {
  8. if (--numImagesNotYetLoaded == 0)
  9. onCompleteFunc(urlToImageMap);
  10. }
  11. for (var i = 0; i < urls.length; i++) {
  12. var img = new Image();
  13. img.onload = markLoaded;
  14. img.src = urls[i];
  15. urlToImageMap[urls[i]] = img;
  16. }
  17. }
  18. function prePopulate(honeyCells){
  19. var honeyCells = JSON.parse(honeyCells);
  20. console.dir(honeyCells);
  21. var urls = [
  22. 'images/neutral.png',
  23. 'images/active.png',
  24. 'images/touched.png',
  25. 'images/unit.png',
  26. ];
  27. loadImageGroup(urls, function(urlToImageMap) {
  28. //all are loaded. draw to canvas here
  29. document.getElementById("honeyComb").innerHTML="";
  30. if( honeyCells.constructor === Array){
  31. for (var i = 0; i < honeyCells.length; i++) {
  32. populateHoneycomb( honeyCells[i], i );
  33. };
  34. }else{
  35. populateHoneycomb( honeyCells , 0);
  36. }
  37. });
  38. }
  39. function populateHoneycomb( honeyCells , index){
  40. var height = "innerHeight" in window
  41. ? window.innerHeight
  42. : document.documentElement.offsetHeight;
  43. var width = "innerWidth" in window
  44. ? window.innerWidth
  45. : document.documentElement.offsetWidth;
  46. var cellWidth = width/(honeyCells.width);
  47. var cellHeigth = (cellWidth / Math.sqrt(3))*2;
  48. var canvas = document.createElement("canvas");
  49. canvas.id = "canvas_"+index;
  50. canvas.width = (honeyCells.width+1)*cellWidth;
  51. var heightDifference = 0;
  52. for( var i = 0; i < honeyCells.height; i++){
  53. heightDifference = ((cellHeigth-(cellHeigth/2))/2)*i;
  54. }
  55. canvas.height = honeyCells.height*cellHeigth - heightDifference;
  56. document.getElementById("honeyComb").appendChild(canvas);
  57. canvas.setAttribute("data-index", index);
  58. if( typeof honeyCells.score == "undefined"){
  59. honeyCells.score = 0;
  60. }
  61. canvas.setAttribute("data-score", honeyCells.score );
  62. canvas.className += " canvasRendered";
  63. if(index == 0){
  64. canvas.className += " visible";
  65. updateLabels(document.getElementById("canvas_0"));
  66. }
  67. var context = canvas.getContext('2d');
  68. for (var i = 0; i < honeyCells.height; i++) {
  69. var even = (i%2 == 0) ? true : false;
  70. for (var j = 0; j < honeyCells.width; j++) {
  71. var startx = (even) ? j*cellWidth : (j*cellWidth)+(cellWidth*0.5);
  72. var starty = i*cellHeigth-((cellHeigth-(cellHeigth/2))/2)*i;
  73. context.drawImage(urlToImageMap['images/neutral.png'], startx, starty , cellWidth, cellHeigth);
  74. };
  75. };
  76. addDetails( honeyCells, cellWidth, cellHeigth, context );
  77. }
  78. function addDetails( honeyCells, cellWidth, cellHeigth, context ){
  79. setFilled( honeyCells, honeyCells.filled, "active" , cellWidth, cellHeigth, context);
  80. if(honeyCells.touched){
  81. setFilled( honeyCells, honeyCells.touched, "touched" , cellWidth, cellHeigth, context);
  82. }
  83. if(honeyCells.unit){
  84. setFilled( honeyCells, honeyCells.unit, "unit" , cellWidth, cellHeigth, context);
  85. }
  86. }
  87. function setFilled( honeyCells, cellsToCheck, className, cellWidth, cellHeigth, context ){
  88. // honeyCells = jsonExample;
  89. for (var i = 0; i < cellsToCheck.length; i++) {
  90. var x = cellsToCheck[i].x;
  91. var y = cellsToCheck[i].y;
  92. var even = ( y % 2 == 0 ) ? true : false;
  93. var startx = (even) ? x*cellWidth : (x*cellWidth)+(cellWidth*0.5);
  94. var starty = y*cellHeigth-((cellHeigth-(cellHeigth/2))/2)*y;
  95. context.drawImage(urlToImageMap['images/'+className+'.png'], startx, starty , cellWidth, cellHeigth);
  96. };
  97. }
  98. function slideBack(){
  99. var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0];
  100. var actualId = actual.id.split("_")[1];
  101. if(actualId > 0){
  102. actualId--;
  103. actual.className = "canvasRendered";
  104. document.getElementById("canvas_"+actualId).className += " visible";
  105. }
  106. updateLabels(document.getElementById("canvas_"+actualId));
  107. }
  108. function slideForward(){
  109. var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0];
  110. var actualId = actual.id.split("_")[1];
  111. if(actualId < document.getElementsByClassName("canvasRendered").length - 1){
  112. actualId++;
  113. }else{
  114. actualId = 0;
  115. }
  116. actual.className = " canvasRendered";
  117. document.getElementById("canvas_"+actualId).className += " visible";
  118. updateLabels(document.getElementById("canvas_"+actualId));
  119. }
  120. function updateLabels( e ){
  121. document.getElementById("score").innerHTML = e.getAttribute("data-score");
  122. document.getElementById("index").innerHTML = e.getAttribute("data-index");
  123. }
  124. function slidePlay(){
  125. var play = document.getElementById("playSlide");
  126. if( play.getAttribute("data-intervalId") == "-1"){
  127. var intervalID = setInterval( function(){
  128. slideForward();
  129. }, 50);
  130. play.setAttribute('data-intervalId', intervalID);
  131. }else{
  132. var intervalID = play.getAttribute("data-intervalId");
  133. clearInterval( intervalID );
  134. play.setAttribute('data-intervalId', "-1");
  135. }
  136. }
  137. function sendJson(){
  138. // console.log("sending mama some json.")
  139. var query = document.getElementById("sendHCJson").value;
  140. socket.emit("jsonToParse", query);
  141. prePopulate( query);
  142. }
  143. // 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};