Clean up and comment js in puzzle list and scoreboard

This commit is contained in:
Neale Pickett 2018-10-10 23:33:26 +00:00
parent ab0cd35d2f
commit aa23e248b4
3 changed files with 122 additions and 126 deletions

View File

@ -9,10 +9,9 @@
function render(obj) { function render(obj) {
puzzlesElement = document.createElement('div'); puzzlesElement = document.createElement('div');
let cats = [];
for (let cat in obj) { // Create a sorted list of category names
cats.push(cat); let cats = Object.keys(obj);
}
cats.sort(); cats.sort();
for (let cat of cats) { for (let cat of cats) {
@ -29,6 +28,7 @@ function render(obj) {
pdiv.appendChild(h); pdiv.appendChild(h);
h.textContent = cat; h.textContent = cat;
// Extras if we're running a devel server
if (obj.__devel__) { if (obj.__devel__) {
var a = document.createElement('a'); var a = document.createElement('a');
h.insertBefore(a, h.firstChild); h.insertBefore(a, h.firstChild);
@ -50,6 +50,7 @@ function render(obj) {
i.textContent = " "; i.textContent = " ";
if (points === 0) { if (points === 0) {
// Sentry: there are no more puzzles in this category
i.textContent = "✿"; i.textContent = "✿";
} else { } else {
var a = document.createElement('a'); var a = document.createElement('a');
@ -66,16 +67,22 @@ function render(obj) {
function init() { function init() {
fetch("puzzles.json") fetch("puzzles.json")
.then(function(resp) { .then(resp => {
return resp.json(); return resp.json();
}).then(function(obj) { })
.then(obj => {
render(obj); render(obj);
}).catch(function(err) { })
.catch(err => {
console.log("Error", err); console.log("Error", err);
}); });
} }
document.addEventListener("DOMContentLoaded", init); if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
</script> </script>
</head> </head>
<body> <body>

View File

@ -34,7 +34,6 @@ function init() {
let st = document.createElement("script"); let st = document.createElement("script");
document.head.appendChild(st); document.head.appendChild(st);
st.src = base + script; st.src = base + script;
} }
// List associated files // List associated files

View File

@ -5,130 +5,120 @@
<link rel="stylesheet" href="basic.css"> <link rel="stylesheet" href="basic.css">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<script> <script>
function loadJSON(url, callback) { function update(state) {
function loaded(e) { let element = document.getElementById("scoreboard");
callback(e.target.response); 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);
} }
var xhr = new XMLHttpRequest()
xhr.onload = loaded;
xhr.open("GET", url, true);
xhr.responseType = "json";
xhr.send();
} }
function scoreboard(element, continuous) { function once() {
function update(state) { fetch("points.json")
var teamnames = state["teams"]; .then(resp => {
var pointslog = state["points"]; return resp.json();
var pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || []; })
if (pointshistory.length >= 20){ .then(obj => {
pointshistory.shift(); update(obj);
} })
pointshistory.push(pointslog); .catch(err => {
localStorage.setItem("pointshistory", JSON.stringify(pointshistory)); console.log(err);
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]);
}
if (winners.length == 0) {
// No teams!
return;
}
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("category");
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);
}
}
function once() {
loadJSON("points.json", update);
}
if (continuous) {
setInterval(once, 60000);
}
once();
} }
function init() { function init() {
var sb = document.getElementById("scoreboard"); setInterval(once, 60000);
scoreboard(sb, true); once();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
} }
document.addEventListener("DOMContentLoaded", init);
</script> </script>
</head> </head>
<body> <body>