Add scoreboard plus formatting tweaks

This commit is contained in:
Neale Pickett 2018-09-19 00:22:03 +00:00
parent 1fdba38ad3
commit 7942f4fc5a
5 changed files with 423 additions and 16 deletions

44
res/basic.css Normal file
View File

@ -0,0 +1,44 @@
/* http://paletton.com/#uid=63T0u0k7O9o3ouT6LjHih7ltq4c */
body {
font-family: sans-serif;
max-width: 40em;
background: #282a33;
color: #f6efdc;
}
a:any-link {
color: #8b969a;
}
h1 {
background: #5e576b;
color: #9e98a8;
}
.Fail, .Error {
background: #3a3119;
color: #ffcc98;
}
.Fail:before {
content: "Fail: ";
}
.Error:before {
content: "Error: ";
}
p {
margin: 1em 0em;
}
form, pre {
margin: 1em;
}
input {
padding: 0.6em;
margin: 0.2em;
}
nav {
border: solid black 2px;
}
nav ul, .category ul {
padding: 1em;
}
nav li, .category li {
display: inline;
margin: 1em;
}

81
res/puzzles.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>Open Puzzles</title>
<link rel="stylesheet" href="basic.css">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="res/icon.svg" type="image/svg+xml">
<link rel="icon" href="res/icon.png" type="image/png">
<script>
function render(obj) {
puzzlesElement = document.createElement('div');
let cats = [];
for (let cat in obj) {
cats.push(cat);
console.log(cat);
}
cats.sort();
for (let cat of cats) {
let puzzles = obj[cat];
let pdiv = document.createElement('div');
pdiv.className = 'category';
let h = document.createElement('h2');
pdiv.appendChild(h);
h.textContent = cat;
let l = document.createElement('ul');
pdiv.appendChild(l);
for (var puzzle of puzzles) {
var points = puzzle[0];
var id = puzzle[1];
var i = document.createElement('li');
l.appendChild(i);
if (points === 0) {
i.textContent = "‡";
} else {
var a = document.createElement('a');
i.appendChild(a);
a.textContent = points;
a.href = cat + "/" + id + "/index.html";
}
}
puzzlesElement.appendChild(pdiv);
document.getElementById("puzzles").appendChild(puzzlesElement);
}
}
function init() {
fetch("puzzles.json")
.then(function(resp) {
return resp.json();
}).then(function(obj) {
render(obj);
}).catch(function(err) {
console.log("Error", err);
});
}
document.addEventListener("DOMContentLoaded", init);
</script>
</head>
<body>
<h1 class="Success">Open Puzzles</h1>
<section>
<div id="puzzles"></div>
</section>
<nav>
<ul>
<li><a href="puzzles.html">Puzzles</a></li>
<li><a href="scoreboard.html">Scoreboard</a></li>
</ul>
</nav>
</body>
</html>

147
res/scoreboard.html Normal file
View File

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<title>Open Puzzles</title>
<link rel="stylesheet" href="basic.css">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="res/icon.svg" type="image/svg+xml">
<link rel="icon" href="res/icon.png" type="image/png">
<script>
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, continuous) {
function update(state) {
var teamnames = state["teams"];
var pointslog = state["points"];
var pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || [];
if (pointshistory.length >= 20){
pointshistory.shift();
}
pointshistory.push(pointslog);
localStorage.setItem("pointshistory", JSON.stringify(pointshistory));
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("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() {
var sb = document.getElementById("scoreboard");
scoreboard(sb, true);
}
document.addEventListener("DOMContentLoaded", init);
</script>
</head>
<body>
<h1 class="Success">Scoreboard</h1>
<section>
<div id="scoreboard"></div>
</section>
<nav>
<ul>
<li><a href="puzzles.html">Puzzles</a></li>
<li><a href="scoreboard.html">Scoreboard</a></li>
</ul>
</nav>
</body>
</html>

View File

@ -5,9 +5,11 @@ import (
"encoding/json" "encoding/json"
"fmt" "fmt"
"io" "io"
"io/ioutil"
"log" "log"
"net/http" "net/http"
"os" "os"
"rand"
"strconv" "strconv"
"strings" "strings"
) )
@ -285,13 +287,15 @@ func (ctx Instance) puzzlesHandler(w http.ResponseWriter, req *http.Request) {
} }
func (ctx Instance) pointsHandler(w http.ResponseWriter, req *http.Request) { func (ctx Instance) pointsHandler(w http.ResponseWriter, req *http.Request) {
log := ctx.PointsLog() plog := ctx.PointsLog()
jlog, err := json.Marshal(log) jlog, err := json.Marshal(plog)
if err != nil { if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError) http.Error(w, err.Error(), http.StatusInternalServerError)
return return
} }
// XXX: go through plog, building an array of teams, so we can anonymize team IDs
w.Header().Set("Content-Type", "application/json") w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusOK) w.WriteHeader(http.StatusOK)

View File

@ -97,14 +97,14 @@ h1 {
background: #5e576b; background: #5e576b;
color: #9e98a8; color: #9e98a8;
} }
h1.Fail, h1.Error { .Fail, .Error {
background: #3a3119; background: #3a3119;
color: #ffcc98; color: #ffcc98;
} }
h1.Fail:before { .Fail:before {
content: "Fail: "; content: "Fail: ";
} }
h1.Error:before { .Error:before {
content: "Error: "; content: "Error: ";
} }
p { p {
@ -117,15 +117,15 @@ input {
padding: 0.6em; padding: 0.6em;
margin: 0.2em; margin: 0.2em;
} }
li {
margin: 0.5em 0em;
}
nav { nav {
border: solid black 2px; border: solid black 2px;
} }
nav li { nav ul, .category ul {
padding: 1em;
}
nav li, .category li {
display: inline; display: inline;
margin: 2em; margin: 1em;
} }
`, `,
) )
@ -158,7 +158,136 @@ func staticScoreboard(w http.ResponseWriter) {
ShowHtml( ShowHtml(
w, Success, w, Success,
"Scoreboard", "Scoreboard",
"XXX: This would be the scoreboard", `
<section>
<div id="scoreboard"></div>
</section>
<script>
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, continuous) {
function update(state) {
var teamnames = state["teams"];
var pointslog = state["points"];
var pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || [];
if (pointshistory.length >= 20){
pointshistory.shift();
}
pointshistory.push(pointslog);
localStorage.setItem("pointshistory", JSON.stringify(pointshistory));
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("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() {
var sb = document.getElementById("scoreboard");
scoreboard(sb, true);
}
document.addEventListener("DOMContentLoaded", init);
</script>
`,
) )
} }
@ -167,11 +296,12 @@ func staticPuzzles(w http.ResponseWriter) {
w, Success, w, Success,
"Open Puzzles", "Open Puzzles",
` `
<div id="puzzles"></div> <section>
<div id="puzzles"></div>
</section>
<script> <script>
function render(obj) { function render(obj) {
let element = document.getElementById("puzzles"); puzzlesElement = document.createElement('div');
let cats = []; let cats = [];
for (let cat in obj) { for (let cat in obj) {
cats.push(cat); cats.push(cat);
@ -209,7 +339,8 @@ function render(obj) {
} }
} }
element.appendChild(pdiv); puzzlesElement.appendChild(pdiv);
document.getElementById("puzzles").appendChild(puzzlesElement);
} }
} }
@ -224,7 +355,7 @@ function init() {
}); });
} }
window.addEventListener("load", init); document.addEventListener("DOMContentLoaded", init);
</script> </script>
`, `,
) )