Show game list, debug logins

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 += 
+    "<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
 }

Public/game.js

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

Public/schafkopf.html

@@ -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>

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;