neale/moth
neale
/
moth
mirror of https://github.com/dirtbags/moth.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

JavaScript scoreboard

This commit is contained in:
Neale Pickett 2015-04-03 16:52:43 -06:00
parent 5833c66db0
commit 08ed4f7048
5 changed files with 1236 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
html/ctf.css → html/css/style.css
View File

@ -1,20 +1,14 @@
/* Pallette: http://paletton.com/#uid=3360u0kkWtL00++bxKws6lGT03t */ /* Pallette: http://paletton.com/#uid=3360u0kkWtL00++bxKws6lGT03t */
@import "fonts/maven_pro.css"; @import "../fonts/maven_pro.css";
html { html {
background: #1C1000 url(stripes.jpg) no-repeat left bottom; background: #1C1000 url(../stripes.jpg) no-repeat left bottom;
background-size: cover; background-size: cover;
min-height: 100%; min-height: 100%;
font-family: "Maven Pro", Ubuntu, sans-serif; font-family: "Maven Pro", Ubuntu, sans-serif;
} }
body {
padding: 10px;
max-width: 35em;
margin: 1em auto;
border-radius: 1em;
}
h1, h2, h3 { h1, h2, h3 {
color: #AD6F15; color: #AD6F15;
@ -24,19 +18,13 @@ h1, h2, h3 {
h1:first-child { h1:first-child {
color: #9E1336; color: #9E1336;
background: rgba(216, 75, 110, 0.15); background: rgba(28, 16, 0, 0.8);
font-size: 2em; font-size: 3em;
border-radius: 0.2em; border-radius: 0.2em;
padding: 0 0.3em; padding: 0 0.3em;
text-align: center; text-align: center;
} max-width: 6em;
float: left;
.block{
background: #FFDAA3;
background-size: 100% 100%;
color: #AD6F15;
border-radius: 0.6em;
padding: 0.2em;
} }
.readme, pre { .readme, pre {
@ -137,11 +125,22 @@ nav li + li:before {
content: " | "; content: " | ";
} }
section {
background: #FFDAA3 url("../trident.jpg") no-repeat center;
background-size: 100% 100%;
color: #AD6F15;
border-radius: 0.6em;
padding: 0.2em;
}
/**** Terminal ****/ /**** Terminal ****/
#terminal { #terminal {
background: #FFDAA3 url("trident.jpg") no-repeat center; padding: 10px;
background-size: 100% 100%; max-width: 35em;
margin: 1em auto;
border-radius: 1em;
} }
#terminal #output { #terminal #output {
@ -167,6 +166,44 @@ nav li + li:before {
border: solid rgba(173, 111, 21, 0.4) 1px; border: solid rgba(173, 111, 21, 0.4) 1px;
} }
/**** Scoreboard ****/
#scoreboard {
width: 100%;
clear: both;
background: rgba(25, 0, 6, 0.8);
border-radius: 2em;
}
#scoreboard span {
font-size: 75%;
display: inline-block;
margin: 0;
border: 0;
overflow: hidden;
height: 2.2em;
}
#scoreboard .teamname {
font-size: 133%;
color: #D84B6E;
opacity: 0.8;
position: absolute;
right: 1em;
height: 1.1em;
}
.cat0, .cat9{background-color: #a6cee3; color: black;}
.cat1, .cat10 {background-color: #1f78b4; color: white;}
.cat2, .cat11 {background-color: #b2df8a; color: black;}
.cat3, .cat11 {background-color: #33a02c; color: white;}
.cat4, .cat12 {background-color: #cab2d6; color: black;}
.cat5, .cat13 {background-color: #e31a1c; color: white;}
.cat6, .cat14 {background-color: #fdbf6f; color: black;}
.cat7, .cat15 {background-color: #ff7f00; color: black;}
.cat8, .cat16 {background-color: #fb9a99; color: black;}
.wide { .wide {
max-width: inherit; max-width: inherit;
} }
@ -177,27 +214,3 @@ nav li + li:before {
font-size: small; font-size: small;
text-align: center; text-align: center;
} }
/* Scoreboard stuff */
.scoreboard, .scoreboard body {
height: 100%;
margin: 0;
padding: 0;
max-width: none;
}
#scoreboard {
height: 60%;
font-size: 75%;
}
#scoreboard td {
height: 100%;
}
#chart {
height: 30%;
width: 100%;
}

15
html/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Welcome</title> <title>Welcome</title>
<link rel="stylesheet" href="ctf.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/terminal.js" async></script> <script src="js/terminal.js" async></script>
<script> <script>
function init() { function init() {
@ -20,10 +20,19 @@ window.addEventListener("load", init);
<body> <body>
<h1>Tracer FIRE 6E</h1> <h1>Tracer FIRE 6E</h1>
<div class="block" id="terminal"> <section id="terminal">
<div id="output"></div> <div id="output"></div>
<span id="prompt">WOPR%</span> <span id="prompt">WOPR%</span>
<input id="cli"></input> <input id="cli"></input>
</div> </section>
<section id="scoreboard">
<header>
<h2>Scoreboard</h2>
</header>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</section>
</body> </body>
</html> </html>

100
html/js/scoreboard.js Normal file
View File

@ -0,0 +1,100 @@
function loadJSON(url, callback) {
function loaded(e) {
callback(e.target.response);
}
var xhr = new XMLHttpRequest()
xhr.onload = loaded;
xhr.open("GET", url, true);
xhr.responseType = "json";
xhr.send();
}
function scoreboard(element) {
function update(state) {
var teamnames = state["teams"];
var pointslog = state["points"];
var highscore = {};
var teams = {};
// Dole out points
for (var i in pointslog) {
var entry = pointslog[i];
var timestamp = entry[0];
var teamhash = entry[1];
var category = entry[2];
var points = entry[3];
var team = teams[teamhash] || {__hash__: teamhash};
// Add points to team's points for that category
team[category] = (team[category] || 0) + points;
// Record highest score in a category
highscore[category] = Math.max(highscore[category] || 0, team[category]);
teams[teamhash] = team;
}
// Sort by team score
function teamScore(t) {
var score = 0;
for (var category in highscore) {
score += (t[category] || 0) / highscore[category];
}
// XXX: This function really shouldn't have side effects.
t.__score__ = score;
return score;
}
function teamCompare(a, b) {
return teamScore(a) - teamScore(b);
}
var winners = [];
for (var i in teams) {
winners.push(teams[i]);
}
winners.sort(teamCompare);
winners.reverse();
// Clear out the element we're about to populate
while (element.lastChild) {
element.removeChild(element.lastChild);
}
// Populate!
var topActualScore = winners[0].__score__;
// (100 / ncats) * (ncats / topActualScore);
var maxWidth = 100 / topActualScore;
for (var i in winners) {
var team = winners[i];
var row = document.createElement("div");
var ncat = 0;
for (var category in highscore) {
var catHigh = highscore[category];
var catTeam = team[category] || 0;
var catPct = catTeam / catHigh;
var width = maxWidth * catPct;
var bar = document.createElement("span");
bar.classList.add("cat" + ncat);
bar.style.width = width + "%";
bar.textContent = category + ": " + catTeam;
bar.title = bar.textContent;
row.appendChild(bar);
ncat += 1;
}
var te = document.createElement("span");
te.classList.add("teamname");
te.textContent = teamnames[team.__hash__];
row.appendChild(te);
element.appendChild(row);
}
}
loadJSON("points.json", update);
}

1051
html/points.json Normal file
View File

File diff suppressed because it is too large Load Diff

24
html/scoreboard.html
View File

@ -1,12 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Scoreboard</title> <title>Scoreboard</title>
<link rel="stylesheet" href="ctf.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css">
<script src="points.js" async></script> <script src="js/scoreboard.js" async></script>
</head> <script>
<body> function init() {
<h1>Scoreboard</h1> var sb = document.getElementById("scoreboard");
scoreboard(sb);
}
</body> window.addEventListener("load", init);
</script>
</head>
<body>
<h1>Scoreboard</h1>
<div id="scoreboard"></div>
</body>
</html> </html>