moth/theme/scoreboard.html

142 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Scoreboard</title>
<link rel="stylesheet" href="basic.css">
<meta name="viewport" content="width=device-width">
<script src="moth-pwa.js" type="text/javascript"></script>
<script>
function update(state) {
let element = document.getElementById("scoreboard");
let teamnames = state["teams"];
let pointslog = state["points"];
let highscore = {};
let teams = {};
// Every machine that's displaying the scoreboard helpfully stores the last 20 values of
// points.json for us, in case of catastrophe. Thanks, y'all!
//
// We have been doing some letiation on this "everybody backs up the server state" trick since 2009.
// We have needed it 0 times.
let pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || [];
if (pointshistory.length >= 20){
pointshistory.shift();
}
pointshistory.push(pointslog);
localStorage.setItem("pointshistory", JSON.stringify(pointshistory));
// Dole out points
for (let i in pointslog) {
let entry = pointslog[i];
let timestamp = entry[0];
let teamhash = entry[1];
let category = entry[2];
let points = entry[3];
let 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) {
let score = 0;
for (let category in highscore) {
score += (t[category] || 0) / highscore[category];
}
return score;
}
function teamCompare(a, b) {
return teamScore(a) - teamScore(b);
}
// Figure out how to order each team on the scoreboard
let winners = [];
for (let i in teams) {
winners.push(teams[i]);
}
winners.sort(teamCompare);
winners.reverse();
// Clear out the element we're about to populate
Array.from(element.childNodes).map(e => e.remove());
let maxWidth = 100 / Object.keys(highscore).length;
for (let i in winners) {
let team = winners[i];
let row = document.createElement("div");
let ncat = 0;
for (let category in highscore) {
let catHigh = highscore[category];
let catTeam = team[category] || 0;
let catPct = catTeam / catHigh;
let width = maxWidth * catPct;
let bar = document.createElement("span");
bar.classList.add("category");
bar.classList.add("cat" + ncat);
bar.style.width = width + "%";
bar.textContent = category + ": " + catTeam;
bar.title = bar.textContent;
row.appendChild(bar);
ncat += 1;
}
let te = document.createElement("span");
te.classList.add("teamname");
te.textContent = teamnames[team.__hash__];
row.appendChild(te);
element.appendChild(row);
}
}
function once() {
fetch("points.json")
.then(resp => {
return resp.json();
})
.then(obj => {
update(obj);
})
.catch(err => {
console.log(err);
});
}
function init() {
let base = window.location.href.replace("scoreboard.html", "");
document.querySelector("#location").textContent = base;
setInterval(once, 60000);
once();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
</script>
</head>
<body>
<h1 class="Success">Scoreboard</h1>
<h4 id="location"></h4>
<section>
<div id="scoreboard"></div>
</section>
<nav>
<ul>
<li><a href="index.html">Puzzles</a></li>
<li><a href="scoreboard.html">Scoreboard</a></li>
</ul>
</nav>
</body>
</html>