From d3abfbcea9e73be6715d0dde658442b852220b56 Mon Sep 17 00:00:00 2001
From: "John \"Elwin\" Edwards" <elwin@rlgallery.org>
Date: Sat, 9 Jun 2012 15:22:56 -0700
Subject: [PATCH] RLG-Web: put the game options into a table.

Create a nice table of options when the player logs in.
---
 index-rlg.html |  3 +++
 rlgterm.js     | 30 ++++++++++++++++++------------
 style-rlg.css  | 28 ++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/index-rlg.html b/index-rlg.html
index 9b1b64c..1acd296 100644
--- a/index-rlg.html
+++ b/index-rlg.html
@@ -99,6 +99,9 @@ Choose game: <select name="game" id="input_game">
 <input type="submit" value="Play" onclick="startgame(event)">
 </div>
 </form>
+<div id="opttable">
+  <div><div>Game</div><div>Actions</div></div>
+</div>
 </div>
 <div class="modal" id="login">
 <form id="loginform" action="/login" method="post">
diff --git a/rlgterm.js b/rlgterm.js
index 7507011..425cd99 100644
--- a/rlgterm.js
+++ b/rlgterm.js
@@ -421,28 +421,34 @@ function getchoices() {
     }
     if (!("name" in reply) || reply["name"] != lname || !("stat" in reply))
       return;
-    var statdiv = document.createElement("div");
+    var optdiv = document.getElementById("opttable");
+    /* Don't remove the first child, it's the header. */
+    while (optdiv.childNodes.length > 1)
+      optdiv.removeChild(optdiv.childNodes[1]);
     for (var gname in reply.stat) {
       if (!(gname in games))
         continue;
-      var stext;
+      var acttext;
       if (reply.stat[gname] == "s")
-        stext = games[gname].name + ": Resume your game";
+        acttext = "Resume your game";
       else if (reply.stat[gname] == "0")
-        stext = games[gname].name + ": Start a game";
+        acttext = "Start a game";
       else if (reply.stat[gname] == "p")
-        stext = games[gname].name + ": Game in progress";
+        acttext = "Game in progress";
       else
         continue;
-      var tnode = document.createTextNode(stext);
+      var button = document.createElement("span");
+      button.appendChild(document.createTextNode(acttext));
+      button.className = "ibutton";
+      var actdiv = document.createElement("div");
+      actdiv.appendChild(button);
       var gamediv = document.createElement("div");
-      gamediv.appendChild(tnode);
-      statdiv.appendChild(gamediv);
+      gamediv.appendChild(document.createTextNode(games[gname].name));
+      var rowdiv = document.createElement("div");
+      rowdiv.appendChild(gamediv);
+      rowdiv.appendChild(actdiv);
+      optdiv.appendChild(rowdiv);
     }
-    if (!statdiv.hasChildNodes()) {
-      statdiv.appendChild(document.createTextNode("No known games?"));
-    }
-    document.getElementById("startgame").appendChild(statdiv);
   };
   req.open('GET', '/pstatus/' + lname, true);
   req.send();
diff --git a/style-rlg.css b/style-rlg.css
index 1501e0d..4d15875 100644
--- a/style-rlg.css
+++ b/style-rlg.css
@@ -6,6 +6,34 @@ html {
 h1 {
 	text-align: center;
 }
+
 div.modal {
 	clear: both;
 }
+
+div#opttable {
+	display: table;
+	margin: 1em auto;
+	border: 2px solid #101040;
+}
+
+div#opttable > div {
+	display: table-row;
+}
+
+div#opttable > div > div {
+	display: table-cell;
+	padding: 0.4em 2em;
+}
+
+div#opttable > div > div:first-child {
+	font-weight: bold;
+	text-align: center;
+}
+
+span.ibutton {
+	background-color: #D0D0D0;
+	border: 2px solid #101040;
+	border-radius: 0.3em;
+	padding: 0.2em;
+}