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

Fixes from SECOR spark 

* Puzzle list word-wraps
* Puzzle pull mutation handler can cope with non-HTML nodes
This commit is contained in:
Neale Pickett 2018-10-02 15:22:09 +00:00
parent b237b2a14a
commit 1a70a49c5d
3 changed files with 150 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
theme/puzzle-list.html
View File

@ -35,32 +35,33 @@ function render(obj) {
var id = puzzle[1]; var id = puzzle[1];
var i = document.createElement('li'); var i = document.createElement('li');
i.textContent = " ";
l.appendChild(i); l.appendChild(i);
if (points === 0) { if (points === 0) {
i.textContent = "✿"; i.textContent = "✿";
} else { } else {
var a = document.createElement('a'); var 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; a.href = "puzzle.html?cat=" + cat + "&points=" + points + "&pid=" + id;
} }
} }
puzzlesElement.appendChild(pdiv); puzzlesElement.appendChild(pdiv);
document.getElementById("puzzles").appendChild(puzzlesElement); document.getElementById("puzzles").appendChild(puzzlesElement);
} }
} }
function init() { function init() {
fetch("puzzles.json") fetch("puzzles.json")
.then(function(resp) { .then(function(resp) {
return resp.json(); return resp.json();
}).then(function(obj) { }).then(function(obj) {
render(obj); render(obj);
}).catch(function(err) { }).catch(function(err) {
console.log("Error", err); console.log("Error", err);
}); });
} }
document.addEventListener("DOMContentLoaded", init); document.addEventListener("DOMContentLoaded", init);

