Client: Play cards, select game

Public/api.js

@@ -65,6 +65,12 @@ async function performPlayerActionRequest(token, action) {
     .then(convertServerResponse)
 }
 
+async function performPlayCardRequest(token, card) {
+    return fetch("/player/card/" + card, { method: 'POST',  body: token })
+    .then(convertServerResponse)
+    .then(function(value) {})
+}
+
 function convertServerResponse(response) {
     switch (response.status) {
         case 200: // Success
@@ -94,5 +100,6 @@ function convertJsonResponse(text) {
     if (text == "") {
         return null;
     }
+    console.log(text)
     return JSON.parse(text);
 }

Public/elements.js

@@ -124,20 +124,21 @@ function setTableListContent(content) {
     document.getElementById("table-list").innerHTML = content
 }
 
-function setTablePlayerInfo(position, name, connected, active) {
+function setTablePlayerInfo(position, name, connected, active, card, layer) {
     nameColor = active ?  "var(--button-color)" : "var(--text-color)"
-    setTablePlayerElements(position, name, nameColor, connected)
+    setTablePlayerElements(position, name, nameColor, connected, card, layer)
 }
 
 function setEmptyPlayerInfo(position) {
-    setTablePlayerElements(position, "Empty", "var(--secondary-text-color)", true)
+    setTablePlayerElements(position, "Empty", "var(--secondary-text-color)", true, "", 1)
 }
 
-function setTablePlayerElements(position, name, nameColor, connected) {
+function setTablePlayerElements(position, name, nameColor, connected, card, layer) {
     const nameElement = document.getElementById("table-player-name-" + position)
     nameElement.style.color = nameColor
     nameElement.innerHTML = name
     showConnectionState(position, connected)
+    setTableCard(position, card, layer)
 }
 
 function showConnectionState(position, connected) {
@@ -145,22 +146,37 @@ function showConnectionState(position, connected) {
     setDisplayStyle(connectionElement, connected ? "none" : "inherit")   
 }
 
-function setTableCard(index, card) {
+function setTableCard(position, card, layer) {
-    const id = "table-player-card" + index.toString()
+    const id = "table-player-card-" + position
-    setCard(id, card)
+    setCard(id, card, layer)
 }
 
 function setHandCard(index, card, playable) {
     const id = "player-card" + index.toString()
-    setCard(id, card)
+    setCard(id, card, 1)
-    document.getElementById(id).disabled = !playable
+    const button = document.getElementById(id)
+    if (playable) {
+        button.disabled = false
+        button.onclick = function() {
+            playCard(card)
+        }
+    } else {
+        button.disabled = true
+        button.onclick = function() { }
+    }
 }
 
-function setCard(id, card) {
+function setCard(id, card, layer) {
+    const element = document.getElementById(id)
     if (card == "") {
-        document.getElementById(id).style.backgroundColor = "var(--element-background)"
+        element.style.backgroundColor = "var(--element-background)"
+        element.style.backgroundImage = ""
+        element.style.zIndex = 0
+    
     } else {
-        document.getElementById(id).style.backgroundImage = "url('/cards/" + card + ".jpeg')"
+        element.style.backgroundColor = ""
+        element.style.backgroundImage = "url('/cards/" + card + ".jpeg')"
+        element.style.zIndex = layer + 1
     }
 }
 
@@ -179,7 +195,11 @@ function updateTableInfo(table) {
     // Show player info
     console.log(table)
     setInfoForPlayer(table.player, "bottom")
-    setActionsForOwnPlayer(table.player.actions)
+    if (table.player.selectsGame) {
+        setActionsForOwnPlayer(table.playableGames)
+    } else {
+        setActionsForOwnPlayer(table.player.actions)
+    }
     if (table.hasOwnProperty("playerLeft")) {
         setInfoForPlayer(table.playerLeft, "left")
     } else {
@@ -195,19 +215,15 @@ function updateTableInfo(table) {
     } else {
         setEmptyPlayerInfo("right")
     }
-    
-    // if (table.tableIsFull) {
-    //     showDealButton()
-    // } else {
-    //     hideDealButton()
-    // }
-    
-    // TODO
-    // Use .hasOwnProperty() for optionals
 }
 
 function setInfoForPlayer(player, position) {
-    setTablePlayerInfo(position, player.name, player.connected, player.active)
+    var card = ""
+    if (player.hasOwnProperty("playedCard")) {
+        card = player.playedCard
+    }
+    const layer = player.position
+    setTablePlayerInfo(position, player.name, player.connected, player.active, card, layer)
 }
 
 function clearInfoForPlayer(position) {
@@ -215,14 +231,15 @@ function clearInfoForPlayer(position) {
 }
 
 function setActionsForOwnPlayer(actions) {
-    const len = actions.length
+    var len = actions.length
+    var html = ""
     for (let i = 0; i < len; i += 1) {
         const action = actions[i]
-        setActionButton(i+1, textForAction(action), action)
+        const content = textForAction(action)
-    }
+        html += "<button class=\"standard-button action-button\" " + 
-    for (let i = len; i < 3; i += 1) {
+        "onclick=\"performAction('" + action + "')\">" + content + "</button>"
-        hideActionButton(i+1)
     }
+    document.getElementById("action-bar").innerHTML = html
 }
 
 function textForAction(action) {
@@ -257,22 +274,30 @@ function textForAction(action) {
         
         /// The player claims to win and doubles the game cost ("schießen")
         case "raise":
-            return "Schießen"
+        return "Schießen"
-    }
+        
-    return action
+        case "ruf-eichel":
+        return "Ruf Eichel"
+        case "ruf-blatt":
+        return "Ruf Blatt"
+        case "ruf-schelln":
+        return "Ruf Schelln"
+        case "bettel":
+        return "Bettel"
+        case "wenz":
+        return "Wenz"
+        case "geier":
+        return "Geier"
+        case "solo-eichel":
+        return "Eichel Solo"
+        case "solo-blatt":
+        return "Blatt Solo"
+        case "solo-herz":
+        return "Herz Solo"
+        case "solo-schelln":
+        return "Schelln Solo"
 }
-
+return action
-function setActionButton(position, text, action) {
-    const button = document.getElementById("action-button" + position.toString())
-    button.style.display = "inherit"
-    button.innerHTML = text
-    button.onclick = function() {
-        performAction(action)
-    };
-}
-
-function hideActionButton(position) {
-    hide("action-button" + position.toString())
 }
 
 function performAction(action) {

Public/game.js

@@ -242,4 +242,16 @@ function dealCards() {
     }
     performDealCardsRequest(token)
     .catch(showLoginWithError)
+}
+
+function playCard(card) {
+    const token = getSessionToken()
+    if (token == null) {
+        showBlankLogin()
+        return
+    }
+    performPlayCardRequest(token, card)
+    .catch(function(error) {
+        console.log(error)
+    })
 }

Public/schafkopf.html

@@ -33,18 +33,6 @@
         <div id="table-list">
         </div>
         <div id="table-players">
-            <div id="action-buttons">
-                <button id="action-button-spacer"></button>
-                <div class="action-button-container">
-                    <button id="action-button3" class="standard-button action-button"></button>
-                </div>
-                <div class="action-button-container">
-                    <button id="action-button2" class="standard-button action-button"></button>
-                </div>
-                <div class="action-button-container">
-                    <button id="action-button1" class="standard-button action-button"></button>
-                </div>
-            </div>
             <div id="table-player-card-top" class="table-card"></div>
             <div id="table-player-card-right" class="table-card"></div>
             <div id="table-player-card-bottom" class="table-card"></div>
@@ -66,6 +54,9 @@
                 <div id="table-player-state-left" class="player-connection-state">Offline</div>
             </div>
         </div>
+        <div id="action-bar-centering">
+            <div id="action-bar"></div>
+        </div>
         <div id="player-cards">
             <button id="player-card1" class="player-card" disabled></button>
             <button id="player-card2" class="player-card" disabled></button>

Public/style.css

@@ -272,11 +272,11 @@ body {
 
 #table-players {
     display: none;
-    margin-top: 20px;
+    margin-top: 10px;
     margin-left: auto;
     margin-right: auto;
     width: 649px;
-    height: 437px;
+    height: 409px;
     grid-template-columns: 200px 71px 36px 35px 36px 71px 200px;
     grid-template-rows: 111px 76px 35px 76px 111px;
     column-gap: 0px;
@@ -284,6 +284,20 @@ body {
     align-items: center;
 }
 
+#action-bar-centering {
+    margin-top: 10px;
+    text-align: center;
+    width: 100%;
+    height: 40px;
+}
+
+#action-bar {
+    height: 40px;
+    margin-left: auto;
+    margin-right: auto;
+    display: inline-block;
+}
+
 #action-buttons {
     grid-column: 7;
     grid-row: 4 / span 2;
@@ -293,8 +307,8 @@ body {
 
 .action-button {
     height: 100%;
-    width: 100%;
+    padding-left: 16px;
-    display: none;
+    padding-right: 16px;
 }
 
 .action-button-container {