mirror of https://github.com/dirtbags/moth.git
Add scoreboard plus formatting tweaks
This commit is contained in:
Neale Pickett
parent
1fdba38ad3
commit
7942f4fc5a
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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)
|
||||||
|
|
||||||
|
|
|
||||||
159
src/static.go
159
src/static.go
|
|
@ -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>
|
||||||
`,
|
`,
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue