mirror of https://github.com/dirtbags/moth.git
Bring in theme from devel
This commit is contained in:
parent
464261cd57
commit
8ed07e2e29
File diff suppressed because one or more lines are too long
|
@ -5,6 +5,9 @@ body {
|
||||||
background: #282a33;
|
background: #282a33;
|
||||||
color: #f6efdc;
|
color: #f6efdc;
|
||||||
}
|
}
|
||||||
|
body.wide {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
a:any-link {
|
a:any-link {
|
||||||
color: #8b969a;
|
color: #8b969a;
|
||||||
}
|
}
|
||||||
|
@ -57,18 +60,18 @@ input:invalid {
|
||||||
min-height: 3em;
|
min-height: 3em;
|
||||||
border: solid black 2px;
|
border: solid black 2px;
|
||||||
}
|
}
|
||||||
#scoreboard {
|
#rankings {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scoreboard span {
|
#rankings span {
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 1.7em;
|
height: 1.7em;
|
||||||
}
|
}
|
||||||
#scoreboard span.teamname {
|
#rankings span.teamname {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0 0 3px black;
|
text-shadow: 0 0 3px black;
|
||||||
|
@ -76,7 +79,7 @@ input:invalid {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0.2em;
|
right: 0.2em;
|
||||||
}
|
}
|
||||||
#scoreboard div * {white-space: nowrap;}
|
#rankings div * {white-space: nowrap;}
|
||||||
.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
|
.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
|
||||||
.cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}
|
.cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}
|
||||||
.cat2, .cat10, .cat18 {background-color: #b2df8a; color: black;}
|
.cat2, .cat10, .cat18 {background-color: #b2df8a; color: black;}
|
||||||
|
@ -116,3 +119,24 @@ input:invalid {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li[draggable]::before {
|
||||||
|
content: "↕";
|
||||||
|
padding: 0.5em;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
li[draggable] {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[draggable].moving {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
[draggable].over {
|
||||||
|
border: 1px white dashed;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cacheButton.disabled {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
|
@ -5,16 +5,25 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
<link rel="stylesheet" href="basic.css">
|
<link rel="stylesheet" href="basic.css">
|
||||||
|
<script src="moth-pwa.js" type="text/javascript"></script>
|
||||||
<script src="moth.js"></script>
|
<script src="moth.js"></script>
|
||||||
|
<link rel="manifest" href="manifest.json">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 id="title">MOTH</h1>
|
<h1 id="title">MOTH</h1>
|
||||||
<section>
|
<section>
|
||||||
<div id="messages"></div>
|
<div id="messages">
|
||||||
|
<div id="notices"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form id="login">
|
<form id="login">
|
||||||
Team name: <input name="name">
|
<!--
|
||||||
|
<span id="pid">
|
||||||
|
Participant ID: <input name="pid"> (optional) <br>
|
||||||
|
</span>
|
||||||
|
-->
|
||||||
Team ID: <input name="id"> <br>
|
Team ID: <input name="id"> <br>
|
||||||
|
Team name: <input name="name"> <br>
|
||||||
<input type="submit" value="Sign In">
|
<input type="submit" value="Sign In">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
@ -25,6 +34,7 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="scoreboard.html">Scoreboard</a></li>
|
<li><a href="scoreboard.html">Scoreboard</a></li>
|
||||||
<li><a href="logout.html">Sign Out</a></li>
|
<li><a href="logout.html">Sign Out</a></li>
|
||||||
|
<li id="cacheButton" class="disabled"><a href="#" onclick='fetchAll()' title="Cache am offline copy of current content">Cache</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"name": "Monarch of the Hill",
|
||||||
|
"short_name": "MOTH",
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#282a33",
|
||||||
|
"theme_color": "#ECB",
|
||||||
|
"description": "The MOTH CTF engine"
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,17 @@
|
||||||
|
function pwa_init() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.register("./sw.js").then(function(reg) {
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.warn("Error while registering service worker", err)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
console.log("Service workers not supported. Some offline functionality may not work")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", pwa_init)
|
||||||
|
} else {
|
||||||
|
pwa_init()
|
||||||
|
}
|
173
theme/moth.js
173
theme/moth.js
|
@ -1,6 +1,6 @@
|
||||||
// jshint asi:true
|
// jshint asi:true
|
||||||
|
|
||||||
var teamId
|
var devel = false
|
||||||
var heartbeatInterval = 40000
|
var heartbeatInterval = 40000
|
||||||
|
|
||||||
function toast(message, timeout=5000) {
|
function toast(message, timeout=5000) {
|
||||||
|
@ -14,9 +14,18 @@ function toast(message, timeout=5000) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderNotices(obj) {
|
||||||
|
let ne = document.getElementById("notices")
|
||||||
|
if (ne) {
|
||||||
|
ne.innerHTML = obj
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function renderPuzzles(obj) {
|
function renderPuzzles(obj) {
|
||||||
let puzzlesElement = document.createElement('div')
|
let puzzlesElement = document.createElement('div')
|
||||||
|
|
||||||
|
document.getElementById("login").style.display = "none"
|
||||||
|
|
||||||
// Create a sorted list of category names
|
// Create a sorted list of category names
|
||||||
let cats = Object.keys(obj)
|
let cats = Object.keys(obj)
|
||||||
cats.sort()
|
cats.sort()
|
||||||
|
@ -35,7 +44,7 @@ function renderPuzzles(obj) {
|
||||||
h.textContent = cat
|
h.textContent = cat
|
||||||
|
|
||||||
// Extras if we're running a devel server
|
// Extras if we're running a devel server
|
||||||
if (obj.__devel__) {
|
if (devel) {
|
||||||
let a = document.createElement('a')
|
let a = document.createElement('a')
|
||||||
h.insertBefore(a, h.firstChild)
|
h.insertBefore(a, h.firstChild)
|
||||||
a.textContent = "⬇️"
|
a.textContent = "⬇️"
|
||||||
|
@ -62,7 +71,11 @@ function renderPuzzles(obj) {
|
||||||
let a = document.createElement('a')
|
let a = document.createElement('a')
|
||||||
i.appendChild(a)
|
i.appendChild(a)
|
||||||
a.textContent = points
|
a.textContent = points
|
||||||
a.href = "puzzle.html?cat=" + cat + "&points=" + points + "&pid=" + id
|
let url = new URL("puzzle.html", window.location)
|
||||||
|
url.searchParams.set("cat", cat)
|
||||||
|
url.searchParams.set("points", points)
|
||||||
|
url.searchParams.set("pid", id)
|
||||||
|
a.href = url.toString()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,45 +90,148 @@ function renderPuzzles(obj) {
|
||||||
container.appendChild(puzzlesElement)
|
container.appendChild(puzzlesElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
function heartbeat(teamId) {
|
function renderState(obj) {
|
||||||
|
devel = obj.config.devel
|
||||||
|
if (devel) {
|
||||||
|
sessionStorage.id = "1234"
|
||||||
|
sessionStorage.pid = "rodney"
|
||||||
|
}
|
||||||
|
if (Object.keys(obj.puzzles).length > 0) {
|
||||||
|
renderPuzzles(obj.puzzles)
|
||||||
|
}
|
||||||
|
renderNotices(obj.messages)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function heartbeat() {
|
||||||
|
let teamId = sessionStorage.id || ""
|
||||||
|
let participantId = sessionStorage.pid
|
||||||
|
let url = new URL("state", window.location)
|
||||||
|
url.searchParams.set("id", teamId)
|
||||||
|
if (participantId) {
|
||||||
|
url.searchParams.set("pid", participantId)
|
||||||
|
}
|
||||||
let fd = new FormData()
|
let fd = new FormData()
|
||||||
fd.append("id", teamId)
|
fd.append("id", teamId)
|
||||||
fetch("puzzles.json", {
|
fetch(url)
|
||||||
method: "POST",
|
|
||||||
body: fd,
|
|
||||||
})
|
|
||||||
.then(resp => {
|
.then(resp => {
|
||||||
if (resp.ok) {
|
if (resp.ok) {
|
||||||
resp.json()
|
resp.json()
|
||||||
.then(renderPuzzles)
|
.then(renderState)
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
toast("Error fetching recent puzzles. I'll try again in a moment.")
|
toast("Error fetching recent state. I'll try again in a moment.")
|
||||||
console.log(err)
|
console.log(err)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
toast("Error fetching recent puzzles. I'll try again in a moment.")
|
toast("Error fetching recent state. I'll try again in a moment.")
|
||||||
console.log(err)
|
console.log(err)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function showPuzzles(teamId) {
|
function showPuzzles() {
|
||||||
let spinner = document.createElement("span")
|
let spinner = document.createElement("span")
|
||||||
spinner.classList.add("spinner")
|
spinner.classList.add("spinner")
|
||||||
|
|
||||||
sessionStorage.setItem("id", teamId)
|
|
||||||
|
|
||||||
document.getElementById("login").style.display = "none"
|
document.getElementById("login").style.display = "none"
|
||||||
document.getElementById("puzzles").appendChild(spinner)
|
document.getElementById("puzzles").appendChild(spinner)
|
||||||
heartbeat(teamId)
|
heartbeat()
|
||||||
setInterval(e => { heartbeat(teamId) }, 40000)
|
drawCacheButton()
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawCacheButton() {
|
||||||
|
let teamId = sessionStorage.id
|
||||||
|
let cacher = document.querySelector("#cacheButton")
|
||||||
|
|
||||||
|
function updateCacheButton() {
|
||||||
|
let headers = new Headers()
|
||||||
|
headers.append("pragma", "no-cache")
|
||||||
|
headers.append("cache-control", "no-cache")
|
||||||
|
let url = new URL("current_manifest.json", window.location)
|
||||||
|
url.searchParams.set("id", teamId)
|
||||||
|
fetch(url, {method: "HEAD", headers: headers})
|
||||||
|
.then( resp => {
|
||||||
|
if (resp.ok) {
|
||||||
|
cacher.classList.remove("disabled")
|
||||||
|
} else {
|
||||||
|
cacher.classList.add("disabled")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(ex => {
|
||||||
|
cacher.classList.add("disabled")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval (updateCacheButton , 30000)
|
||||||
|
updateCacheButton()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchAll() {
|
||||||
|
let teamId = sessionStorage.id
|
||||||
|
let headers = new Headers()
|
||||||
|
headers.append("pragma", "no-cache")
|
||||||
|
headers.append("cache-control", "no-cache")
|
||||||
|
requests = []
|
||||||
|
let url = new URL("current_manifest.json", window.location)
|
||||||
|
url.searchParams.set("id", teamId)
|
||||||
|
|
||||||
|
toast("Caching all currently-open content")
|
||||||
|
requests.push( fetch(url, {headers: headers})
|
||||||
|
.then( resp => {
|
||||||
|
if (resp.ok) {
|
||||||
|
resp.json()
|
||||||
|
.then(contents => {
|
||||||
|
console.log("Processing manifest")
|
||||||
|
for (let resource of contents) {
|
||||||
|
if (resource == "puzzles.json") {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
fetch(resource)
|
||||||
|
.then(e => {
|
||||||
|
console.log("Fetched " + resource)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
let resp = await fetch("puzzles.json?id=" + teamId, {headers: headers})
|
||||||
|
|
||||||
|
if (resp.ok) {
|
||||||
|
let categories = await resp.json()
|
||||||
|
let cat_names = Object.keys(categories)
|
||||||
|
cat_names.sort()
|
||||||
|
for (let cat_name of cat_names) {
|
||||||
|
if (cat_name.startsWith("__")) {
|
||||||
|
// Skip metadata
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
let puzzles = categories[cat_name]
|
||||||
|
for (let puzzle of puzzles) {
|
||||||
|
let url = new URL("puzzle.html", window.location)
|
||||||
|
url.searchParams.set("cat", cat_name)
|
||||||
|
url.searchParams.set("points", puzzle[0])
|
||||||
|
url.searchParams.set("pid", puzzle[1])
|
||||||
|
requests.push(
|
||||||
|
fetch(url)
|
||||||
|
.then(e => {
|
||||||
|
console.log("Fetched " + url)
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await Promise.all(requests)
|
||||||
|
toast("Done caching content")
|
||||||
}
|
}
|
||||||
|
|
||||||
function login(e) {
|
function login(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
let name = document.querySelector("[name=name]").value
|
let name = document.querySelector("[name=name]").value
|
||||||
let id = document.querySelector("[name=id]").value
|
let teamId = document.querySelector("[name=id]").value
|
||||||
|
let pide = document.querySelector("[name=pid]")
|
||||||
|
let participantId = pide?pide.value:""
|
||||||
|
|
||||||
fetch("register", {
|
fetch("register", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
@ -125,12 +241,11 @@ function login(e) {
|
||||||
if (resp.ok) {
|
if (resp.ok) {
|
||||||
resp.json()
|
resp.json()
|
||||||
.then(obj => {
|
.then(obj => {
|
||||||
if (obj.status == "success") {
|
if ((obj.status == "success") || (obj.data.short == "Already registered")) {
|
||||||
toast("Team registered")
|
toast("Logged in")
|
||||||
showPuzzles(id)
|
sessionStorage.id = teamId
|
||||||
} else if (obj.data.short == "Already registered") {
|
sessionStorage.pid = participantId
|
||||||
toast("Logged in with previously-registered team name")
|
showPuzzles()
|
||||||
showPuzzles(id)
|
|
||||||
} else {
|
} else {
|
||||||
toast(obj.data.description)
|
toast(obj.data.description)
|
||||||
}
|
}
|
||||||
|
@ -152,16 +267,18 @@ function login(e) {
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
// Already signed in?
|
// Already signed in?
|
||||||
let id = sessionStorage.getItem("id")
|
if (sessionStorage.id) {
|
||||||
if (id) {
|
showPuzzles()
|
||||||
showPuzzles(id)
|
|
||||||
}
|
}
|
||||||
|
heartbeat()
|
||||||
|
setInterval(e => heartbeat(), 40000)
|
||||||
|
|
||||||
document.getElementById("login").addEventListener("submit", login)
|
document.getElementById("login").addEventListener("submit", login)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (document.readyState === "loading") {
|
if (document.readyState === "loading") {
|
||||||
document.addEventListener("DOMContentLoaded", init);
|
document.addEventListener("DOMContentLoaded", init)
|
||||||
} else {
|
} else {
|
||||||
init();
|
init()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<!-- notices.html: contents will be rendered verbatim in the puzzles overview. -->
|
File diff suppressed because one or more lines are too long
|
@ -5,6 +5,7 @@
|
||||||
<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">
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<script src="moth-pwa.js"></script>
|
||||||
<script src="puzzle.js"></script>
|
<script src="puzzle.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,54 @@
|
||||||
|
{
|
||||||
|
"__comment__": [
|
||||||
|
"This file is to help debug themes.",
|
||||||
|
"MOTHd will ignore it."
|
||||||
|
],
|
||||||
|
"codebreaking": [
|
||||||
|
[1,"37117e6b034696b86c6516477cc0bc60bc1e642e"],
|
||||||
|
[2,"546b586428979771b061608489327da4940086a7"],
|
||||||
|
[4,"6f2a33c93f56b4f29cc79e6576ba4d1000aa1756"],
|
||||||
|
[5,"c654fe263909b1940d7aad8c572363a0569c07c6"],
|
||||||
|
[6,"f30bd32bf940f2bb03506ec334d2d204efc4695b"],
|
||||||
|
[7,"128b119083b6ae70c380a8eb70ec6a518425e7af"],
|
||||||
|
[8,"edd4f57aeb565b3b053fa194f5e677cb77ef0285"],
|
||||||
|
[15,"9781863bca9f596972e2a10460932ec5ec6be3fe"]
|
||||||
|
],
|
||||||
|
"nocode": [
|
||||||
|
[1,"37117e6b034696b86c6516477cc0bc60bc1e642e"],
|
||||||
|
[2,"546b586428979771b061608489327da4940086a7"],
|
||||||
|
[3,"79c08697a1923da1118fd0c2e922b5d3899cabcc"],
|
||||||
|
[4,"6f2a33c93f56b4f29cc79e6576ba4d1000aa1756"],
|
||||||
|
[10,"bf4fae263bf6e4243b143f4ecd64e471f3ec75dd"],
|
||||||
|
[20,"9f374f6dac9f972fac4693099a7bfa7c535f7503"],
|
||||||
|
[30,"02de1196d43976b2d050c6c597f068623d2df201"],
|
||||||
|
[50,"9acb3af947cb4aa10a9c1221c04518f956cdc0d0"],
|
||||||
|
[80,"78f807ac44f3cbf537861e7cdf1ac53937e4ee47"],
|
||||||
|
[90,"6d537653aa599178c72528f7e1f2fbb36e6333f9"],
|
||||||
|
[100,"4f5982a3a7cc9b9af0320130132e8cab39a1fd2c"]
|
||||||
|
],
|
||||||
|
"sequence": [
|
||||||
|
[1,"37117e6b034696b86c6516477cc0bc60bc1e642e"],
|
||||||
|
[2,"546b586428979771b061608489327da4940086a7"],
|
||||||
|
[8,"edd4f57aeb565b3b053fa194f5e677cb77ef0285"],
|
||||||
|
[16,"a9ace4b773f045c422260edefaa8563dcd80ac59"],
|
||||||
|
[19,"f11ca0172451f37ba6f4d66ff9add80013480a49"],
|
||||||
|
[25,"0458533d28705548829e53d686215cc6fbeec8f5"],
|
||||||
|
[35,"91aac06bae090ae7d1699b5a78601ef8d29e9271"],
|
||||||
|
[50,"9acb3af947cb4aa10a9c1221c04518f956cdc0d0"],
|
||||||
|
[60,"bf84beed9e382268ab40d0113dfeb73c96aa919a"],
|
||||||
|
[100,"4f5982a3a7cc9b9af0320130132e8cab39a1fd2c"],
|
||||||
|
[200,"3b9b8993fe639cf0c19a58b39ebbf6077828887a"],
|
||||||
|
[300,"0f13c4d19bc5d2e10d43e8cd2e40f759e731cece"],
|
||||||
|
[400,"db7a59f313818fc9598969d2a0a04e21bd26697f"],
|
||||||
|
[500,"81c5389eb5406aa44053662f6482f246b8a12e0c"]
|
||||||
|
],
|
||||||
|
"steg": [
|
||||||
|
[1,"200e8cd902ba7304765c463f6ed1322bc25f3454"],
|
||||||
|
[2,"707328988c3986d450d8fe419eb49f078fb7998c"],
|
||||||
|
[3,"d0b336ad59cbcd4415ddf200c6c099db5c3fea1d"],
|
||||||
|
[4,"f071503b403ffee2b38e186e800bfd5dd28e8f0e"],
|
||||||
|
[5,"186f425fa5762ef37f874cc602fe0edc4325a5d2"],
|
||||||
|
[6,"c6527c3c30c4e6a33026192d358d83d259cd17a7"],
|
||||||
|
[10,"84973f77a1b14e4666f3d8a8bdeead7633c4ed56"]
|
||||||
|
]
|
||||||
|
}
|
|
@ -4,131 +4,16 @@
|
||||||
<title>Scoreboard</title>
|
<title>Scoreboard</title>
|
||||||
<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 src="moth-pwa.js"></script>
|
||||||
function update(state) {
|
<script src="moment.min.js" async></script>
|
||||||
let element = document.getElementById("scoreboard");
|
<script src="Chart.min.js" async></script>
|
||||||
let teamnames = state["teams"];
|
<script src="scoreboard.js" async></script>
|
||||||
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>
|
</head>
|
||||||
<body>
|
<body class="wide">
|
||||||
<h1 class="Success">Scoreboard</h1>
|
|
||||||
<h4 id="location"></h4>
|
<h4 id="location"></h4>
|
||||||
<section>
|
<section class="rotate">
|
||||||
<div id="scoreboard"></div>
|
<div id="chart"></div>
|
||||||
|
<div id="rankings"></div>
|
||||||
</section>
|
</section>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -0,0 +1,249 @@
|
||||||
|
// jshint asi:true
|
||||||
|
|
||||||
|
function scoreboardInit() {
|
||||||
|
|
||||||
|
chartColors = [
|
||||||
|
"rgb(255, 99, 132)",
|
||||||
|
"rgb(255, 159, 64)",
|
||||||
|
"rgb(255, 205, 86)",
|
||||||
|
"rgb(75, 192, 192)",
|
||||||
|
"rgb(54, 162, 235)",
|
||||||
|
"rgb(153, 102, 255)",
|
||||||
|
"rgb(201, 203, 207)"
|
||||||
|
]
|
||||||
|
|
||||||
|
function update(state) {
|
||||||
|
for (let rotate of document.querySelectorAll(".rotate")) {
|
||||||
|
rotate.appendChild(rotate.firstElementChild)
|
||||||
|
}
|
||||||
|
|
||||||
|
let element = document.getElementById("rankings")
|
||||||
|
let teamNames = state.teams
|
||||||
|
let pointsLog = state.points
|
||||||
|
|
||||||
|
// 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 variation 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))
|
||||||
|
|
||||||
|
let teams = {}
|
||||||
|
let highestCategoryScore = {} // map[string]int
|
||||||
|
|
||||||
|
// Initialize data structures
|
||||||
|
for (let teamId in teamNames) {
|
||||||
|
teams[teamId] = {
|
||||||
|
categoryScore: {}, // map[string]int
|
||||||
|
overallScore: 0, // int
|
||||||
|
historyLine: [], // []{x: int, y: int}
|
||||||
|
name: teamNames[teamId],
|
||||||
|
id: teamId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dole out points
|
||||||
|
for (let entry of pointsLog) {
|
||||||
|
let timestamp = entry[0]
|
||||||
|
let teamId = entry[1]
|
||||||
|
let category = entry[2]
|
||||||
|
let points = entry[3]
|
||||||
|
|
||||||
|
let team = teams[teamId]
|
||||||
|
|
||||||
|
let score = team.categoryScore[category] || 0
|
||||||
|
score += points
|
||||||
|
team.categoryScore[category] = score
|
||||||
|
|
||||||
|
let highest = highestCategoryScore[category] || 0
|
||||||
|
if (score > highest) {
|
||||||
|
highestCategoryScore[category] = score
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let teamId in teamNames) {
|
||||||
|
teams[teamId].categoryScore = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let entry of pointsLog) {
|
||||||
|
let timestamp = entry[0]
|
||||||
|
let teamId = entry[1]
|
||||||
|
let category = entry[2]
|
||||||
|
let points = entry[3]
|
||||||
|
|
||||||
|
let team = teams[teamId]
|
||||||
|
|
||||||
|
let score = team.categoryScore[category] || 0
|
||||||
|
score += points
|
||||||
|
team.categoryScore[category] = score
|
||||||
|
|
||||||
|
let overall = 0
|
||||||
|
for (let cat in team.categoryScore) {
|
||||||
|
overall += team.categoryScore[cat] / highestCategoryScore[cat]
|
||||||
|
}
|
||||||
|
|
||||||
|
team.historyLine.push({t: new Date(timestamp * 1000), y: overall})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compute overall scores based on current highest
|
||||||
|
for (let teamId in teams) {
|
||||||
|
let team = teams[teamId]
|
||||||
|
team.overallScore = 0
|
||||||
|
for (let cat in team.categoryScore) {
|
||||||
|
team.overallScore += team.categoryScore[cat] / highestCategoryScore[cat]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort by team score
|
||||||
|
function teamCompare(a, b) {
|
||||||
|
return a.overallScore - b.overallScore
|
||||||
|
}
|
||||||
|
|
||||||
|
// Figure out how to order each team on the scoreboard
|
||||||
|
let winners = []
|
||||||
|
for (let teamId in teams) {
|
||||||
|
winners.push(teams[teamId])
|
||||||
|
}
|
||||||
|
winners.sort(teamCompare)
|
||||||
|
winners.reverse()
|
||||||
|
|
||||||
|
// Let's make some better names for things we've computed
|
||||||
|
let winningScore = winners[0].overallScore
|
||||||
|
let numCategories = Object.keys(highestCategoryScore).length
|
||||||
|
|
||||||
|
// Clear out the element we're about to populate
|
||||||
|
Array.from(element.childNodes).map(e => e.remove())
|
||||||
|
|
||||||
|
let maxWidth = 100 / winningScore
|
||||||
|
for (let team of winners) {
|
||||||
|
let row = document.createElement("div")
|
||||||
|
let ncat = 0
|
||||||
|
for (let category in highestCategoryScore) {
|
||||||
|
let catHigh = highestCategoryScore[category]
|
||||||
|
let catTeam = team.categoryScore[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 = team.name
|
||||||
|
row.appendChild(te)
|
||||||
|
|
||||||
|
element.appendChild(row)
|
||||||
|
}
|
||||||
|
|
||||||
|
let datasets = []
|
||||||
|
for (let i in winners) {
|
||||||
|
if (i > 5) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
let team = winners[i]
|
||||||
|
let color = chartColors[i % chartColors.length]
|
||||||
|
datasets.push({
|
||||||
|
label: team.name,
|
||||||
|
backgroundColor: color,
|
||||||
|
borderColor: color,
|
||||||
|
data: team.historyLine,
|
||||||
|
lineTension: 0,
|
||||||
|
fill: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let config = {
|
||||||
|
type: "line",
|
||||||
|
data: {
|
||||||
|
datasets: datasets
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
display: true,
|
||||||
|
type: "time",
|
||||||
|
time: {
|
||||||
|
tooltipFormat: "ll HH:mm"
|
||||||
|
},
|
||||||
|
scaleLabel: {
|
||||||
|
display: true,
|
||||||
|
labelString: "Time"
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
display: true,
|
||||||
|
scaleLabel: {
|
||||||
|
display: true,
|
||||||
|
labelString: "Points"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
mode: "index",
|
||||||
|
intersect: false
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
mode: "nearest",
|
||||||
|
intersect: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let chart = document.querySelector("#chart")
|
||||||
|
if (chart) {
|
||||||
|
let canvas = chart.querySelector("canvas")
|
||||||
|
if (! canvas) {
|
||||||
|
canvas = document.createElement("canvas")
|
||||||
|
chart.appendChild(canvas)
|
||||||
|
}
|
||||||
|
|
||||||
|
let myline = new Chart(canvas.getContext("2d"), config)
|
||||||
|
myline.update()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refresh() {
|
||||||
|
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", "")
|
||||||
|
let location = document.querySelector("#location")
|
||||||
|
if (location) {
|
||||||
|
location.textContent = base
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(refresh, 60000)
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", scoreboardInit)
|
||||||
|
} else {
|
||||||
|
scoreboardInit()
|
||||||
|
}
|
|
@ -0,0 +1,49 @@
|
||||||
|
var cacheName = "moth:v1"
|
||||||
|
var content = [
|
||||||
|
"index.html",
|
||||||
|
"basic.css",
|
||||||
|
"puzzle.js",
|
||||||
|
"puzzle.html",
|
||||||
|
"scoreboard.html",
|
||||||
|
"moth.js",
|
||||||
|
"sw.js",
|
||||||
|
"points.json",
|
||||||
|
]
|
||||||
|
|
||||||
|
self.addEventListener("install", function(e) {
|
||||||
|
e.waitUntil(
|
||||||
|
caches.open(cacheName).then(function(cache) {
|
||||||
|
return cache.addAll(content).then(
|
||||||
|
function() {
|
||||||
|
self.skipWaiting()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Attempt to fetch live resources, first, then fall back to cache */
|
||||||
|
self.addEventListener('fetch', function(event) {
|
||||||
|
let cache_used = false
|
||||||
|
|
||||||
|
event.respondWith(
|
||||||
|
fetch(event.request)
|
||||||
|
.catch(function(evt) {
|
||||||
|
//console.log("Falling back to cache for " + event.request.url)
|
||||||
|
cache_used = true
|
||||||
|
return caches.match(event.request, {ignoreSearch: true})
|
||||||
|
}).then(function(res) {
|
||||||
|
if (res && res.ok) {
|
||||||
|
let res_clone = res.clone()
|
||||||
|
if (! cache_used && event.request.method == "GET" ) {
|
||||||
|
caches.open(cacheName).then(function(cache) {
|
||||||
|
cache.put(event.request, res_clone)
|
||||||
|
//console.log("Storing " + event.request.url + " in cache")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
} else {
|
||||||
|
console.log("Failed to retrieve resource")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
})
|
Loading…
Reference in New Issue