ch/Schafkopf-Server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Client: Play cards, select game

Browse Source
This commit is contained in:
Christoph Hagen 2021-12-06 18:27:52 +01:00
parent 20d1ce24da
commit ca7fc858c2
5 changed files with 108 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Public/api.js
View File

@ -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);
}

109
Public/elements.js
View File

@ -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 += "<button class=\"standard-button action-button\" " +
"onclick=\"performAction('" + action + "')\">" + content + "</button>"
}
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"
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)
};
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 hideActionButton(position) {
hide("action-button" + position.toString())
return action
}
function performAction(action) {

12
Public/game.js
View File

@ -243,3 +243,15 @@ 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)
})
}

15
Public/schafkopf.html
View File

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

22
Public/style.css
View File

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