2018-09-18 18:22:03 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2018-09-18 21:29:05 -06:00
|
|
|
<title>Scoreboard</title>
|
2018-09-18 18:22:03 -06:00
|
|
|
<link rel="stylesheet" href="basic.css">
|
|
|
|
|
<meta name="viewport" content="width=device-width">
|
2019-10-25 16:53:40 -06:00
|
|
|
<script src="moth-pwa.js" type="text/javascript"></script>
|
2018-09-18 18:22:03 -06:00
|
|
|
<script>
|
2018-10-10 17:33:26 -06:00
|
|
|
function update(state) {
|
2019-11-04 09:28:35 -07:00
|
|
|
let element = document.getElementById("scoreboard")
|
|
|
|
|
let teamnames = state["teams"]
|
|
|
|
|
let pointslog = state["points"]
|
|
|
|
|
let highscore = {}
|
|
|
|
|
let teams = {}
|
2018-10-10 17:33:26 -06:00
|
|
|
|
|
|
|
|
// 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.
|
2019-11-04 09:28:35 -07:00
|
|
|
let pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || []
|
2018-10-10 17:33:26 -06:00
|
|
|
if (pointshistory.length >= 20){
|
2019-11-04 09:28:35 -07:00
|
|
|
pointshistory.shift()
|
2018-10-02 09:22:09 -06:00
|
|
|
}
|
2019-11-04 09:28:35 -07:00
|
|
|
pointshistory.push(pointslog)
|
|
|
|
|
localStorage.setItem("pointshistory", JSON.stringify(pointshistory))
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2018-10-10 17:33:26 -06:00
|
|
|
// Dole out points
|
|
|
|
|
for (let i in pointslog) {
|
2019-11-04 09:28:35 -07:00
|
|
|
let entry = pointslog[i]
|
|
|
|
|
let timestamp = entry[0]
|
|
|
|
|
let teamhash = entry[1]
|
|
|
|
|
let category = entry[2]
|
|
|
|
|
let points = entry[3]
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2019-11-04 09:28:35 -07:00
|
|
|
let team = teams[teamhash] || {__hash__: teamhash}
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2018-10-10 17:33:26 -06:00
|
|
|
// Add points to team's points for that category
|
2019-11-04 09:28:35 -07:00
|
|
|
team[category] = (team[category] || 0) + points
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2018-10-10 17:33:26 -06:00
|
|
|
// Record highest score in a category
|
2019-11-04 09:28:35 -07:00
|
|
|
highscore[category] = Math.max(highscore[category] || 0, team[category])
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2019-11-04 09:28:35 -07:00
|
|
|
teams[teamhash] = team
|
2018-10-10 17:33:26 -06:00
|
|
|
}
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2018-10-10 17:33:26 -06:00
|
|
|
// Sort by team score
|
|
|
|
|
function teamScore(t) {
|
2019-11-04 09:28:35 -07:00
|
|
|
let score = 0
|
2018-10-10 17:33:26 -06:00
|
|
|
for (let category in highscore) {
|
2019-11-04 09:28:35 -07:00
|
|
|
score += (t[category] || 0) / highscore[category]
|
2018-10-02 09:22:09 -06:00
|
|
|
}
|
2019-11-04 09:28:35 -07:00
|
|
|
return score
|
2018-10-10 17:33:26 -06:00
|
|
|
}
|
|
|
|
|
function teamCompare(a, b) {
|
2019-11-04 09:28:35 -07:00
|
|
|
return teamScore(a) - teamScore(b)
|
2018-10-10 17:33:26 -06:00
|
|
|
}
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2018-10-10 17:33:26 -06:00
|
|
|
// Figure out how to order each team on the scoreboard
|
2019-11-04 09:28:35 -07:00
|
|
|
let winners = []
|
2018-10-10 17:33:26 -06:00
|
|
|
for (let i in teams) {
|
2019-11-04 09:28:35 -07:00
|
|
|
winners.push(teams[i])
|
2018-10-10 17:33:26 -06:00
|
|
|
}
|
2019-11-04 09:28:35 -07:00
|
|
|
winners.sort(teamCompare)
|
|
|
|
|
winners.reverse()
|
2018-10-10 17:33:26 -06:00
|
|
|
|
|
|
|
|
// Clear out the element we're about to populate
|
2019-11-04 09:28:35 -07:00
|
|
|
Array.from(element.childNodes).map(e => e.remove())
|
2018-10-10 17:33:26 -06:00
|
|
|
|
2019-11-04 09:28:35 -07:00
|
|
|
let maxWidth = 100 / Object.keys(highscore).length
|
2018-10-10 17:33:26 -06:00
|
|
|
for (let i in winners) {
|
2019-11-04 09:28:35 -07:00
|
|
|
let team = winners[i]
|
|
|
|
|
let row = document.createElement("div")
|
|
|
|
|
let ncat = 0
|
2018-10-10 17:33:26 -06:00
|
|
|
for (let category in highscore) {
|
2019-11-04 09:28:35 -07:00
|
|
|
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
|
2018-10-02 09:22:09 -06:00
|
|
|
}
|
|
|
|
|
|
2019-11-04 09:28:35 -07:00
|
|
|
let te = document.createElement("span")
|
|
|
|
|
te.classList.add("teamname")
|
|
|
|
|
te.textContent = teamnames[team.__hash__]
|
|
|
|
|
row.appendChild(te)
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2019-11-04 09:28:35 -07:00
|
|
|
element.appendChild(row)
|
2018-10-02 09:22:09 -06:00
|
|
|
}
|
2018-10-10 17:33:26 -06:00
|
|
|
}
|
2018-10-02 09:22:09 -06:00
|
|
|
|
2018-10-10 17:33:26 -06:00
|
|
|
function once() {
|
|
|
|
|
fetch("points.json")
|
|
|
|
|
.then(resp => {
|
2019-11-04 09:28:35 -07:00
|
|
|
return resp.json()
|
2018-10-10 17:33:26 -06:00
|
|
|
})
|
|
|
|
|
.then(obj => {
|
2019-11-04 09:28:35 -07:00
|
|
|
update(obj)
|
2018-10-10 17:33:26 -06:00
|
|
|
})
|
|
|
|
|
.catch(err => {
|
2019-11-04 09:28:35 -07:00
|
|
|
console.log(err)
|
|
|
|
|
})
|
2018-09-18 18:22:03 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function init() {
|
2019-11-04 09:28:35 -07:00
|
|
|
let base = window.location.href.replace("scoreboard.html", "")
|
|
|
|
|
document.querySelector("#location").textContent = base
|
2019-03-07 07:53:58 -07:00
|
|
|
|
2019-11-04 09:28:35 -07:00
|
|
|
setInterval(once, 60000)
|
|
|
|
|
once()
|
2018-10-10 17:33:26 -06:00
|
|
|
}
|
|
|
|
|
if (document.readyState === "loading") {
|
2019-11-04 09:28:35 -07:00
|
|
|
document.addEventListener("DOMContentLoaded", init)
|
2018-10-10 17:33:26 -06:00
|
|
|
} else {
|
2019-11-04 09:28:35 -07:00
|
|
|
init()
|
2018-09-18 18:22:03 -06:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1 class="Success">Scoreboard</h1>
|
2019-03-07 07:53:58 -07:00
|
|
|
<h4 id="location"></h4>
|
2018-09-18 18:22:03 -06:00
|
|
|
<section>
|
|
|
|
|
<div id="scoreboard"></div>
|
|
|
|
|
</section>
|
|
|
|
|
<nav>
|
|
|
|
|
<ul>
|
2019-02-22 19:09:38 -07:00
|
|
|
<li><a href="index.html">Puzzles</a></li>
|
2018-09-18 18:22:03 -06:00
|
|
|
<li><a href="scoreboard.html">Scoreboard</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
