Client: Play cards, select game
This commit is contained in:
parent
20d1ce24da
commit
ca7fc858c2
@ -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);
|
||||
}
|
@ -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")
|
||||
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) {
|
||||
@ -258,23 +275,31 @@ function textForAction(action) {
|
||||
/// The player claims to win and doubles the game cost ("schießen")
|
||||
case "raise":
|
||||
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"
|
||||
}
|
||||
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) {
|
||||
const token = getSessionToken()
|
||||
if (token == null) {
|
||||
|
@ -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)
|
||||
})
|
||||
}
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user