Better despooler, still needs one fix

www/cgi-bin/puzzles.cgi

@@ -23,7 +23,7 @@ for line in io.lines(koth.path("state/points.log")) do
 	end
 end
 
-local body = "<dl>\n"
+local body = "<dl id=\"puzzles\">\n"
 for cat, biggest in pairs(max_by_cat) do
 	local points, dirname
 

www/res/main.js

@@ -1,11 +1,9 @@
-var main_proc;
+var main_terminal;
 
 function Main(element) {
-    console.log(element);
     var term = new Terminal(element);
 
     this.start = function() {
-	console.log(element);
 	term.clear();
 	term.par("Main terminal.")
 	term.par("This is the main terminal. In this terminal you will get your puzzle content and someplace to enter in possible answers. It's probably just going to pull the old URL, steal the body element, and submit it to a new Terminal method for slow-despooling of the content of text nodes.")
@@ -17,8 +15,8 @@ function Main(element) {
 
 
 function main_start() {
-    main_proc = new Main(document.getElementById("main"));
+    main_terminal = new Main(document.getElementById("main"));
-    setTimeout(main_proc.start, 2500);
+    setTimeout(main_terminal.start, 2500);
 }
 
 window.addEventListener("load", main_start);

www/res/maven_pro.css

@@ -10,7 +10,7 @@
     font-style: normal;
 
 }
-/*
+*/
 
 @font-face {
     font-family: 'Maven Pro';

www/res/messages.js

@@ -1,4 +1,4 @@
-var messages_proc;
+var messages_terminal;
 
 function Messages(element) {
     var term = new Terminal(element);
@@ -12,8 +12,8 @@ function Messages(element) {
 
 
 function messages_start() {
-    messages_proc = new Messages(document.getElementById("messages"));
+    messages_terminal = new Messages(document.getElementById("messages"));
-    setTimeout(messages_proc.start, 500);
+    setTimeout(messages_terminal.start, 500);
 }
 
 window.addEventListener("load", messages_start);

www/res/puzzles.js

@@ -1,19 +1,47 @@
-var puzzles_proc;
+var puzzles_terminal;
+
+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";
 
-    this.start = function() {
 	term.clear();
-	term.par("Puzzles terminal");
+	term.append(h1);
-	term.par("This is going to show you the list of open puzzles. It should refresh itself periodically, since not refreshing was a source of major confusion in the last setup, at least for kids, who seem not to realize what the reload button in the browser does.")
+	term.append(puzzles);
     }
+
+    function refresh() {
+	var myRequest = new XMLHttpRequest();
+	myRequest.responseType = "document";
+	myRequest.addEventListener("load", loaded);
+	myRequest.open("GET", puzzles_url);
+	myRequest.send();
+    }
+
+    function start() {
+	term.clear();
+	term.par("Loading...");
+
+	term.par("This is going to show you the list of open puzzles. It should refresh itself periodically, since not refreshing was a source of major confusion in the last setup, at least for kids, who seem not to realize what the reload button in the browser does.")
+
+	refreshInterval = setInterval(refresh, 20 * 1000);
+	refresh();
+    }
+
+    setTimeout(start, 3000);
 }
 
 
 function puzzles_start() {
-    puzzles_proc = new Puzzles(document.getElementById("puzzles"));
+    puzzles_terminal = new Puzzles(document.getElementById("puzzles"));
-    setTimeout(puzzles_proc.start, 3000);
 }
 
 window.addEventListener("load", puzzles_start);

www/res/style.css

@@ -1,8 +1,13 @@
+/* @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic); */
+/* @import "maven_pro.css"; */
+@import "lato.css";
+
 html {
     background: rgba(61, 50, 44, 0) url(brown-lines.jpg) no-repeat center center fixed;
     background-size: cover;
     color: #ccb;
     height: 100%;
+    font-family: Lato;
 }
 
 body {
@@ -15,7 +20,7 @@ body {
     display: inline-block;
     margin: 1%;
     border: solid black 0.2em;
-    border-radius: 1em 0.25em 1em 1em;
+    border-radius: 1em 1em 0.5em 1em;
     overflow: auto;
 }
 
@@ -38,8 +43,39 @@ body {
     height: 70%;
 }
 
+h1 {
+    text-align: center;
+    font-size: 120%;
+}
+
+a:link {
+    color: #13a5de;
+}
+
+#puzzles dl {
+    display: inline;
+}
+#puzzles dd {
+    margin: 0;
+    margin-left: 1em;
+}
+
 @media (max-width: 52em) {
     #overview, #messages, #puzzles, #main {
 	width: 96%;
     }
 }
+
+::-webkit-scrollbar {
+    width: 0.7em;
+}
+ 
+::-webkit-scrollbar-track {
+    /* -webkit-box-shadow: inset 0 0 0.5em rgba(200, 200, 200, 0.3); */
+    background: rgba(0, 0, 0, 0.2);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2); 
+    border-radius: 1em;
+}

www/res/terminal.js

@@ -1,20 +1,55 @@
-function tx(element, text, bps) {
+// XXX: Hack for chrome not supporting an iterator method on HTMLCollection
+HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
+NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
+
+function Terminal(target, bps) {
+    bps = bps || 1200;
+
+    var outq = [];
+    var outTimer;
+
+    function tx(nodes, bps, scroll) {
 	var drawTimer;
 
-    var displayed = "";
+	// Looks like EMCAScript 6 has a yield statement. That'll be nice.
-    var idx = 0;
+	//
-    function draw() {
+	// for (var node of nodes) {
-	displayed += text[idx];
+	//   var text = "";
-	element.textContent = displayed;
+	//  for (var c of node._text) {
+	//    text += c;
+	//    node.textContent = text;
+	//   }
+	// }
 
-	idx += 1;
+	var nodeIndex = 0;
-	if (element.parentNode.lastChild == element) {
+	var node = nodes[0];
-	    element.scrollIntoView();
+
-	}
+	var textIndex = 0;
-	if (text.length == idx) {
+	var text = "";
+
+	function draw() {
+	    var src = node._text;
+	    var c = src[textIndex];
+
+	    text += c;
+	    node.textContent = text;
+
+	    textIndex += 1;
+	    if (textIndex == src.length) {
+		textIndex = 0;
+		text = "";
+
+		nodeIndex += 1;
+		if (nodeIndex == nodes.length) {
 		    clearInterval(drawTimer);
 		    return;
 		}
+		node = nodes[nodeIndex];
+	    }
+
+	    if (scroll) {
+		node.scrollIntoView();
+	    }
 	}
 
 	// N81 uses 1 stop bit, and 1 parity bit.
@@ -25,43 +60,91 @@ function tx(element, text, bps) {
 	draw();
     }
 
-function Terminal(target, bps) {
-    bps = bps || 1200;
 
-    var outq = [];
+    function start() {
-    var outTimer;
-
-    function drawElement() {
-	var next = outq.shift();
-	var out = document.createElement(next[0]);
-
-	target.appendChild(out);
-	tx(out, next[1], bps);
-
-	if (outq.length == 0) {
-	    clearInterval(outTimer);
-	}
-    }
-
-    this.clear = function() {
-	while (target.firstChild) {
-	    target.removeChild(target.firstChild);
-	}
-    }
-
-    this.enqueue = function(tag, txt) {
-	outq.push([tag, txt]);
 	if (! outTimer) {
 	    outTimer = setInterval(drawElement, 150);
 	}
     }
 
-    this.par = function(txt) {
+
-	this.enqueue("p", txt);
+    function stop() {
+	if (outTimer) {
+	    clearInterval(outTimer);
+	    outTimer = null;
+	}
     }
 
+    
+    function drawElement() {
+	var element = outq.shift();
+
+	console.log(element);
+	if (! element) {
+	    stop();
+	    return;
+	}
+
+	tx(element._terminalNodes, bps);
+    }
+
+
+    function prepare(element) {
+	var nodes = [];
+
+	walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	while (walker.nextNode()) {
+	    var node = walker.currentNode;
+	    var text = node.textContent;
+
+	    node.textContent = "";
+	    nodes.push(node);
+	}
+
+	element._terminalNodes = nodes;
+    }
+	
+
+    // The main entry point: works like appendChild
+    this.append = function(element) {
+	prepare(element);
+	target.appendChild(element);
+	outq.push(element);
+	start();
+    }
+
+
+    // A cool effect where it despools children in parallel
+    this.appendShallow = function(element) {
+	for (var child of element.childNodes) {
+	    prepare(child);
+	    outq.push(child);
+	}
+	target.appendChild(element);
+	start();
+    }
+
+
+    this.clear = function() {
+	stop();
+	outq = [];
+	while (target.firstChild) {
+	    target.removeChild(target.firstChild);
+	}
+    }
+
+
+    this.par = function(txt) {
+	var e = document.createElement("p");
+	e.textContent = txt;
+	this.append(e);
+    }
+
+
     this.pre = function(txt) {
-	this.enqueue("pre", txt);
+	var e = document.createElement("pre");
+	e.textContent = txt;
+	this.append(e);
     }
 }