mirror of https://github.com/dirtbags/moth.git
Fixes from SECOR spark
* Puzzle list word-wraps * Puzzle pull mutation handler can cope with non-HTML nodes
This commit is contained in:
parent
65daa41ca1
commit
e390c4443e
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue