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

added multiple honeycmob rendering, diahane

visualizer
edoardoo 10 years ago
parent
e69e7f5614
commit
a67786faee
4 changed files with 130 additions and 10 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      public/index.html
  2. +84
    -9
      public/scripts/functions.js
  3. +8
    -1
      public/scripts/socketSetup.js
  4. +32
    -0
      public/style/style.less

+ 6
- 0
public/index.html View File

@ -10,6 +10,11 @@
</head>
<body>
<div id="controlBar">
<button onclick="slideBack()"><</button>
<span id="indexSlide"></span>
<button onclick="slideForward()">></button>
</div>
<div id="leaderBoard" class="">
<button onclick="toggleLeaderBoard()">LeaderBoard</button>
<section id="listBoard">Loading...</section>
@ -17,6 +22,7 @@
<section id="honeyComb">
</section>
<section id="renderedHoneyComb"></section>
<script type="text/javascript" src="scripts/socketSetup.js"></script>
<script type="text/javascript" src="scripts/functions.js"></script>
<audio id="bell" controls>


+ 84
- 9
public/scripts/functions.js View File

@ -1,9 +1,11 @@
var points = 0;
var totalRenders = 0;
function updateDimensions( dimension ){
less.modifyVars({"@sizeWidth":dimension+"px"});
}
function populateHoneycomb( honeyCells ){
function populateHoneycomb( honeyCells , index){
// honeyCells = jsonExample;
var height = "innerHeight" in window
@ -16,7 +18,7 @@ function populateHoneycomb( honeyCells ){
// var cellWidth = ( height/honeyCells.height )*Math.sqrt(3);
// if( width/honeyCells.width < height/honeyCells.height ){
var cellWidth = (width - honeyCells.width)/(honeyCells.width+0.5);
var cellWidth = (width - honeyCells.width)/(honeyCells.width+0.5);
// }
@ -33,10 +35,11 @@ function populateHoneycomb( honeyCells ){
honeyCombHorizontal = true;
}
var honeyComb = document.getElementById("honeyComb");
honeyComb.innerHTML = "";
var renderedHoneyComb = document.getElementById("renderedHoneyComb");
renderedHoneyComb.innerHTML="";
honeyComb.innerHTML = "<div class='honeycombIndex'>"+index+"</div>";
for (var i = honeyCells.height - 1; i >= 0; i--) {
var even = (i%2 == 0) ? "even" : "";
@ -67,10 +70,29 @@ function populateHoneycomb( honeyCells ){
};
setFilled( honeyCells, honeyCells.filled, "active" );
setFilled( honeyCells, honeyCells.touched, "touched" );
setFilled( honeyCells, honeyCells.unit, "unitMember" );
addHexDetails( honeyCells );
renderImage( index );
totalRenders++;
removeHexs();
}
function addHexDetails( honeyCells ){
setFilled( honeyCells, honeyCells.filled, "active" );
if(honeyCells.touched){
setFilled( honeyCells, honeyCells.touched, "touched" );
}
if(honeyCells.unit){
setFilled( honeyCells, honeyCells.unit, "unitMember" );
}
}
function removeHexs(){
var honeyComb = document.getElementById("honeyComb");
honeyComb.innerHTML = "";
}
function setFilled( honeyCells, cellsToCheck, className ){
// honeyCells = jsonExample;
@ -85,6 +107,60 @@ function setFilled( honeyCells, cellsToCheck, className ){
honeyCell.className += " "+className;
};
}
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(){
var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
var actualId = actual.id.split("_")[1];
if(actualId > 0){
actualId--;
}
actual.className = "renderedCanvas";
document.getElementById("rendered_"+actualId).className += " visible";
}
function slideForward(){
var actual = document.getElementById("renderedHoneyComb").getElementsByClassName("visible")[0];
var actualId = actual.id.split("_")[1];
if(actualId < 10){
actualId++;
}
actual.className = "renderedCanvas";
document.getElementById("rendered_"+actualId).className += " visible";
}
function hasClass(el, cls) {
return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}
@ -141,7 +217,6 @@ function populateBoard(){
listBoard.innerHTML = results;
}
function updateLeaderBoard(){
loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime());


+ 8
- 1
public/scripts/socketSetup.js View File

@ -10,7 +10,14 @@ socket.on("jsonHoneycomb",function(message){
*/
console.log("Message from the server arrived")
var honeyCells = JSON.parse(message);
populateHoneycomb( honeyCells );
if( honeyCells.constructor === Array){
for (var i = 0; i < honeyCells.length; i++) {
populateHoneycomb( honeyCells[i], i );
};
}else{
populateHoneycomb( honeyCells , 0);
}
socket.emit('ackMessage', "true");
});


+ 32
- 0
public/style/style.less View File

@ -26,6 +26,28 @@ audio{
-webkit-transition: all .5s ease-in-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all .5s ease-in-out;
}
#controlBar{
position: fixed;
top: 0;
width: 100%;
margin: 0 auto;
text-align: center;
z-index: 999;
display: none;
&.visible{
display: block;
}
}
#renderedHoneyComb{
canvas{
height: 700px;
position: absolute;
display: none;
}
canvas.visible{
display: block;
}
}
#leaderBoard:extend(.transition) {
position: fixed;
top: 0px;
@ -73,6 +95,16 @@ audio{
right: 0;
opacity: 1;
}
}
.honeycombIndex{
position: fixed;
top: 0;
left: 0;
background-color: rgba(185, 5, 198, 0.29);
padding: 20px;
z-index: 999;
}
.hex {
float: left;


Write Preview
Loading…
Cancel
Save