From ca7fc858c22de8bb6f29e4b8dde93f68a621ecd6 Mon Sep 17 00:00:00 2001 From: Christoph Hagen Date: Mon, 6 Dec 2021 18:27:52 +0100 Subject: [PATCH] Client: Play cards, select game --- Public/api.js | 7 +++ Public/elements.js | 111 ++++++++++++++++++++++++++---------------- Public/game.js | 12 +++++ Public/schafkopf.html | 15 ++---- Public/style.css | 22 +++++++-- 5 files changed, 108 insertions(+), 59 deletions(-) diff --git a/Public/api.js b/Public/api.js index 1aea014..eb25f74 100644 --- a/Public/api.js +++ b/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); } \ No newline at end of file diff --git a/Public/elements.js b/Public/elements.js index 29b8d98..93733a1 100644 --- a/Public/elements.js +++ b/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) { - const id = "table-player-card" + index.toString() - setCard(id, card) +function setTableCard(position, card, layer) { + const id = "table-player-card-" + position + setCard(id, card, layer) } function setHandCard(index, card, playable) { const id = "player-card" + index.toString() - setCard(id, card) - document.getElementById(id).disabled = !playable + setCard(id, card, 1) + 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) - } - for (let i = len; i < 3; i += 1) { - hideActionButton(i+1) + const content = textForAction(action) + html += "" } + 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 action + return "Schießen" + + 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" } - -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()) +return action } function performAction(action) { diff --git a/Public/game.js b/Public/game.js index 9ed835b..68e6179 100644 --- a/Public/game.js +++ b/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) + }) } \ No newline at end of file diff --git a/Public/schafkopf.html b/Public/schafkopf.html index dcd07d5..c97b7ff 100644 --- a/Public/schafkopf.html +++ b/Public/schafkopf.html @@ -33,18 +33,6 @@
-
- -
- -
-
- -
-
- -
-
@@ -66,6 +54,9 @@
Offline
+
+
+
diff --git a/Public/style.css b/Public/style.css index 564be98..752e26e 100644 --- a/Public/style.css +++ b/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%; - display: none; + padding-left: 16px; + padding-right: 16px; } .action-button-container {