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

leaderboard with alarm on new points

visualizer
edoardoo 9 years ago
parent
88e1254fb7
commit
66da973e02
4 changed files with 199 additions and 19 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -3
      public/index.html
  2. +108
    -8
      public/scripts/functions.js
  3. BIN
      public/sounds/bell.mp3
  4. +82
    -8
      public/style/style.less

+ 9
- 3
public/index.html View File

@ -6,16 +6,22 @@
<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/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="control"><button onclick="updateDimensions()">R</button></div>
<div id="leaderBoard" class="">
<button onclick="toggleLeaderBoard()">LeaderBoard</button>
<section id="listBoard">Loading...</section>
</div>
<section id="honeyComb">
</section>
<script type="text/javascript" src="scripts/socketSetup.js"></script>
<script type="text/javascript" src="scripts/functions.js"></script>
<audio id="bell" controls>
<source src="sounds/bell.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

+ 108
- 8
public/scripts/functions.js View File

@ -1,6 +1,8 @@
var points = 0;
function updateDimensions( dimension ){
less.modifyVars({"@sizeWidth":dimension+"px"});
}
function populateHoneycomb( honeyCells ){
// honeyCells = jsonExample;
@ -10,8 +12,29 @@ function populateHoneycomb( honeyCells ){
var width = "innerWidth" in window
? window.innerWidth
: document.documentElement.offsetWidth;
var cellWidth = (width - honeyCells.width)/(honeyCells.width+0.5);
// var cellWidth = ( height/honeyCells.height )*Math.sqrt(3);
// if( width/honeyCells.width < height/honeyCells.height ){
var cellWidth = (width - honeyCells.width)/(honeyCells.width+0.5);
// }
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");
honeyComb.innerHTML = "";
@ -44,21 +67,98 @@ function populateHoneycomb( honeyCells ){
};
setFilled( honeyCells );
setFilled( honeyCells, honeyCells.filled, "active" );
setFilled( honeyCells, honeyCells.touched, "touched" );
setFilled( honeyCells, honeyCells.unit, "unitMember" );
}
function setFilled( honeyCells ){
function setFilled( honeyCells, cellsToCheck, className ){
// honeyCells = jsonExample;
var hexCells = document.getElementsByClassName("hex");
for (var i = 0; i < honeyCells.filled.length; i++) {
var x = honeyCells.filled[i].x;
var y = honeyCells.filled[i].y;
for (var i = 0; i < cellsToCheck.length; i++) {
var x = cellsToCheck[i].x;
var y = cellsToCheck[i].y;
var filledCell = ( y * honeyCells.width ) + x;
var honeyCell = hexCells[ filledCell ];
honeyCell.className += " disabled";
honeyCell.className += " "+className;
};
}
function hasClass(el, cls) {
return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
function removeId(id) {
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
function toggleLeaderBoard(){
var leaderBoard = document.getElementById("leaderBoard");
if( hasClass(leaderBoard, "open")){
removeClass(leaderBoard, "open");
}else{
leaderBoard.className += " open";
}
updateLeaderBoard()
}
function populateBoard(){
var listBoard = document.getElementById("listBoard");
var results = "";
var rankings = data.data.rankings;
for (var i = rankings.length - 1; i >= 0; i--) {
if( rankings[i].teamId == 235 ){
results += "<h1>Cazziammolla Placement: "+rankings[i].rank+"</h1>";
results += "<h2>with a score of: "+rankings[i].score+"</h2>";
if (rankings[i].rank != points && points != 0){
score = rankings[i].rank;
ringTheBell();
}
}
};
var settings = data.data.settings;
for (var i = 0; i < settings.length; i++) {
for (var j = settings[i].rankings.length - 1; j >= 0; j--) {
if(settings[i].rankings[j].teamId == 235){
results += "<tr><td>"+i+"</td><td>"+j+"</td></tr>"
}
};
};
var results = "<table><thead><th>Setting</th><th>Placement</th></thead>"+results+"</table>";
listBoard.innerHTML = results;
}
function updateLeaderBoard(){
var intervalID = setInterval( function(){
loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime());
}, 30000);
}
function loadRankingJs(scriptName) {
var rankingScript = document.getElementById("rankingScript");
if ( rankingScript ){
removeId("rankingScript");
}
var docHeadObj = document.getElementsByTagName("head")[0];
var dynamicScript = document.createElement("script");
dynamicScript.type = "text/javascript";
dynamicScript.id = "rankingScript";
dynamicScript.src = scriptName;
dynamicScript.onload = function(){ populateBoard();};
docHeadObj.appendChild(dynamicScript);
return dynamicScript;
}
function ringTheBell(){
document.getElementById("bell").play();
}
// 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};

BIN
public/sounds/bell.mp3 View File


+ 82
- 8
public/style/style.less View File

@ -1,9 +1,12 @@
@disabledColor: #FFDDA0;
@activeColor: #FFDDA0;
@touchColor: #F7D7D7;
@unitColor: #C2F19D;
@sizeWidth: 100px;
@border: 1px;
@sizeHeight: @sizeWidth/sqrt(3);
@color: #efefef;
html, body{
margin: 0;
padding: 0;
@ -12,13 +15,64 @@ html, body{
}
body{
background-color: #333;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
audio{
display: none;
}
.transition{
-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;
}
#control{
#leaderBoard:extend(.transition) {
position: fixed;
top: 0px;
right: 0;
width: 100px;
height: 100px;
width: 500px;
height: 100%;
overflow: hidden;
background-color: rgba(255,255,255,1);
right: -400px;
color: #333;
opacity: .2;
h1, h2{
padding-left: 10px;
}
&:hover{
opacity: 1;
}
button{
height: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
border-color: transparent;
float: left;
width: 100px;
opacity: .4;
}
#listBoard{
float: left;
overflow: auto;
height: 100%;
width: 400px;
table, tr{
width: 100%;
td{
width: 50%;
text-align: center;
}
}
}
&.open:extend(.transition){
right: 0;
opacity: 1;
}
}
.hex {
float: left;
@ -43,17 +97,37 @@ body{
border-right: @sizeWidth/2 solid transparent;
}
&.disabled{
&.active{
.top:extend(.hex .top){
border-bottom-color: @activeColor;
}
.middle:extend(.hex .middle){
background: @activeColor;
}
.bottom:extend(.hex .bottom){
border-top-color: @activeColor;
}
}
&.touched{
.top:extend(.hex .top){
border-bottom-color: @disabledColor;
border-bottom-color: @touchColor;
}
.middle:extend(.hex .middle){
background: @disabledColor;
background: @touchColor;
}
.bottom:extend(.hex .bottom){
border-top-color: @disabledColor;
border-top-color: @touchColor;
}
}
&.unitMember{
.middle:extend(.hex .middle){
background-color: @unitColor;
// background-image:
}
}
&-row{
clear: left;


Write Preview
Loading…
Cancel
Save