From 2bdd26b2f49a974250327398cffaf01d8f9f6961 Mon Sep 17 00:00:00 2001
From: "John \"Elwin\" Edwards" <elwin@rlgallery.org>
Date: Mon, 18 Jun 2012 14:30:05 -0700
Subject: [PATCH] RLG-Web client: display a list of current games.

Incorporate information from /status to create a list of ongoing games.
Eventually these will be watchable.
---
 index-rlg.html |  6 ++++++
 rlgterm.js     | 42 ++++++++++++++++++++++++++++++++++++++++++
 style-rlg.css  |  9 +++++++++
 3 files changed, 57 insertions(+)

diff --git a/index-rlg.html b/index-rlg.html
index ae4a2a7..d473ae5 100644
--- a/index-rlg.html
+++ b/index-rlg.html
@@ -85,6 +85,12 @@
 <span onclick="textsize(true)" class="ibutton">Larger</span>
 </div>
 </div>
+<div class="modal" id="current">
+<div id="gametable" class="formtable">
+ <div class="tcapt">Games in Progress</div>
+ <div><div>Player</div><div>Game</div></div>
+</div>
+</div>
 <div class="modal" id="startgame">
 <div id="opttable" class="formtable"><div><div>Game</div><div>Actions</div></div></div>
 </div>
diff --git a/rlgterm.js b/rlgterm.js
index 0f5dbd0..70d3bae 100644
--- a/rlgterm.js
+++ b/rlgterm.js
@@ -409,6 +409,42 @@ function formlogin(ev) {
   return;
 }
 
+function getcurrent() {
+  if (termemu.sessid)
+    return;
+  var req = new XMLHttpRequest();
+  req.onreadystatechange = function () {
+    if (req.readyState != 4 || req.status != 200) 
+      return;
+    var reply;
+    try {
+      reply = JSON.parse(req.responseText);
+    } catch (e) {
+      if (e instanceof SyntaxError)
+        return;
+    }
+    if (!reply.s) {
+      return;
+    }
+    var gamediv = document.getElementById("gametable");
+    while (gamediv.children.length > 2)
+      gamediv.removeChild(optdiv.children[2]);
+    for (var i = 0; i < reply.g.length; i++) {
+      var row = document.createElement("div");
+      var cell1 = document.createElement("div");
+      var cell2 = document.createElement("div");
+      cell1.appendChild(document.createTextNode(reply.g[i].p));
+      cell2.appendChild(document.createTextNode(reply.g[i].g));
+      row.appendChild(cell1);
+      row.appendChild(cell2);
+      gamediv.appendChild(row);
+    }
+  };
+  req.open('GET', '/status', true);
+  req.send();
+  return;
+}
+
 function getchoices() {
   if (termemu.sessid != null || !lcred)
     return;
@@ -587,25 +623,31 @@ function setmode(mode, ev) {
     document.getElementById("startgame").style.display = "none";
     document.getElementById("login").style.display = "none";
     document.getElementById("register").style.display = "none";
+    document.getElementById("current").style.display = "none";
   }
   if (mode == "choose") {
     document.getElementById("keyboard").style.display = "none";
     document.getElementById("startgame").style.display = "block";
     document.getElementById("login").style.display = "none";
     document.getElementById("register").style.display = "none";
+    document.getElementById("current").style.display = "block";
     getchoices();
+    getcurrent();
   }
   else if (mode == "login") {
     document.getElementById("keyboard").style.display = "none";
     document.getElementById("startgame").style.display = "none";
     document.getElementById("login").style.display = "block";
     document.getElementById("register").style.display = "none";
+    document.getElementById("current").style.display = "block";
+    getcurrent();
   }
   else if (mode == "register") {
     document.getElementById("keyboard").style.display = "none";
     document.getElementById("startgame").style.display = "none";
     document.getElementById("login").style.display = "none";
     document.getElementById("register").style.display = "block";
+    document.getElementById("current").style.display = "none";
   }
 }
 
diff --git a/style-rlg.css b/style-rlg.css
index 1285c30..939a52c 100644
--- a/style-rlg.css
+++ b/style-rlg.css
@@ -40,6 +40,15 @@ div.formtable > div > div:first-child {
 	text-align: center;
 }
 
+div.formtable > div.tcapt {
+	display: table-caption;
+	caption-side: top;
+	margin: 0 auto;
+	padding: 0.4em;
+	font-weight: bold;
+	text-align: center;
+}
+
 span.ibutton {
 	background-color: #D0D0D0;
 	border: 2px solid #101040;