diff --git a/www/index.html b/www/index.html
index 7a083b3..295482b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -4,9 +4,10 @@
-
-
+
+
+
diff --git a/www/puzzles.html b/www/puzzles.html
index 32428c9..343bd8d 100644
--- a/www/puzzles.html
+++ b/www/puzzles.html
@@ -2,6 +2,7 @@
Open Puzzles
+
diff --git a/www/res/puzzles.js b/www/res/puzzles.js
index e72974c..8edb066 100644
--- a/www/res/puzzles.js
+++ b/www/res/puzzles.js
@@ -1,45 +1,60 @@
-var puzzles_terminal;
+var puzzlesTerminal;
+var puzzlesJsonUrl = "puzzles.json";
-var puzzles_url = "hack/puzzles.html";
-
-function Puzzles(element) {
- var term = new Terminal(element);
- var refreshInterval;
-
- function loaded() {
- var doc = this.response;
- var puzzles = doc.getElementById("puzzles");
- var h1 = document.createElement("h1");
-
- h1.textContent = "Puzzles";
-
- term.clear();
- term.append(h1);
- term.appendShallow(puzzles);
- }
-
- function refresh() {
- var myRequest = new XMLHttpRequest();
- myRequest.responseType = "document";
- myRequest.addEventListener("load", loaded);
- myRequest.open("GET", puzzles_url);
- myRequest.send();
- }
-
- function start() {
- refreshInterval = setInterval(refresh, 20 * 1000);
- refresh();
- }
-
- term.clear();
- term.par("Loading…");
-
- setTimeout(start, 3000);
+function loadPuzzle(cat, id, points) {
+ console.log("Requested " + cat + "/" + id + "(" + points + ")");
}
+function puzzlesRefresh(term, obj) {
+ term.clear();
+
+ for (var cat in obj) {
+ var puzzles = obj[cat];
+
+ var pdiv = createElement('div');
+ pdiv.className = 'category';
+
+ var h = createElement('h2');
+ pdiv.appendChild(h);
+ h.textContent = cat;
+
+ var l = createElement('ul');
+ pdiv.appendChild(l);
+
+ for (var puzzle of puzzles) {
+ var points = puzzle[0];
+ var id = puzzle[1];
+
+ var i = createElement('li');
+ l.appendChild(i);
+
+ if (points == 0) {
+ i.textContent = "‡";
+ } else {
+ var a = createElement('span');
+ i.appendChild(a);
+ a.className = "link";
+ a.textContent = points;
+ a.addEventListener("click", loadPuzzle.bind(undefined, cat, id, points));
+ }
+ }
+
+ term.appendShallow(pdiv);
+ }
+}
function puzzles_start() {
- puzzles_terminal = new Puzzles(document.getElementById("puzzles"));
+ var element = document.getElementById("puzzles");
+ var puzzlesTerminal = new Terminal(element);
+ var refreshInterval = 40 * 1000;
+
+ var refreshCallback = puzzlesRefresh.bind(undefined, puzzlesTerminal);
+ var refreshFunction = loadJSON.bind(undefined, puzzlesJsonUrl, refreshCallback);
+
+ puzzlesTerminal.clear();
+ puzzlesTerminal.par("Loading...");
+ refreshFunction();
+ setInterval(refreshFunction, refreshInterval);
}
window.addEventListener("load", puzzles_start);
diff --git a/www/res/style.css b/www/res/style.css
index ea8ff6c..a2b523a 100644
--- a/www/res/style.css
+++ b/www/res/style.css
@@ -48,16 +48,25 @@ h1 {
font-size: 120%;
}
-a:link {
+a:link, .link {
color: #13a5de;
+ cursor: pointer;
}
-#puzzles dl {
+.category h2 {
+ margin: 0;
+ font-size: 100%;
+}
+.category ul {
+ margin: 0;
+ padding-left: 1em;
+ font-size: 90%;
+}
+.category li {
display: inline;
}
-#puzzles dd {
- margin: 0;
- margin-left: 1em;
+.category li + li:before {
+ content: " ";
}
@media (max-width: 52em) {