67
theme/puzzle.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="icon" href="res/icon.svg" type="image/svg+xml"> <link rel="icon" href="res/icon.svg" type="image/svg+xml">
<link rel="icon" href="res/icon.png" type="image/png"> <link rel="icon" href="res/icon.png" type="image/png">
<script src="res/concat.js"></script>
<script> <script>
function init() { function init() {
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
@ -16,11 +17,10 @@ function init() {
let base = "content/" + categoryName + "/" + puzzleId + "/"; let base = "content/" + categoryName + "/" + puzzleId + "/";
let fn = base + "puzzle.json"; let fn = base + "puzzle.json";
fetch(fn) fetch(fn)
.then(function(resp) { .then(function(resp) {
return resp.json(); return resp.json();
}).then(function(obj) { }).then(function(obj) {
document.getElementById("puzzle").innerHTML = obj.body;
document.getElementById("authors").textContent = obj.authors.join(", "); document.getElementById("authors").textContent = obj.authors.join(", ");
for (let fn of obj.files) { for (let fn of obj.files) {
let li = document.createElement("li"); let li = document.createElement("li");
@ -30,40 +30,42 @@ function init() {
li.appendChild(a); li.appendChild(a);
document.getElementById("files").appendChild(li); document.getElementById("files").appendChild(li);
} }
}).catch(function(err) { document.getElementById("puzzle").innerHTML = obj.body;
console.log("Error", err); }).catch(function(err) {
}); console.log("Error", err);
});
document.querySelector("body > h1").innerText = categoryName + " " + points
document.querySelector("input[name=cat]").value = categoryName; document.querySelector("body > h1").innerText = categoryName + " " + points
document.querySelector("input[name=points]").value = points; document.querySelector("input[name=cat]").value = categoryName;
document.querySelector("input[name=points]").value = points;
function mutated(mutationsList, observer) { function mutated(mutationsList, observer) {
for (let mutation of mutationsList) { for (let mutation of mutationsList) {
if (mutation.type == 'childList') { if (mutation.type == 'childList') {
for (let e of mutation.addedNodes) { for (let e of mutation.addedNodes) {
console.log(e); //console.log(e);
if (! e.querySelectorAll) { continue; }
for (let se of e.querySelectorAll("[src],[href]")) { for (let se of e.querySelectorAll("[src],[href]")) {
se.outerHTML = se.outerHTML.replace(/(src|href)="([^/]+)"/i, "$1=\"" + base + "$2\"") se.outerHTML = se.outerHTML.replace(/(src|href)="([^/]+)"/i, "$1=\"" + base + "$2\"")
console.log(se.outerHTML); //console.log(se.outerHTML);
} }
console.log(e.querySelectorAll("[src]")); //console.log(e.querySelectorAll("[src]"));
} }
console.log(mutation.addedNodes); //console.log(mutation.addedNodes);
} else { } else {
console.log(mutation); console.log(mutation);
} }
} }
} }
let puzzle = document.getElementById("puzzle"); let puzzle = document.getElementById("puzzle");
let observerOptions = { let observerOptions = {
childList: true, childList: true,
attributes: true, attributes: true,
subtree: true, subtree: true,
}; };
window.observer = new MutationObserver(mutated); window.observer = new MutationObserver(mutated);
observer.observe(puzzle, observerOptions); observer.observe(puzzle, observerOptions);
} }
document.addEventListener("DOMContentLoaded", init); document.addEventListener("DOMContentLoaded", init);
</script> </script>
@ -75,17 +77,18 @@ document.addEventListener("DOMContentLoaded", init);
<ul id="files"></ul> <ul id="files"></ul>
<p>Puzzle by <span id="authors"></span></p> <p>Puzzle by <span id="authors"></span></p>
</section> </section>
<form action="answer" method="post"> <form action="answer" method="post">
<input type="hidden" name="cat"> <input type="hidden" name="cat">
<input type="hidden" name="points"> <input type="hidden" name="points">
Team ID: <input type="text" name="id"> <br> Team ID: <input type="text" name="id"> <br>
Answer: <input type="text" name="answer"> <br> Answer: <input type="text" name="answer"> <br>
<input type="submit" value="Submit"> <input type="submit" value="Submit">
</form> </form>
<nav> <nav>
<ul> <ul>
<li><a href="puzzle-list.html">Puzzles</a></li> <li><a href="puzzle-list.html">Puzzles</a></li>
<li><a href="scoreboard.html">Scoreboard</a></li> <li><a href="scoreboard.html">Scoreboard</a></li>
<li><a href="scoring.html">Scoring</a></li>
</ul> </ul>
</nav> </nav>
</body> </body>

196
theme/scoreboard.html
View File

@ -8,126 +8,126 @@
<link rel="icon" href="res/icon.png" type="image/png"> <link rel="icon" href="res/icon.png" type="image/png">
<script> <script>
function loadJSON(url, callback) { function loadJSON(url, callback) {
function loaded(e) { function loaded(e) {
callback(e.target.response); callback(e.target.response);
} }
var xhr = new XMLHttpRequest() var xhr = new XMLHttpRequest()
xhr.onload = loaded; xhr.onload = loaded;
xhr.open("GET", url, true); xhr.open("GET", url, true);
xhr.responseType = "json"; xhr.responseType = "json";
xhr.send(); xhr.send();
} }
function scoreboard(element, continuous) { function scoreboard(element, continuous) {
function update(state) { function update(state) {
var teamnames = state["teams"]; var teamnames = state["teams"];
var pointslog = state["points"]; var pointslog = state["points"];
var pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || []; var pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || [];
if (pointshistory.length >= 20){ if (pointshistory.length >= 20){
pointshistory.shift(); pointshistory.shift();
} }
pointshistory.push(pointslog); pointshistory.push(pointslog);
localStorage.setItem("pointshistory", JSON.stringify(pointshistory)); localStorage.setItem("pointshistory", JSON.stringify(pointshistory));
var highscore = {}; var highscore = {};
var teams = {}; var teams = {};
// Dole out points // Dole out points
for (var i in pointslog) { for (var i in pointslog) {
var entry = pointslog[i]; var entry = pointslog[i];
var timestamp = entry[0]; var timestamp = entry[0];
var teamhash = entry[1]; var teamhash = entry[1];
var category = entry[2]; var category = entry[2];
var points = entry[3]; var points = entry[3];
var team = teams[teamhash] || {__hash__: teamhash}; var team = teams[teamhash] || {__hash__: teamhash};
// Add points to team's points for that category // Add points to team's points for that category
team[category] = (team[category] || 0) + points; team[category] = (team[category] || 0) + points;
// Record highest score in a category // Record highest score in a category
highscore[category] = Math.max(highscore[category] || 0, team[category]); highscore[category] = Math.max(highscore[category] || 0, team[category]);
teams[teamhash] = team; teams[teamhash] = team;
} }
// Sort by team score // Sort by team score
function teamScore(t) { function teamScore(t) {
var score = 0; var score = 0;
for (var category in highscore) { for (var category in highscore) {
score += (t[category] || 0) / highscore[category]; score += (t[category] || 0) / highscore[category];
} }
// XXX: This function really shouldn't have side effects. // XXX: This function really shouldn't have side effects.
t.__score__ = score; t.__score__ = score;
return score; return score;
} }
function teamCompare(a, b) { function teamCompare(a, b) {
return teamScore(a) - teamScore(b); return teamScore(a) - teamScore(b);
} }
var winners = []; var winners = [];
for (var i in teams) { for (var i in teams) {
winners.push(teams[i]); winners.push(teams[i]);
} }
if (winners.length == 0) { if (winners.length == 0) {
// No teams! // No teams!
return; return;
} }
winners.sort(teamCompare); winners.sort(teamCompare);
winners.reverse(); winners.reverse();
// Clear out the element we're about to populate // Clear out the element we're about to populate
while (element.lastChild) { while (element.lastChild) {
element.removeChild(element.lastChild); element.removeChild(element.lastChild);
} }
// Populate! // Populate!
var topActualScore = winners[0].__score__; var topActualScore = winners[0].__score__;
// (100 / ncats) * (ncats / topActualScore); // (100 / ncats) * (ncats / topActualScore);
var maxWidth = 100 / topActualScore; var maxWidth = 100 / topActualScore;
for (var i in winners) { for (var i in winners) {
var team = winners[i]; var team = winners[i];
var row = document.createElement("div"); var row = document.createElement("div");
var ncat = 0; var ncat = 0;
for (var category in highscore) { for (var category in highscore) {
var catHigh = highscore[category]; var catHigh = highscore[category];
var catTeam = team[category] || 0; var catTeam = team[category] || 0;
var catPct = catTeam / catHigh; var catPct = catTeam / catHigh;
var width = maxWidth * catPct; var width = maxWidth * catPct;
var bar = document.createElement("span"); var bar = document.createElement("span");
bar.classList.add("category"); bar.classList.add("category");
bar.classList.add("cat" + ncat); bar.classList.add("cat" + ncat);
bar.style.width = width + "%"; bar.style.width = width + "%";
bar.textContent = category + ": " + catTeam; bar.textContent = category + ": " + catTeam;
bar.title = bar.textContent; bar.title = bar.textContent;
row.appendChild(bar); row.appendChild(bar);
ncat += 1; ncat += 1;
} }
var te = document.createElement("span"); var te = document.createElement("span");
te.classList.add("teamname"); te.classList.add("teamname");
te.textContent = teamnames[team.__hash__]; te.textContent = teamnames[team.__hash__];
row.appendChild(te); row.appendChild(te);
element.appendChild(row); element.appendChild(row);
} }
} }
function once() { function once() {
loadJSON("points.json", update); loadJSON("points.json", update);
} }
if (continuous) { if (continuous) {
setInterval(once, 60000); setInterval(once, 60000);
} }
once(); once();
} }
function init() { function init() {
var sb = document.getElementById("scoreboard"); var sb = document.getElementById("scoreboard");
scoreboard(sb, true); scoreboard(sb, true);
} }
document.addEventListener("DOMContentLoaded", init); document.addEventListener("DOMContentLoaded", init);