From b99cefa5f082465a2d54b79ec546e5845d1b5e90 Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Thu, 22 Sep 2016 09:34:01 -0600 Subject: [PATCH] puzzles list in a working state --- www/index.html | 5 +-- www/puzzles.html | 1 + www/res/puzzles.js | 89 +++++++++++++++++++++++++++------------------- www/res/style.css | 19 +++++++--- 4 files changed, 70 insertions(+), 44 deletions(-) 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) {