Mercurial > hg > rlgwebd

changeset 45:1bbd0e76ba92

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
RLG-Web: put the game options into a table. Create a nice table of options when the player logs in.
author John "Elwin" Edwards <elwin@sdf.org>
date Sat, 09 Jun 2012 15:22:56 -0700
parents b848cb50cd69
children 59ecd99845eb
files index-rlg.html rlgterm.js style-rlg.css
diffstat 3 files changed, 49 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/index-rlg.html	Sat Jun 09 14:13:07 2012 -0700
+++ b/index-rlg.html	Sat Jun 09 15:22:56 2012 -0700
@@ -99,6 +99,9 @@
 <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">
--- a/rlgterm.js	Sat Jun 09 14:13:07 2012 -0700
+++ b/rlgterm.js	Sat Jun 09 15:22:56 2012 -0700
@@ -421,28 +421,34 @@
     }
     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();
--- a/style-rlg.css	Sat Jun 09 14:13:07 2012 -0700
+++ b/style-rlg.css	Sat Jun 09 15:22:56 2012 -0700
@@ -6,6 +6,34 @@
 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;
+}