--- a/rlgterm.js	Tue Jun 19 13:40:30 2012 -0700
+++ b/rlgterm.js	Tue Jun 19 16:19:50 2012 -0700
@@ -68,11 +68,15 @@
   }
 };
 
-/* Login name and key */
-var lname = null;
-var lcred = null;
-/* The session id assigned by the server. */
-var sessid = null;
+var session = {
+  /* The session id assigned by the server. */
+  id: null,
+  /* Login name and key */
+  lname: null,
+  lcred: null,
+  /* Whether the game is being played or just watched. */
+  playing: false
+};
 
 function writeData(hexstr) {
   var codenum;
@@ -213,10 +217,10 @@
 }
 
 function getData() {
-  if (sessid == null)
+  if (session.id == null)
     return;
   var datareq = new XMLHttpRequest();
-  var msg = JSON.stringify({"id": sessid, "t": "n"});
+  var msg = JSON.stringify({"id": session.id, "t": "n"});
   datareq.onreadystatechange = function () {
     if (datareq.readyState == 4 && datareq.status == 200) {
       var wasdata = processMsg(datareq.responseText);
@@ -245,7 +249,7 @@
 
 function sendback(str) {
   /* For responding to terminal queries. */
-  var msgDict = {"id": sessid, "t": "d", "n": nsend++, "d": str};
+  var msgDict = {"id": session.id, "t": "d", "n": nsend++, "d": str};
   var datareq = new XMLHttpRequest();
   datareq.onreadystatechange = postResponseHandler;
   datareq.open('POST', '/feed', true);
@@ -254,7 +258,7 @@
 }
 
 function sendkey(ev) {
-  if (sessid == null)
+  if (!session.playing)
     return;
   var keynum = ev.keyCode;
   var code;
@@ -291,11 +295,9 @@
     debug(1, "Ignoring keycode " + keynum);
     return;
   }
-  // Isn't this check redundant?
-  if (sessid != null)
-    ev.preventDefault();
+  ev.preventDefault();
   var datareq = new XMLHttpRequest();
-  var msgDict = {"id": sessid, "t": "d", "n": nsend++, "d": code};
+  var msgDict = {"id": session.id, "t": "d", "n": nsend++, "d": code};
   datareq.onreadystatechange = postResponseHandler;
   datareq.open('POST', '/feed', true);
   datareq.send(JSON.stringify(msgDict));
@@ -307,7 +309,7 @@
 }
 
 function vkey(c) {
-  if (sessid == null)
+  if (!session.playing)
     return;
   var keystr;
   if (c.match(/^[a-z]$/)) {
@@ -345,7 +347,7 @@
   else
     return;
   var datareq = new XMLHttpRequest();
-  var msgDict = {"id": sessid, "t": "d", "n": nsend++, "d": keystr};
+  var msgDict = {"id": session.id, "t": "d", "n": nsend++, "d": keystr};
   datareq.onreadystatechange = postResponseHandler;
   datareq.open('POST', '/feed', true);
   datareq.send(JSON.stringify(msgDict));
@@ -382,7 +384,7 @@
 
 function formlogin(ev) {
   ev.preventDefault();
-  if (sessid != null)
+  if (session.id != null)
     return;
   var loginmsg = {};
   loginmsg["name"] = document.getElementById("input_name").value;
@@ -394,8 +396,8 @@
     var reply = JSON.parse(req.responseText);
     if (reply.t == 'l') {
       /* Success */
-      lcred = reply.k;
-      lname = reply.u;
+      session.lcred = reply.k;
+      session.lname = reply.u;
       setTitle("Logged in as " + reply.u);
       debug(1, "Logged in as " + reply.u + " with id " + reply.k);
       setmode("choose");
@@ -412,7 +414,7 @@
 }
 
 function getcurrent() {
-  if (sessid)
+  if (session.id)
     return;
   var req = new XMLHttpRequest();
   req.onreadystatechange = function () {
@@ -430,7 +432,7 @@
     }
     var gamediv = document.getElementById("gametable");
     while (gamediv.children.length > 2)
-      gamediv.removeChild(optdiv.children[2]);
+      gamediv.removeChild(gamediv.children[2]);
     if (reply.g.length === 0) {
       gamediv.style.display = "none";
       document.getElementById("nogames").style.display = "block";
@@ -443,10 +445,17 @@
       var row = document.createElement("div");
       var cell1 = document.createElement("div");
       var cell2 = document.createElement("div");
+      var cell3 = document.createElement("div");
       cell1.appendChild(document.createTextNode(reply.g[i].p));
       cell2.appendChild(document.createTextNode(reply.g[i].g));
+      var button = document.createElement("span");
+      button.appendChild(document.createTextNode("Watch"));
+      button.onclick = makeWatcher(reply.g[i].n);
+      button.className = "ibutton";
+      cell3.appendChild(button);
       row.appendChild(cell1);
       row.appendChild(cell2);
+      row.appendChild(cell3);
       gamediv.appendChild(row);
     }
   };
@@ -456,7 +465,7 @@
 }
 
 function getchoices() {
-  if (sessid != null || !lcred)
+  if (session.id != null || !session.lcred)
     return;
   var req = new XMLHttpRequest();
   req.onreadystatechange = function () {
@@ -469,7 +478,8 @@
       if (e instanceof SyntaxError)
         return;
     }
-    if (!("name" in reply) || reply["name"] != lname || !("stat" in reply))
+    if (!("name" in reply) || reply["name"] != session.lname || 
+        !("stat" in reply))
       return;
     var optdiv = document.getElementById("opttable");
     /* Don't remove the first child, it's the header. */
@@ -503,7 +513,7 @@
       optdiv.appendChild(rowdiv);
     }
   };
-  req.open('GET', '/pstatus/' + lname, true);
+  req.open('GET', '/pstatus/' + session.lname, true);
   req.send();
   return;
 }
@@ -523,10 +533,10 @@
 }
 
 function startgame(game) {
-  if (sessid != null || !lcred)
+  if (session.id != null || !session.lcred)
     return;
   var smsg = {};
-  smsg["key"] = lcred;
+  smsg["key"] = session.lcred;
   smsg["game"] = game.uname;
   smsg["h"] = 24;
   smsg["w"] = 80;
@@ -537,10 +547,11 @@
     var reply = JSON.parse(req.responseText);
     if (reply.t == 's') {
       /* Success */
-      sessid = reply.id;
+      session.id = reply.id;
+      session.playing = true;
       termemu.resize(reply.h, reply.w);
-      setTitle("Playing as " + lname);
-      debug(1, "Playing with id " + sessid);
+      setTitle("Playing as " + session.lname);
+      debug(1, "Playing with id " + session.id);
       setmode("play");
       getData();
     }
@@ -556,9 +567,44 @@
   return;
 }
 
+function startwatching(gamenumber) {
+  if (session.id != null)
+    return;
+  var wmsg = {"n": Number(gamenumber)};
+  var req = new XMLHttpRequest();
+  req.onreadystatechange = function () {
+    if (req.readyState != 4 || req.status != 200) 
+      return;
+    var reply = JSON.parse(req.responseText);
+    if (reply.t == 'w') {
+      /* Success */
+      session.id = reply.id;
+      session.playing = false;
+      termemu.resize(reply.h, reply.w);
+      setTitle("Watching");
+      debug(1, "Watching with id " + session.id);
+      setmode("play");
+      getData();
+    }
+    else if (reply.t == 'E') {
+      debug(1, "Could not watch game " + gamenumber + ": " + reply.s);
+    }
+  };
+  req.open('POST', '/watch', true);
+  req.send(JSON.stringify(wmsg));
+  return;
+}
+
+function makeWatcher(n) {
+  function watcher(ev) {
+    startwatching(n);
+  }
+  return watcher;
+}
+
 function formreg(ev) {
   ev.preventDefault();
-  if (sessid != null)
+  if (session.id != null)
     return;
   var regmsg = {};
   regmsg["name"] = document.getElementById("regin_name").value;
@@ -572,10 +618,10 @@
     if (reply.t == 'r') {
       /* Success */
       debug(1, "Registered account: " + reply.d);
-      lcred = reply.k;
-      lname = reply.u;
-      setTitle("Logged in as " + lname);
-      debug(1, "Logged in as " + lname + "with id " + lcred);
+      session.lcred = reply.k;
+      session.lname = reply.u;
+      setTitle("Logged in as " + session.lname);
+      debug(1, "Logged in as " + session.lname + "with id " + session.lcred);
       setmode("choose");
     }
     else if (reply.t == 'E') {
@@ -591,27 +637,31 @@
 }
 
 function gameover() {
-  if (sessid == null)
+  if (session.id == null)
     return;
   /* TODO IFACE2 If the end was unexpected, tell player the game was saved. */
-  sessid = null;
+  session.id = null;
+  session.playing = false;
   ajaxstate.clear();
   setTitle("Game over.");
   nsend = 0;
   nrecv = 0;
   msgQ = [];
-  setmode("choose");
+  if (session.lcred != null)
+    setmode("choose");
+  else
+    setmode("login");
   return;
 }
 
 function logout() {
-  lcred = null;
-  lname = null;
+  session.lcred = null;
+  session.lname = null;
   setmode("login");
 }
 
 function stop() {
-  if (!sessid)
+  if (!session.id)
     return;
   var req = new XMLHttpRequest();
   req.onreadystatechange = function () {
@@ -621,7 +671,7 @@
     }
   };
   req.open('POST', '/feed', true);
-  req.send(JSON.stringify({"id": sessid, "t": "q"}));
+  req.send(JSON.stringify({"id": session.id, "t": "q"}));
   return;
 }