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 var debugSessionToken = null
const debugMode = true // Does not load session token, to allow multiple players per browser 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) { function setDisplayStyle(id, style) {
document.getElementById(id).style.display = style document.getElementById(id).style.display = style
} }
@ -197,7 +211,13 @@ function updateTableInfo(table) {
setInfoForPlayer(table.player, "bottom") setInfoForPlayer(table.player, "bottom")
if (table.player.selectsGame) { if (table.player.selectsGame) {
setActionsForOwnPlayer(table.playableGames) setActionsForOwnPlayer(table.playableGames)
showAvailableGames([])
} else { } else {
if (table.player.active) {
showAvailableGames(table.playableGames)
} else {
showAvailableGames([])
}
setActionsForOwnPlayer(table.player.actions) setActionsForOwnPlayer(table.player.actions)
} }
if (table.hasOwnProperty("playerLeft")) { if (table.hasOwnProperty("playerLeft")) {
@ -309,3 +329,14 @@ function performAction(action) {
performPlayerActionRequest(token, action) performPlayerActionRequest(token, action)
// TODO: Handle errors and success // 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() { function loadExistingSession() {
if (debugMode) {
showDebugLogins()
}
const token = getSessionToken() const token = getSessionToken()
if (token == null) { if (token == null) {
showBlankLogin() showBlankLogin()

View File

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

View File

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