Fixes from SECOR spark

* Puzzle list word-wraps
* Puzzle pull mutation handler can cope with non-HTML nodes

theme/puzzle-list.html

@@ -35,32 +35,33 @@ function render(obj) {
       var id = puzzle[1];
   
       var i = document.createElement('li');
+      i.textContent = " ";
       l.appendChild(i);
   
       if (points === 0) {
-  	    i.textContent = "✿";
+        i.textContent = "✿";
       } 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;
-	    }
+      }
-  	}
+    }
 
-		puzzlesElement.appendChild(pdiv);
+    puzzlesElement.appendChild(pdiv);
-		document.getElementById("puzzles").appendChild(puzzlesElement);
+    document.getElementById("puzzles").appendChild(puzzlesElement);
   }
 }
 
 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);

theme/puzzle.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width">
     <link rel="icon" href="res/icon.svg" type="image/svg+xml">
     <link rel="icon" href="res/icon.png" type="image/png">
+    <script src="res/concat.js"></script>
     <script>
 function init() {
   let params = new URLSearchParams(window.location.search);
@@ -16,11 +17,10 @@ function init() {
   let base = "content/" + categoryName + "/" + puzzleId + "/";
   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(", ");
     for (let fn of obj.files) {
       let li = document.createElement("li");
@@ -30,40 +30,42 @@ function init() {
       li.appendChild(a);
       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("body > h1").innerText = categoryName + " " + points
-	document.querySelector("input[name=cat]").value = categoryName;
+  document.querySelector("input[name=cat]").value = categoryName;
-	document.querySelector("input[name=points]").value = points;
+  document.querySelector("input[name=points]").value = points;
   
   function mutated(mutationsList, observer) {
     for (let mutation of mutationsList) {
       if (mutation.type == 'childList') {
         for (let e of mutation.addedNodes) {
-          console.log(e);
+          //console.log(e);
+          if (! e.querySelectorAll) { continue; }
           for (let se of e.querySelectorAll("[src],[href]")) {
             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 {
         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);
     </script>
@@ -75,17 +77,18 @@ document.addEventListener("DOMContentLoaded", init);
       <ul id="files"></ul>
       <p>Puzzle by <span id="authors"></span></p>
     </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>
       <ul>
         <li><a href="puzzle-list.html">Puzzles</a></li>
         <li><a href="scoreboard.html">Scoreboard</a></li>
+        <li><a href="scoring.html">Scoring</a></li>
       </ul>
     </nav>
   </body>

theme/scoreboard.html

@@ -8,126 +8,126 @@
     <link rel="icon" href="res/icon.png" type="image/png">
     <script>
 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 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() {
-	var sb = document.getElementById("scoreboard");
+  var sb = document.getElementById("scoreboard");
-	scoreboard(sb, true);
+  scoreboard(sb, true);
 }
 
 document.addEventListener("DOMContentLoaded", init);