Schafkopf-Server/Public/elements.js
Christoph Hagen 3db9652cad Sync push
2021-12-03 18:03:29 +01:00

286 lines
7.3 KiB
JavaScript

/**
* This file acts as an abstraction layer between HTML and JS.
*/
var playerName = ""
var debugSessionToken = null
const debugMode = true // Does not load session token, to allow multiple players per browser
function setDisplayStyle(id, style) {
document.getElementById(id).style.display = style
}
function hide(elementId) {
setDisplayStyle(elementId, "none")
}
function showLoginElements() {
setDisplayStyle("login-window", "table")
hide("top-bar")
hide("table-list-bar")
hide("table-list")
hide("game-bar")
hide("table-players")
hide("player-cards")
}
function showTableListElements() {
hide("login-window")
setDisplayStyle("top-bar", "inherit")
setDisplayStyle("table-list-bar", "grid")
setDisplayStyle("table-list", "inherit")
hide("game-bar")
hide("table-players")
hide("player-cards")
}
function showGameElements() {
hide("login-window")
setDisplayStyle("top-bar", "inherit")
hide("table-list-bar")
hide("table-list")
setDisplayStyle("game-bar", "grid")
setDisplayStyle("table-players", "grid")
setDisplayStyle("player-cards", "grid")
}
function showTableName(name) {
document.getElementById("table-connected-label").innerHTML = name
}
function showConnectedState() {
showConnectionState("bottom", true)
}
function showDisconnectedState() {
showConnectionState("bottom", false)
}
function showDealButton() {
setDisplayStyle("deal-button", "inherit")
}
function hideDealButton() {
hide("deal-button")
}
function setPlayerName(name) {
document.getElementById("player-name").innerHTML = name
playerName = name
}
function getLoginName() {
return document.getElementById("user-name").value
}
function clearLoginName() {
document.getElementById("user-name").value = ""
}
function getLoginPassword() {
return document.getElementById("user-pwd").value
}
function clearLoginPassword() {
document.getElementById("user-pwd").value = ""
}
function getSessionToken() {
if (debugMode) {
return debugSessionToken
}
return localStorage.getItem('token')
}
function setSessionToken(token) {
if (debugMode) {
debugSessionToken = token
return
}
localStorage.setItem('token', token)
}
function deleteSessionToken() {
localStorage.removeItem('token')
}
function setLoginError(text) {
document.getElementById("login-error").innerHTML = text
}
function getTableName() {
return document.getElementById("table-name-field").value
}
function clearTableName() {
return document.getElementById("table-name-field").value = ""
}
function getTableVisibility() {
return document.getElementById("table-public-checkbox").checked
}
function setTableListContent(content) {
document.getElementById("table-list").innerHTML = content
}
function setTablePlayerInfo(position, name, connected, active) {
nameColor = active ? "var(--button-color)" : "var(--text-color)"
setTablePlayerElements(position, name, nameColor, connected)
}
function setEmptyPlayerInfo(position) {
setTablePlayerElements(position, "Empty", "var(--secondary-text-color)", true)
}
function setTablePlayerElements(position, name, nameColor, connected) {
const nameElement = document.getElementById("table-player-name-" + position)
nameElement.style.color = nameColor
nameElement.innerHTML = name
showConnectionState(position, connected)
}
function showConnectionState(position, connected) {
const connectionElement = "table-player-state-" + position
setDisplayStyle(connectionElement, connected ? "none" : "inherit")
}
function setTableCard(index, card) {
const id = "table-player-card" + index.toString()
setCard(id, card)
}
function setHandCard(index, card, playable) {
const id = "player-card" + index.toString()
setCard(id, card)
document.getElementById(id).disabled = !playable
}
function setCard(id, card) {
if (card == "") {
document.getElementById(id).style.backgroundColor = "var(--element-background)"
} else {
document.getElementById(id).style.backgroundImage = "url('/cards/" + card + ".jpeg')"
}
}
function updateTableInfo(table) {
showTableName(table.name)
// Set own cards
const cardCount = table.player.cards.length
for (let i = 0; i < cardCount; i += 1) {
const card = table.player.cards[i]
setHandCard(i+1, card.card, card.playable)
}
for (let i = cardCount; i < 8; i += 1) {
setHandCard(i+1, "", false)
}
// Show player info
console.log(table)
setInfoForPlayer(table.player, "bottom")
setActionsForOwnPlayer(table.player.actions)
if (table.hasOwnProperty("playerLeft")) {
setInfoForPlayer(table.playerLeft, "left")
} else {
setEmptyPlayerInfo("left")
}
if (table.hasOwnProperty("playerAcross")) {
setInfoForPlayer(table.playerAcross, "top")
} else {
setEmptyPlayerInfo("top")
}
if (table.hasOwnProperty("playerRight")) {
setInfoForPlayer(table.playerRight, "right")
} 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)
}
function clearInfoForPlayer(position) {
setEmptyPlayerInfo(position)
}
function setActionsForOwnPlayer(actions) {
const len = actions.length
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)
}
}
function textForAction(action) {
switch (action) {
/// The player can request cards to be dealt
case "deal":
return "Austeilen"
/// The player doubles on the initial four cards
case "double":
return "Legen"
/// The player does not double on the initial four cards
case "skip":
return "Nicht legen"
/// The player offers a wedding (one trump card)
case "wedding":
return "Hochzeit anbieten"
/// The player can choose to accept the wedding
case "accept":
return "Hochzeit akzeptieren"
/// The player matches or increases the game during auction
case "bid":
return "Spielen"
/// The player does not want to play
case "out":
return "Weg"
/// The player claims to win and doubles the game cost ("schießen")
case "raise":
return "Schießen"
}
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) {
showBlankLogin()
return
}
performPlayerActionRequest(token, action)
// TODO: Handle errors and success
}