diff --git a/Public/elements.js b/Public/elements.js index 93733a1..d614fc3 100644 --- a/Public/elements.js +++ b/Public/elements.js @@ -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 += + "" + + "" + + "" + + "" +} + +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 += "
" + content + "
" + } + document.getElementById("available-games-list").innerHTML = html } \ No newline at end of file diff --git a/Public/game.js b/Public/game.js index 68e6179..4cbb8b1 100644 --- a/Public/game.js +++ b/Public/game.js @@ -112,6 +112,9 @@ function deletePlayerAccount() { } function loadExistingSession() { + if (debugMode) { + showDebugLogins() + } const token = getSessionToken() if (token == null) { showBlankLogin() diff --git a/Public/schafkopf.html b/Public/schafkopf.html index c97b7ff..940a6b6 100644 --- a/Public/schafkopf.html +++ b/Public/schafkopf.html @@ -53,6 +53,7 @@
Player 4
Offline
+
diff --git a/Public/style.css b/Public/style.css index 752e26e..6b6c19f 100644 --- a/Public/style.css +++ b/Public/style.css @@ -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;