RLG-Web: put the game options into a table.
Create a nice table of options when the player logs in.
This commit is contained in:
parent
2e35e55925
commit
d3abfbcea9
3 changed files with 49 additions and 12 deletions
|
|
@ -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">
|
||||
|
|
|
|||
30
rlgterm.js
30
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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue