RLG-Web client: use WebSockets for game lists.

Use the WebSocket connection to /status to create the list of current
games.
This commit is contained in:
John "Elwin" Edwards 2012-07-14 09:46:26 -07:00
parent bec02aea9e
commit 1ef1b16014

View file

@ -75,6 +75,8 @@ var games = {
}
};
var wsHost = "localhost:8080";
var session = {
/* The session id assigned by the server. */
id: null,
@ -91,6 +93,8 @@ var session = {
var statInterval = null;
/* How frequently to check. */
var statDelta = 8000;
/* A WebSocket to listen for status events. */
var statsock = null;
function writeData(hexstr) {
var codenum;
@ -466,6 +470,78 @@ function formlogin(ev) {
return;
}
function tableCurrent(gamelist) {
var gamediv = document.getElementById("gametable");
while (gamediv.children.length > 2)
gamediv.removeChild(gamediv.children[2]);
if (gamelist.length === 0) {
gamediv.style.display = "none";
document.getElementById("nogames").style.display = "block";
}
else {
gamediv.style.display = "table";
document.getElementById("nogames").style.display = "none";
}
for (var i = 0; i < gamelist.length; i++) {
var row = document.createElement("div");
var cell1 = document.createElement("div");
var cell2 = document.createElement("div");
var cell3 = document.createElement("div");
var cell4 = document.createElement("div");
cell1.appendChild(document.createTextNode(gamelist[i].p));
var uname = gamelist[i].g;
if (uname in games)
cell2.appendChild(document.createTextNode(games[uname].name));
else {
continue;
}
cell3.appendChild(document.createTextNode(idlestr(gamelist[i].i)));
var button = document.createElement("span");
button.appendChild(document.createTextNode("Watch"));
button.onclick = makeWatcher(gamelist[i].n);
button.className = "ibutton";
cell4.appendChild(button);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
gamediv.appendChild(row);
}
}
/* Handles the status socket, opening and closing it when necessary. */
function wsCurrent() {
if (!WebSocket)
return;
if (session.id) {
/* Don't bother with status if already playing/watching. */
if (statsock) {
statsock.close();
statsock = null;
}
return;
}
if (statsock)
return;
statsock = new WebSocket("ws://" + wsHost + "/status");
statsock.onmessage = function (ev) {
var msg;
try {
msg = JSON.parse(ev.data);
} catch (e) {
if (e instanceof SyntaxError)
return;
}
if (msg.t != "t") {
return;
}
tableCurrent(msg.g);
};
statsock.onclose = function (ev) {
statsock = null;
}
}
function getcurrent(clear) {
if (session.id || clear) {
if (statInterval) {
@ -477,6 +553,11 @@ function getcurrent(clear) {
if (!statInterval) {
statInterval = window.setInterval(getcurrent, statDelta);
}
if (session.lcred)
getchoices();
if (WebSocket) {
return;
}
var req = new XMLHttpRequest();
req.onerror = errHandler;
req.onreadystatechange = function () {
@ -492,48 +573,10 @@ function getcurrent(clear) {
if (!reply.s) {
return;
}
var gamediv = document.getElementById("gametable");
while (gamediv.children.length > 2)
gamediv.removeChild(gamediv.children[2]);
if (reply.g.length === 0) {
gamediv.style.display = "none";
document.getElementById("nogames").style.display = "block";
}
else {
gamediv.style.display = "table";
document.getElementById("nogames").style.display = "none";
}
for (var i = 0; i < reply.g.length; i++) {
var row = document.createElement("div");
var cell1 = document.createElement("div");
var cell2 = document.createElement("div");
var cell3 = document.createElement("div");
var cell4 = document.createElement("div");
cell1.appendChild(document.createTextNode(reply.g[i].p));
var uname = reply.g[i].g;
if (uname in games)
cell2.appendChild(document.createTextNode(games[uname].name));
else {
debug(1, "Unrecognized game: " + uname);
continue;
}
cell3.appendChild(document.createTextNode(idlestr(reply.g[i].i)));
var button = document.createElement("span");
button.appendChild(document.createTextNode("Watch"));
button.onclick = makeWatcher(reply.g[i].n);
button.className = "ibutton";
cell4.appendChild(button);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
gamediv.appendChild(row);
}
tableCurrent(reply.g);
};
req.open('GET', '/status', true);
req.send();
if (session.lcred)
getchoices();
return;
}
@ -699,7 +742,7 @@ function makeWatcher(n) {
}
function wsWatch(gamenumber) {
var sockurl = "ws://localhost:8080/watch/" + String(gamenumber);
var sockurl = "ws://" + wsHost + "/watch/" + String(gamenumber);
var ws = new WebSocket(sockurl);
ws.onopen = function (event) {
session.id = true;
@ -871,6 +914,7 @@ function setmode(mode, ev) {
document.getElementById("register").style.display = "block";
document.getElementById("current").style.display = "none";
}
wsCurrent();
}
function toggleBlock(id) {