@ -0,0 +1,2 @@ | |||||
node_modules/ | |||||
mongodb/ |
@ -0,0 +1,23 @@ | |||||
{ | |||||
"name": "icfp2015", | |||||
"version": "1.0.0", | |||||
"description": "", | |||||
"main": "server.js", | |||||
"dependencies": { | |||||
"body-parser": "^1.13.3", | |||||
"cookie-parser": "^1.3.5", | |||||
"express": "^4.13.3", | |||||
"mongojs": "^1.2.1", | |||||
"socket.io": "^1.3.6" | |||||
}, | |||||
"devDependencies": {}, | |||||
"scripts": { | |||||
"test": "echo \"Error: no test specified\" && exit 1" | |||||
}, | |||||
"repository": { | |||||
"type": "git", | |||||
"url": "https://edoardoo@bitbucket.org/lilik/icfp2015.git" | |||||
}, | |||||
"author": "", | |||||
"license": "ISC" | |||||
} |
@ -0,0 +1,40 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<title>icfp 2015 visualizer</title> | |||||
<!-- <link rel="stylesheet" type="text/css" href="style/style.css"> --> | |||||
<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> | |||||
</head> | |||||
<body> | |||||
<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 id="playSlide" data-intervalid="-1"onclick="slidePlay()">PLAY/PAUSE</button> | |||||
<button onclick="slideForward()">></button> | |||||
</div> | |||||
<div id="leaderBoard" class=""> | |||||
<button onclick="toggleLeaderBoard()">LeaderBoard</button> | |||||
<section id="listBoard">Loading...</section> | |||||
</div> | |||||
<div class="bottomRight"><input placeholder="Paste Json, visible only locally." type="text" id="sendHCJson"><button onclick="sendJson()">Send</button></div> | |||||
<section id="honeyComb"> | |||||
</section> | |||||
<section id="renderedHoneyComb"></section> | |||||
<script type="text/javascript" src="scripts/socketSetup.js"></script> | |||||
<script type="text/javascript" src="scripts/tools.js"></script> | |||||
<script type="text/javascript" src="scripts/renderer.js"></script> | |||||
<script type="text/javascript" src="scripts/leaderBoard.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> |
@ -0,0 +1,98 @@ | |||||
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; | |||||
var date = new Date(); | |||||
var seconds = date.getSeconds(); | |||||
var minutes = date.getMinutes(); | |||||
var hour = date.getHours(); | |||||
var leaderBoardServerJson = {}; | |||||
leaderBoardServerJson.timeStamp = date.getTime(); | |||||
for (var i = rankings.length - 1; i >= 0; i--) { | |||||
if( rankings[i].teamId == 235 ){ | |||||
results += "<p>Updated "+hour+"h "+minutes+"m "+seconds+"s</p>"; | |||||
results += "<h1>Cazziammolla Placement: "+rankings[i].rank+"</h1>"; | |||||
results += "<h2>with a score of: "+rankings[i].score+"</h2>"; | |||||
leaderBoardServerJson.placement = rankings[i].rank; | |||||
leaderBoardServerJson.score = rankings[i].score; | |||||
if (rankings[i].rank != points && points != 0){ | |||||
ringTheBell(); | |||||
} | |||||
points = rankings[i].rank; | |||||
} | |||||
}; | |||||
leaderBoardServerJson.settings = []; | |||||
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>"+settings[i].rankings[j].rank+"</td><td>"+settings[i].rankings[j].score+"</td></tr>" | |||||
leaderBoardServerJson.settings[i] = { rank: settings[i].rankings[j].rank, score: settings[i].rankings[j].score}; | |||||
} | |||||
}; | |||||
}; | |||||
var results = "<table><thead><th>Setting</th><th>Placement</th><th>Score</th></thead>"+results+"</table>"; | |||||
listBoard.innerHTML = results; | |||||
try{ | |||||
socket.emit('leaderBoard', JSON.stringify( leaderBoardServerJson)); | |||||
}catch(e){ | |||||
console.log("error"); | |||||
} | |||||
} | |||||
function updateLeaderBoard(){ | |||||
loadRankingJs('https://davar.icfpcontest.org/rankings.js?cachebuster='+ new Date().getTime()); | |||||
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(); | |||||
} | |||||
document.onkeydown = checkKey; | |||||
function checkKey(e) { | |||||
e = e || window.event; | |||||
if (e.keyCode == '37') { | |||||
slideBack(); | |||||
}else if(e.keyCode == '39') { | |||||
slideForward(); | |||||
} | |||||
} |
@ -0,0 +1,178 @@ | |||||
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}; |
@ -0,0 +1,17 @@ | |||||
var socket = io(); | |||||
/*Initializing the connection with the server via websockets */ | |||||
socket.emit('liveMessage', "true"); | |||||
socket.on("jsonHoneycomb",function(message){ | |||||
/* | |||||
When server sends data to the client it will trigger "message" event on the client side , by | |||||
using socket.on("message") , one cna listen for the ,message event and associate a callback to | |||||
be executed . The Callback function gets the dat sent from the server | |||||
*/ | |||||
console.log("Message from the server arrived") | |||||
prePopulate(message); | |||||
socket.emit('ackMessage', "true"); | |||||
}); | |||||
@ -0,0 +1,12 @@ | |||||
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); | |||||
} |
@ -0,0 +1,39 @@ | |||||
html, body { | |||||
margin: 0; | |||||
padding: 0; | |||||
height: 100%; | |||||
width: 100%; } | |||||
body { | |||||
background-color: #333; } | |||||
.hex { | |||||
float: left; | |||||
margin-left: 3px; | |||||
margin-bottom: -26px; } | |||||
.hex .top, .hex.disabled .top { | |||||
width: 0; | |||||
border-bottom: 30.02221px solid #6C6; | |||||
border-left: 52px solid transparent; | |||||
border-right: 52px solid transparent; } | |||||
.hex .middle { | |||||
width: 104px; | |||||
height: 60.04443px; | |||||
background: #6C6; } | |||||
.hex .bottom { | |||||
width: 0; | |||||
border-top: 30.02221px solid #6C6; | |||||
border-left: 52px solid transparent; | |||||
border-right: 52px solid transparent; } | |||||
.hex.disabled .top { | |||||
border-bottom-color: #efefef; } | |||||
.hex.disabled .middle { | |||||
background: #efefef; } | |||||
.hex.disabled .bottom { | |||||
border-top-color: #efefef; } | |||||
.hex-row { | |||||
clear: left; } | |||||
.hex-row.even { | |||||
margin-left: 53px; } | |||||
/*# sourceMappingURL=style.css.map */ |
@ -0,0 +1,7 @@ | |||||
{ | |||||
"version": 3, | |||||
"mappings": "AAiBA,UAAU;EACT,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;;AAEZ,IAAI;EACH,gBAAgB,EAAE,IAAI;;AAEvB,IAAK;EACJ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,aAAa,EAAE,KAAK;EAEpB,6BAAK;IACJ,KAAK,EAAE,CAAC;IACR,aAAa,EAAE,qBAAyB;IACxC,WAAW,EAAE,sBAA+B;IAC5C,YAAY,EAAE,sBAA+B;EAE9C,YAAQ;IACP,KAAK,EAzBK,KAAK;IA0Bf,MAAM,EAxBK,UAAkB;IAyB7B,UAAU,EAAE,IAAI;EAEjB,YAAQ;IACP,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,qBAAwB;IACpC,WAAW,EAAE,sBAA8B;IAC3C,YAAY,EAAE,sBAA8B;EAI5C,kBAAI;IAEH,mBAAmB,EAxCN,OAAO;EA2CrB,qBAAO;IACN,UAAU,EA5CG,OAAO;EA8CrB,qBAAO;IACN,gBAAgB,EA/CH,OAAO;EAkDtB,QAAK;IACJ,KAAK,EAAE,IAAI;IACX,aAAO;MACN,WAAW,EAAE,IAAgB", | |||||
"sources": ["style.scss"], | |||||
"names": [], | |||||
"file": "style.css" | |||||
} |
@ -0,0 +1,212 @@ | |||||
@activeColor: #FFDDA0; | |||||
@touchColor: #F7D7D7; | |||||
@unitColor: #C2F19D; | |||||
@sizeWidth: 100px; | |||||
@border: 1px; | |||||
@sizeHeight: @sizeWidth/sqrt(3); | |||||
@color: #efefef; | |||||
html, body{ | |||||
margin: 0; | |||||
padding: 0; | |||||
height: auto; | |||||
width: 100%; | |||||
} | |||||
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; | |||||
} | |||||
.bottomRight{ | |||||
position: fixed; | |||||
left: 0; | |||||
bottom: 0; | |||||
z-index: 9999; | |||||
background: #666; | |||||
padding: 10px; | |||||
button{ | |||||
margin-left: 10px; | |||||
margin-right: 10px; | |||||
} | |||||
input{ | |||||
min-width: 200px; | |||||
} | |||||
} | |||||
#controlBar{ | |||||
position: fixed; | |||||
top: 0; | |||||
width: 100%; | |||||
margin: 0 auto; | |||||
text-align: center; | |||||
z-index: 999; | |||||
// display: none; | |||||
&.visible{ | |||||
display: block; | |||||
} | |||||
.lefting{ | |||||
background: rgba(20,20,20, .5); | |||||
color: white; | |||||
float: left; | |||||
padding: 10px; | |||||
} | |||||
} | |||||
#honeyComb{ | |||||
canvas{ | |||||
position: absolute; | |||||
display: none; | |||||
height: 100%; | |||||
&.visible, &:first-child{ | |||||
display: block; | |||||
} | |||||
} | |||||
} | |||||
#leaderBoard:extend(.transition) { | |||||
position: fixed; | |||||
top: 0px; | |||||
right: 0; | |||||
width: 500px; | |||||
height: 100%; | |||||
overflow: hidden; | |||||
background-color: rgba(255,255,255,1); | |||||
right: -400px; | |||||
color: #333; | |||||
opacity: .2; | |||||
z-index: 999; | |||||
h1, h2, p{ | |||||
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: 100%/3; | |||||
text-align: center; | |||||
} | |||||
} | |||||
tr:nth-child(even){ | |||||
background-color: #dedede; | |||||
} | |||||
} | |||||
&.open:extend(.transition){ | |||||
right: 0; | |||||
opacity: 1; | |||||
} | |||||
} | |||||
.honeycombIndex{ | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
background-color: rgba(185, 5, 198, 0.29); | |||||
padding: 20px; | |||||
z-index: 999; | |||||
font-size: 50px; | |||||
} | |||||
.honeycombScore:extend(.honeycombIndex){ | |||||
top: 120px; | |||||
background-color: rgba(175, 0, 198, 0.29); | |||||
} | |||||
.canvasRendered{ | |||||
background-color: #333; | |||||
} | |||||
.hex { | |||||
float: left; | |||||
margin-left: @border; | |||||
margin-bottom: -@sizeWidth/4; | |||||
.top { | |||||
width: 0; | |||||
border-bottom: @sizeHeight/2 solid @color; | |||||
border-left: @sizeWidth/2 solid transparent; | |||||
border-right: @sizeWidth/2 solid transparent; | |||||
} | |||||
.middle { | |||||
width: @sizeWidth; | |||||
height: @sizeHeight; | |||||
background: @color; | |||||
} | |||||
.bottom { | |||||
width: 0; | |||||
border-top: @sizeHeight/2 solid @color; | |||||
border-left: @sizeWidth/2 solid transparent; | |||||
border-right: @sizeWidth/2 solid transparent; | |||||
} | |||||
&.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: @touchColor; | |||||
} | |||||
.middle:extend(.hex .middle){ | |||||
background: @touchColor; | |||||
} | |||||
.bottom:extend(.hex .bottom){ | |||||
border-top-color: @touchColor; | |||||
} | |||||
} | |||||
&.unitMember{ | |||||
.middle:extend(.hex .middle){ | |||||
background-color: @unitColor; | |||||
// background-image: | |||||
} | |||||
} | |||||
&-row{ | |||||
clear: left; | |||||
&.even { | |||||
margin-left: (@sizeWidth/2); | |||||
} | |||||
} | |||||
} | |||||
@ -0,0 +1,72 @@ | |||||
@function sqrt($r) { | |||||
$x0: 1; | |||||
$x1: $x0; | |||||
@for $i from 1 through 10 { | |||||
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0); | |||||
$x0: $x1; | |||||
} | |||||
@return $x1; | |||||
} | |||||
$disabledColor: #efefef; | |||||
$sizeWidth: 104px; | |||||
$border: 1px; | |||||
$sizeHeight: $sizeWidth/sqrt(3); | |||||
html, body{ | |||||
margin: 0; | |||||
padding: 0; | |||||
height: 100%; | |||||
width: 100%; | |||||
} | |||||
body{ | |||||
background-color: #333; | |||||
} | |||||
.hex { | |||||
float: left; | |||||
margin-left: 3px; | |||||
margin-bottom: -26px; | |||||
.top { | |||||
width: 0; | |||||
border-bottom: $sizeHeight/2 solid #6C6; | |||||
border-left: $sizeWidth/2 solid transparent; | |||||
border-right: $sizeWidth/2 solid transparent; | |||||
} | |||||
.middle { | |||||
width: $sizeWidth; | |||||
height: $sizeHeight; | |||||
background: #6C6; | |||||
} | |||||
.bottom { | |||||
width: 0; | |||||
border-top: $sizeHeight/2 solid #6C6; | |||||
border-left: $sizeWidth/2 solid transparent; | |||||
border-right: $sizeWidth/2 solid transparent; | |||||
} | |||||
&.disabled{ | |||||
.top{ | |||||
@extend .top; | |||||
border-bottom-color: $disabledColor; | |||||
} | |||||
.middle{ | |||||
background: $disabledColor; | |||||
} | |||||
.bottom{ | |||||
border-top-color: $disabledColor; | |||||
} | |||||
} | |||||
&-row{ | |||||
clear: left; | |||||
&.even { | |||||
margin-left: ($sizeWidth/2)+1; | |||||
} | |||||
} | |||||
} | |||||
@ -1 +1,4 @@ | |||||
{"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} | |||||
{"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":0,"y":0},{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1}],"sourceLength":100} |
@ -0,0 +1,122 @@ | |||||
var express = require('express'), | |||||
http = require('http'), | |||||
io = require('socket.io'), | |||||
bodyParser = require('body-parser'), | |||||
cookieParser = require('cookie-parser'), | |||||
mongojs = require('mongojs'); | |||||
var app = express(); | |||||
app.use(express.static('./public')); | |||||
var mongoUri = "mongodb://localhost:27017/visualizer"; | |||||
var db = mongojs( mongoUri ); | |||||
var honeyCombs = db.collection('honeyCombs'); | |||||
var leaderBoards = db.collection('leaderBoards'); | |||||
// leaderBoards.insert({dio: "cane", type: "flyingPig"}); | |||||
//Specifying the public folder of the server to make the html accesible using the static middleware | |||||
app.use(cookieParser()); | |||||
var jsonParser = bodyParser.json() | |||||
// create application/x-www-form-urlencoded parser | |||||
var urlencodedParser = bodyParser.urlencoded({ extended: false }) | |||||
// POST /login gets urlencoded bodies | |||||
function findSocketByCookie(cookie) { | |||||
for(var i in io.sockets.connected) { | |||||
var socket = io.sockets.connected[i]; | |||||
if(socket.handshake.headers.cookie.indexOf(cookie) !== -1){ | |||||
return socket; | |||||
} | |||||
} | |||||
} | |||||
app.post('/show', urlencodedParser, function (req, res) { | |||||
res.sendStatus(200); | |||||
console.log("Sending json to live interfaces..."); | |||||
// console.dir(io.sockets.connected); | |||||
for(var i in io.sockets.connected) { | |||||
var socket = io.sockets.connected[i]; | |||||
socket.emit("jsonHoneycomb", req.body.honeyComb); | |||||
saveQuery(req.body.honeyComb); | |||||
} | |||||
// var socket = findSocketByCookie(req.cookies.myUniqueCookie); | |||||
}); | |||||
var server = http.createServer(app).listen(8080); | |||||
console.log("Listening on port 8080"); | |||||
console.log("Send jsons to /show please."); | |||||
//Server listens on the port 8124 | |||||
var io = io.listen(server); | |||||
/*initializing the websockets communication , server instance has to be sent as the argument */ | |||||
io.sockets.on('connection', function(socket){ | |||||
console.log("New Client Connected."); | |||||
socket.on('disconnect', function () { | |||||
console.log("Client disconnected.") | |||||
}); | |||||
socket.on('ackMessage', function(msg){ | |||||
if(msg == "true"){ | |||||
console.log('Message received.'); | |||||
} | |||||
}); | |||||
socket.on('liveMessage', function(msg){ | |||||
if(msg == "true"){ | |||||
console.log('Live interface connected.'); | |||||
} | |||||
}); | |||||
socket.on('jsonToParse', function(msg){ | |||||
console.log('Json received.'); | |||||
saveQuery(msg); | |||||
// socket.emit("jsonHoneycomb", msg); | |||||
}); | |||||
socket.on('leaderBoard',function(lb){ | |||||
leaderBoards.find().sort({timeStamp:-1}).limit(1, function(err, docs){ | |||||
var parsedLb = JSON.parse(lb); | |||||
if( docs.length ){ | |||||
if(typeof docs[0].timeStamp != "undefined"){ | |||||
if( parsedLb.timeStamp - docs[0].timeStamp > 600000){ | |||||
leaderBoards.insert(parsedLb); | |||||
console.log("Saving stats report."); | |||||
} | |||||
} | |||||
}else{ | |||||
leaderBoards.insert(parsedLb); | |||||
} | |||||
if(err){ | |||||
console.dir(err); | |||||
} | |||||
}); | |||||
// | |||||
}); | |||||
}); | |||||
function saveQuery(query){ | |||||
var d = new Date(); | |||||
d = | |||||
("00" + (d.getMonth() + 1)).slice(-2) + "/" + | |||||
("00" + d.getDate()).slice(-2) + "/" + | |||||
d.getFullYear() + " " + | |||||
("00" + d.getHours()).slice(-2) + ":" + | |||||
("00" + d.getMinutes()).slice(-2) + ":" + | |||||
("00" + d.getSeconds()).slice(-2) | |||||
; | |||||
console.log("Saving query in db..."); | |||||
honeyCombs.insert({ honeyComb: query, dateStamp: d }); | |||||
} |