Show game list, debug logins

This commit is contained in:
Christoph Hagen 2021-12-07 09:10:28 +01:00
parent 9d9c8ad71f
commit a2c2893499
4 changed files with 69 additions and 40 deletions

View File

@ -6,6 +6,20 @@ var playerName = ""
var debugSessionToken = null
const debugMode = true // Does not load session token, to allow multiple players per browser
function showDebugLogins() {
document.getElementById("login-window-inner").innerHTML +=
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('a')\">Player A</button>" +
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('b')\">Player B</button>" +
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('c')\">Player C</button>" +
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('d')\">Player D</button>"
}
function loginDebugUser(name) {
document.getElementById("user-name").value = name
document.getElementById("user-pwd").value = name
loginUser()
}
function setDisplayStyle(id, style) {
document.getElementById(id).style.display = style
}
@ -197,7 +211,13 @@ function updateTableInfo(table) {
setInfoForPlayer(table.player, "bottom")
if (table.player.selectsGame) {
setActionsForOwnPlayer(table.playableGames)
showAvailableGames([])
} else {
if (table.player.active) {
showAvailableGames(table.playableGames)
} else {
showAvailableGames([])
}
setActionsForOwnPlayer(table.player.actions)
}
if (table.hasOwnProperty("playerLeft")) {
@ -308,4 +328,15 @@ function performAction(action) {
}
performPlayerActionRequest(token, action)
// TODO: Handle errors and success
}
function showAvailableGames(games) {
var len = games.length
var html = ""
for (let i = 0; i < len; i += 1) {
const game = games[i]
const content = textForAction(game)
html += "<div class=\"standard-button available-game\">" + content + "</div>"
}
document.getElementById("available-games-list").innerHTML = html
}

View File

@ -112,6 +112,9 @@ function deletePlayerAccount() {
}
function loadExistingSession() {
if (debugMode) {
showDebugLogins()
}
const token = getSessionToken()
if (token == null) {
showBlankLogin()

View File

@ -53,6 +53,7 @@
<div id="table-player-name-left">Player 4</div>
<div id="table-player-state-left" class="player-connection-state">Offline</div>
</div>
<div id="available-games-list"></div>
</div>
<div id="action-bar-centering">
<div id="action-bar"></div>

View File

@ -11,6 +11,7 @@
--secondary-text-color: rgb(27, 27, 27);
--card-color: rgb(255,255,255);
--alert-color: rgb(255,0,0);
--game-type-color: rgb(100, 100, 100);
}
/* Style all input fields */
@ -270,20 +271,6 @@ body {
font-size: small;
}
#table-players {
display: none;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 649px;
height: 409px;
grid-template-columns: 200px 71px 36px 35px 36px 71px 200px;
grid-template-rows: 111px 76px 35px 76px 111px;
column-gap: 0px;
row-gap: 0px;
align-items: center;
}
#action-bar-centering {
margin-top: 10px;
text-align: center;
@ -298,31 +285,24 @@ body {
display: inline-block;
}
#action-buttons {
grid-column: 7;
grid-row: 4 / span 2;
width: 200px;
height: 187px;
}
.action-button {
height: 100%;
padding-left: 16px;
padding-right: 16px;
}
.action-button-container {
height: 40px;
width: 160px;
#table-players {
display: none;
margin-top: 10px;
margin-left: 40px;
}
#action-button-spacer {
height: 37px;
width: 100%;
background-color: var(--standard-background);
border: none;
margin-left: auto;
margin-right: auto;
width: 949px;
height: 409px;
grid-template-columns: 150px 200px 71px 36px 35px 36px 71px 200px 150px;
grid-template-rows: 111px 76px 35px 76px 111px;
column-gap: 0px;
row-gap: 0px;
align-items: center;
}
.table-card {
@ -332,31 +312,31 @@ body {
}
#table-player-card-bottom {
grid-column: 3 / span 3;
grid-column: 4 / span 3;
grid-row: 4 / span 2;
z-index: 2;
}
#table-player-card-left {
grid-column: 2 / span 2;
grid-column: 3 / span 2;
grid-row: 2 / span 3;
z-index: 1;
}
#table-player-card-top {
grid-column: 3 / span 3;
grid-column: 4 / span 3;
grid-row: 1 / span 2;
z-index: 4;
}
#table-player-card-right {
grid-column: 5 / span 2;
grid-column: 6 / span 2;
grid-row: 2 / span 3;
z-index: 3;
}
#table-player-info-bottom {
grid-column: 1 / span 2;
grid-column: 2 / span 2;
grid-row: 5;
font-size: large;
text-align: right;
@ -365,7 +345,7 @@ body {
}
#table-player-info-left {
grid-column: 1;
grid-column: 2;
grid-row: 3;
font-size: large;
text-align: right;
@ -373,7 +353,7 @@ body {
}
#table-player-info-top {
grid-column: 1 / span 2;
grid-column: 2 / span 2;
grid-row: 1;
font-size: large;
text-align: right;
@ -382,7 +362,7 @@ body {
}
#table-player-info-right {
grid-column: 7;
grid-column: 8;
grid-row: 3;
font-size: large;
margin-left: 15px;
@ -393,6 +373,20 @@ body {
color: var(--alert-color);
}
#available-games-list {
grid-column: 1;
grid-row: 1 / span 5;
width: 100%;
}
.available-game {
margin-top: 5px;
padding-left: 16px;
padding-right: 16px;
background-color: var(--game-type-color);
text-align: center;
}
#player-cards {
display: none;
margin-left: auto;