mirror of https://github.com/dirtbags/moth.git
JavaScript scoreboard
This commit is contained in:
Neale Pickett
parent
7304c087c6
commit
0df8c6c072
|
|
@ -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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -2,11 +2,19 @@
|
||||||
<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>
|
||||||
|
<script>
|
||||||
|
function init() {
|
||||||
|
var sb = document.getElementById("scoreboard");
|
||||||
|
scoreboard(sb);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("load", init);
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Scoreboard</h1>
|
<h1>Scoreboard</h1>
|
||||||
|
<div id="scoreboard"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue