LILiK
/
icfp2015
5
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

initial commit

visualizer2
edoardoo 9 years ago
parent
148ec764a3
commit
1027aa7046
8 changed files with 120 additions and 135 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/images/active.png
  2. BIN
      public/images/neutral.png
  3. BIN
      public/images/touched.png
  4. BIN
      public/images/unit.png
  5. +5
    -1
      public/index.html
  6. +97
    -127
      public/scripts/functions.js
  7. +17
    -6
      public/style/style.less
  8. +1
    -1
      sample_problems/problem_1.json

BIN
public/images/active.png View File

Before After
Width: 779  |  Height: 901  |  Size: 36 KiB

BIN
public/images/neutral.png View File

Before After
Width: 779  |  Height: 901  |  Size: 39 KiB

BIN
public/images/touched.png View File

Before After
Width: 779  |  Height: 901  |  Size: 29 KiB

BIN
public/images/unit.png View File

Before After
Width: 779  |  Height: 901  |  Size: 37 KiB

+ 5
- 1
public/index.html View File

@ -6,11 +6,15 @@
<link rel="stylesheet/less" type="text/css" href="style/style.less" /> <link rel="stylesheet/less" type="text/css" href="style/style.less" />
<script type="text/javascript" src="scripts/less.min.js"></script> <script type="text/javascript" src="scripts/less.min.js"></script>
<script type="text/javascript" src="scripts/socket.io.js"></script> <script type="text/javascript" src="scripts/socket.io.js"></script>
<script type="text/javascript" src="scripts/html2canvas.js"></script>
</head> </head>
<body> <body>
<div id="controlBar"> <div id="controlBar">
<div class="lefting">
<span>Index: </span><div id="index"></div>
<span>Score: </span><div id="score"></div>
</div>
<button onclick="slideBack()"><</button> <button onclick="slideBack()"><</button>
<span id="indexSlide"></span> <span id="indexSlide"></span>
<button onclick="slideForward()">></button> <button onclick="slideForward()">></button>


+ 97
- 127
public/scripts/functions.js View File

