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

puzzles list in a working state

This commit is contained in:
Neale Pickett 2016-09-22 09:34:01 -06:00
parent 745041dd1b
commit b99cefa5f0
4 changed files with 70 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
www/index.html
View File

@ -4,9 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="res/style.css"> <link rel="stylesheet" href="res/style.css">
<link rel="icon" href="res/luna-moth.svg"> <link rel="icon" href="res/luna-moth.svg" type="image/svg+xml">
<link rel="icon" href="res/luna-moth.png"> <link rel="icon" href="res/luna-moth.png" type="image/png">
<script src="res/common.js"></script>
<script src="res/terminal.js"></script> <script src="res/terminal.js"></script>
<script src="res/overview.js"></script> <script src="res/overview.js"></script>
<script src="res/messages.js"></script> <script src="res/messages.js"></script>

1
www/puzzles.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>Open Puzzles</title> <title>Open Puzzles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css">
<script src="puzzles.js" onload="init()" async></script> <script src="puzzles.js" onload="init()" async></script>
</head> </head>

81
www/res/puzzles.js
View File

@ -1,45 +1,60 @@
var puzzles_terminal; var puzzlesTerminal;
var puzzlesJsonUrl = "puzzles.json";
var puzzles_url = "hack/puzzles.html"; function loadPuzzle(cat, id, points) {
console.log("Requested " + cat + "/" + id + "(" + points + ")");
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";
function puzzlesRefresh(term, obj) {
term.clear(); term.clear();
term.append(h1);
term.appendShallow(puzzles); 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));
}
} }
function refresh() { term.appendShallow(pdiv);
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 puzzles_start() { 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); window.addEventListener("load", puzzles_start);

19
www/res/style.css
View File

@ -48,16 +48,25 @@ h1 {
font-size: 120%; font-size: 120%;
} }
a:link { a:link, .link {
color: #13a5de; 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; display: inline;
} }
#puzzles dd { .category li + li:before {
margin: 0; content: " ";
margin-left: 1em;
} }
@media (max-width: 52em) { @media (max-width: 52em) {