warden/rlgwebd
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

RLG-Web: put the game options into a table.

Browse source 
Create a nice table of options when the player logs in.
This commit is contained in:
John "Elwin" Edwards 2012-06-09 15:22:56 -07:00
parent 2e35e55925
commit d3abfbcea9
3 changed files with 49 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

3
index-rlg.html
View file

@ -99,6 +99,9 @@ Choose game: <select name="game" id="input_game">
<input type="submit" value="Play" onclick="startgame(event)"> <input type="submit" value="Play" onclick="startgame(event)">
</div> </div>
</form> </form>
<div id="opttable">
<div><div>Game</div><div>Actions</div></div>
</div>
</div> </div>
<div class="modal" id="login"> <div class="modal" id="login">
<form id="loginform" action="/login" method="post"> <form id="loginform" action="/login" method="post">

30
rlgterm.js
View file

@ -421,28 +421,34 @@ function getchoices() {
} }
if (!("name" in reply) || reply["name"] != lname || !("stat" in reply)) if (!("name" in reply) || reply["name"] != lname || !("stat" in reply))
return; 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) { for (var gname in reply.stat) {
if (!(gname in games)) if (!(gname in games))
continue; continue;
var stext; var acttext;
if (reply.stat[gname] == "s") if (reply.stat[gname] == "s")
stext = games[gname].name + ": Resume your game"; acttext = "Resume your game";
else if (reply.stat[gname] == "0") else if (reply.stat[gname] == "0")
stext = games[gname].name + ": Start a game"; acttext = "Start a game";
else if (reply.stat[gname] == "p") else if (reply.stat[gname] == "p")
stext = games[gname].name + ": Game in progress"; acttext = "Game in progress";
else else
continue; 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"); var gamediv = document.createElement("div");
gamediv.appendChild(tnode); gamediv.appendChild(document.createTextNode(games[gname].name));
statdiv.appendChild(gamediv); 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.open('GET', '/pstatus/' + lname, true);
req.send(); req.send();

28
style-rlg.css
View file

@ -6,6 +6,34 @@ html {
h1 { h1 {
text-align: center; text-align: center;
} }
div.modal { div.modal {
clear: both; 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;
}