@ -1,181 +1,151 @@
var points = 0; var points = 0;
var totalRenders = 0; var totalRenders = 0;
function updateDimensions( dimension ){
less.modifyVars({"@sizeWidth":dimension+"px"});
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){ function prePopulate(honeyCells){
var honeyCells = JSON.parse(honeyCells); var honeyCells = JSON.parse(honeyCells);
var urls = [
'images/neutral.png',
'images/active.png',
'images/touched.png',
'images/unit.png',
if( honeyCells.constructor === Array){
for (var i = 0; i < honeyCells.length; i++) {
populateHoneycomb( honeyCells[i], i );
};
}else{
populateHoneycomb( honeyCells , 0);
}
];
loadImageGroup(urls, function(urlToImageMap) {
//all are loaded. draw to canvas here
if( honeyCells.constructor === Array){
for (var i = 0; i < honeyCells.length; i++) {
populateHoneycomb( honeyCells[i], i );
};
}else{
document.getElementById("honeyComb").innerHTML="";
populateHoneycomb( honeyCells , 0);
}
});
} }
function populateHoneycomb( honeyCells , index){
// honeyCells = jsonExample;
function populateHoneycomb( honeyCells , index){
var height = "innerHeight" in window var height = "innerHeight" in window
? window.innerHeight ? window.innerHeight
: document.documentElement.offsetHeight; : document.documentElement.offsetHeight;
var width = "innerWidth" in window var width = "innerWidth" in window
? window.innerWidth ? window.innerWidth
: document.documentElement.offsetWidth; : 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"){
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*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; 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);
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);
}; };
}; };
addHexDetails( honeyCells );
renderImage( index );
totalRenders++;
removeHexs();
addDetails( honeyCells, cellWidth, cellHeigth, context );
} }
function addHexDetails( honeyCells ){
setFilled( honeyCells, honeyCells.filled, "active" );
function addDetails( honeyCells, cellWidth, cellHeigth, context ){
setFilled( honeyCells, honeyCells.filled, "active" , cellWidth, cellHeigth, context);
if(honeyCells.touched){ if(honeyCells.touched){
setFilled( honeyCells, honeyCells.touched, "touched" );
setFilled( honeyCells, honeyCells.touched, "touched" , cellWidth, cellHeigth, context);
} }
if(honeyCells.unit){ if(honeyCells.unit){
setFilled( honeyCells, honeyCells.unit, "unitMember" );
setFilled( honeyCells, honeyCells.unit, "unit" , cellWidth, cellHeigth, context);
} }
} }
function removeHexs(){
var honeyComb = document.getElementById("honeyComb");
honeyComb.innerHTML = "";
}
function setFilled( honeyCells, cellsToCheck, className ){
// honeyCells = jsonExample;
var hexCells = document.getElementsByClassName("hex");
function setFilled( honeyCells, cellsToCheck, className, cellWidth, cellHeigth, context ){
// honeyCells = jsonExample;
for (var i = 0; i < cellsToCheck.length; i++) { for (var i = 0; i < cellsToCheck.length; i++) {
var x = cellsToCheck[i].x; var x = cellsToCheck[i].x;
var y = cellsToCheck[i].y;
var filledCell = ( y * honeyCells.width ) + x;
var honeyCell = hexCells[ filledCell ];
honeyCell.className += " "+className;
var y = honeyCells.height - 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 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(){ function slideBack(){
var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0];
var actualId = actual.id.split("_")[1]; var actualId = actual.id.split("_")[1];
if(actualId > 0){ if(actualId > 0){
actualId--; actualId--;
actual.className = "renderedCanvas";
document.getElementById("rendered_"+actualId).className += " visible";
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 slideForward(){ function slideForward(){
var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
var actual = document.getElementById("honeyComb").getElementsByClassName("visible")[0];
var actualId = actual.id.split("_")[1]; var actualId = actual.id.split("_")[1];
if(actualId < document.getElementsByClassName("renderedCanvas").length - 1){
if(actualId < document.getElementsByClassName("canvasRendered").length - 1){
actualId++; actualId++;
actual.className = "renderedCanvas";
document.getElementById("rendered_"+actualId).className += " visible";
actual.className = " canvasRendered";
document.getElementById("canvas_"+actualId).className += " visible";
} }
updateLabels(document.getElementById("canvas_"+actualId));
} }
function hasClass(el, cls) { function hasClass(el, cls) {
@ -211,6 +181,7 @@ function populateBoard(){
for (var i = rankings.length - 1; i >= 0; i--) { for (var i = rankings.length - 1; i >= 0; i--) {
if( rankings[i].teamId == 235 ){ if( rankings[i].teamId == 235 ){
results += "<p>Updated "+hour+"h "+minutes+"m "+seconds+"s</p>"; results += "<p>Updated "+hour+"h "+minutes+"m "+seconds+"s</p>";
results += "<h1>Cazziammolla Placement: "+rankings[i].rank+"</h1>"; results += "<h1>Cazziammolla Placement: "+rankings[i].rank+"</h1>";
results += "<h2>with a score of: "+rankings[i].score+"</h2>"; results += "<h2>with a score of: "+rankings[i].score+"</h2>";
@ -275,12 +246,11 @@ function checkKey(e) {
e = e || window.event; e = e || window.event;
if ( document.getElementById("controlBar").className.indexOf("visible") != -1 ) {
if (e.keyCode == '37') { if (e.keyCode == '37') {
slideBack(); slideBack();
}else if(e.keyCode == '39') { }else if(e.keyCode == '39') {
slideForward(); 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}; // 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};

+ 17
- 6
public/style/style.less View File

@ -49,20 +49,28 @@ audio{
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
z-index: 999; z-index: 999;
display: none;
// display: none;
&.visible{ &.visible{
display: block; display: block;
} }
.lefting{
background: rgba(20,20,20, .5);
color: white;
float: left;
padding: 10px;
}
} }
#renderedHoneyComb{
#honeyComb{
canvas{ canvas{
height: 700px;
position: absolute; position: absolute;
display: none; display: none;
height: 100%;
&.visible, &:first-child{
display: block;
}
} }
canvas.visible{
display: block;
}
} }
#leaderBoard:extend(.transition) { #leaderBoard:extend(.transition) {
position: fixed; position: fixed;
@ -130,6 +138,9 @@ audio{
background-color: rgba(175, 0, 198, 0.29); background-color: rgba(175, 0, 198, 0.29);
} }
.canvasRendered{
background-color: #333;
}
.hex { .hex {
float: left; float: left;
margin-left: @border; margin-left: @border;


+ 1
- 1
sample_problems/problem_1.json View File

@ -1 +1 @@
{"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}
{"height":15,"width":15,"sourceSeeds":[0],"units":[{"members":[{"x":0,"y":0}],"pivot":{"x":0,"y":0}}],"id":1,"touched":[{"x":2,"y":4}],"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}

Write Preview
Loading…
Cancel
Save