neale/moth
neale
/
moth
mirror of https://github.com/dirtbags/moth.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'v3.4_devel' into 81-support-downloading-open-content

This commit is contained in:
Neale Pickett 2019-11-13 13:52:30 -07:00 committed by GitHub
parent 8af56b515d 5be46ca55a
commit 168f0b80ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 610 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -9,3 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- A changelog - A changelog
- Support for embedding Python libraries at the category or puzzle level - Support for embedding Python libraries at the category or puzzle level
- Minimal PWA support to permit caching of currently-unlocked content - Minimal PWA support to permit caching of currently-unlocked content
- Embedded graph in scoreboard
- Optional tracking of participant IDs
- New `notices.html` file for sending broadcast messages to players
### Changed
- Use native JS URL objects instead of wrangling everything by hand

3
devel/devel-server.py
View File

@ -224,8 +224,9 @@ sessionStorage.setItem("id", "devel-server")
}, },
) )
url = urllib.parse.urlparse(self.path)
for pattern, function in self.endpoints: for pattern, function in self.endpoints:
result = parse.parse(pattern, self.path) result = parse.parse(pattern, url.path)
if result: if result:
self.req = result.named self.req = result.named
seed = self.req.get("seed", "random") seed = self.req.get("seed", "random")

7
theme/Chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
theme/basic.css
View File

@ -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;
} }

11
theme/index.html
View File

@ -12,11 +12,18 @@
<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>

1
theme/moment.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

54
theme/moth.js
View File

@ -14,6 +14,13 @@ 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')
@ -62,7 +69,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,9 +88,26 @@ function renderPuzzles(obj) {
container.appendChild(puzzlesElement) container.appendChild(puzzlesElement)
} }
function heartbeat(teamId) {
function heartbeat(teamId, participantId) {
let noticesUrl = new URL("notices.html", window.location)
fetch(noticesUrl)
.then(resp => {
if (resp.ok) {
resp.text()
.then(renderNotices)
.catch(err => console.log)
}
})
.catch(err => console.log)
let url = new URL("puzzles.json", window.location) let url = new URL("puzzles.json", window.location)
url.searchParams.set("id", teamId) url.searchParams.set("id", teamId)
if (participantId) {
url.searchParams.set("pid", participantId)
}
let fd = new FormData()
fd.append("id", teamId)
fetch(url) fetch(url)
.then(resp => { .then(resp => {
if (resp.ok) { if (resp.ok) {
@ -97,15 +125,18 @@ function heartbeat(teamId) {
}) })
} }
function showPuzzles(teamId) { function showPuzzles(teamId, participantId) {
let spinner = document.createElement("span") let spinner = document.createElement("span")
spinner.classList.add("spinner") spinner.classList.add("spinner")
sessionStorage.setItem("id", teamId) sessionStorage.setItem("id", teamId)
if (participantId) {
sessionStorage.setItem("pid", participantId)
}
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(teamId, participantId)
setInterval(e => { heartbeat(teamId) }, 40000) setInterval(e => { heartbeat(teamId) }, 40000)
drawCacheButton(teamId) drawCacheButton(teamId)
} }
@ -196,7 +227,9 @@ async function fetchAll() {
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",
@ -208,10 +241,10 @@ function login(e) {
.then(obj => { .then(obj => {
if (obj.status == "success") { if (obj.status == "success") {
toast("Team registered") toast("Team registered")
showPuzzles(id) showPuzzles(teamId, participantId)
} else if (obj.data.short == "Already registered") { } else if (obj.data.short == "Already registered") {
toast("Logged in with previously-registered team name") toast("Logged in with previously-registered team name")
showPuzzles(id) showPuzzles(teamId, participantId)
} else { } else {
toast(obj.data.description) toast(obj.data.description)
} }
@ -233,9 +266,10 @@ function login(e) {
function init() { function init() {
// Already signed in? // Already signed in?
let id = sessionStorage.getItem("id") let teamId = sessionStorage.getItem("id")
if (id) { let participantId = sessionStorage.getItem("pid")
showPuzzles(id) if (teamId) {
showPuzzles(teamId, participantId)
} }
document.getElementById("login").addEventListener("submit", login) document.getElementById("login").addEventListener("submit", login)

1
theme/notices.html Normal file
View File

@ -0,0 +1 @@
<!-- notices.html: contents will be rendered verbatim in the puzzles overview. -->

264
theme/points.json
View File

File diff suppressed because one or more lines are too long

54
theme/puzzles.json Normal file
View File

@ -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"]
]
}

126
theme/scoreboard.html
View File

@ -5,130 +5,14 @@
<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 src="moth-pwa.js"></script> <script src="moth-pwa.js"></script>
<script> <script src="moment.min.js" async></script>
function update(state) { <script src="Chart.min.js" async></script>
let element = document.getElementById("scoreboard") <script src="scoreboard.js" async></script>
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)
}
}
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>
<canvas id="chart"></canvas>
<div id="scoreboard"></div> <div id="scoreboard"></div>
</section> </section>
<nav> <nav>

224
theme/scoreboard.js Normal file
View File

@ -0,0 +1,224 @@
// jshint asi:true
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) {
let element = document.getElementById("scoreboard")
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 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()
// Clear out the element we're about to populate
Array.from(element.childNodes).map(e => e.remove())
let maxWidth = 100 / Object.keys(highestCategoryScore).length
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 ctx = document.getElementById("chart").getContext("2d")
window.myline = new Chart(ctx, config)
window.myline.update()
}
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", "")
let location = document.querySelector("#location")
if (location) {
location.textContent = base
}
setInterval(once, 60000)
once()
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init)
} else {
init()
}