Schafkopf-Server/Public/elements.js

422 lines
12 KiB
JavaScript
Raw Normal View History

2021-11-28 23:59:24 +01:00
/**
2021-12-03 18:03:29 +01:00
* This file acts as an abstraction layer between HTML and JS.
*/
2021-11-28 23:59:24 +01:00
2021-12-01 22:50:42 +01:00
var playerName = ""
2021-12-03 18:03:29 +01:00
var debugSessionToken = null
const debugMode = true // Does not load session token, to allow multiple players per browser
2021-11-28 23:59:24 +01:00
2021-12-18 15:08:43 +01:00
const offlineText = "Offline"
const missingPlayerText = "Leer"
2021-12-21 09:40:40 +01:00
const elementIdUserName = "user-name"
const elementIdUserPssword = "user-pwd"
const elementIdPlayerCards = "player-cards"
const elementIdLoginWindow = "login-window"
const elementIdTopBar = "top-bar"
const elementIdTableListBar = "table-list-bar"
const elementIdTableList = "table-list"
const elementIdGameBar = "game-bar"
const elementIdTablePlayers = "table-players"
const elementIdTableName = "table-name-label"
const elementIdPlayerName = "player-name"
const elementIdLoginError = "login-error"
const elementIdTableNameField = "table-name-field"
const elementIdPublicTableCheckbox = "table-public-checkbox"
const elementIdActionBar = "action-bar"
const elementIdAvailableGamesList = "available-games-list"
2021-12-21 11:16:54 +01:00
const elementIdGameSummary = "game-summary"
2021-12-21 09:40:40 +01:00
const localStorageTokenId = "token"
2021-12-07 09:10:28 +01:00
function showDebugLogins() {
document.getElementById("login-window-inner").innerHTML +=
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('a')\">Player A</button>" +
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('b')\">Player B</button>" +
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('c')\">Player C</button>" +
"<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('d')\">Player D</button>"
}
function loginDebugUser(name) {
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdUserName).value = name
document.getElementById(elementIdUserPssword).value = name
2021-12-07 09:10:28 +01:00
loginUser()
}
2021-12-01 22:50:42 +01:00
function setDisplayStyle(id, style) {
document.getElementById(id).style.display = style
2021-11-28 23:59:24 +01:00
}
2021-12-03 18:03:29 +01:00
function hide(elementId) {
setDisplayStyle(elementId, "none")
}
2021-12-01 22:50:42 +01:00
function showLoginElements() {
2021-12-21 09:40:40 +01:00
setDisplayStyle(elementIdLoginWindow, "table")
hide(elementIdTopBar)
hide(elementIdTableListBar)
hide(elementIdTableList)
hide(elementIdGameBar)
hide(elementIdTablePlayers)
hide(elementIdPlayerCards)
2021-12-22 22:09:17 +01:00
hide(elementIdActionBar)
2021-11-29 11:06:20 +01:00
}
function showTableListElements() {
2021-12-21 09:40:40 +01:00
hide(elementIdLoginWindow)
setDisplayStyle(elementIdTopBar, "inherit")
setDisplayStyle(elementIdTableListBar, "grid")
setDisplayStyle(elementIdTableList, "inherit")
hide(elementIdGameBar)
hide(elementIdTablePlayers)
hide(elementIdPlayerCards)
2021-12-22 22:09:17 +01:00
hide(elementIdActionBar)
2021-11-29 11:06:20 +01:00
}
2021-11-30 20:55:25 +01:00
function showGameElements() {
2021-12-21 09:40:40 +01:00
hide(elementIdLoginWindow)
setDisplayStyle(elementIdTopBar, "inherit")
hide(elementIdTableListBar)
hide(elementIdTableList)
setDisplayStyle(elementIdGameBar, "grid")
setDisplayStyle(elementIdTablePlayers, "grid")
setDisplayStyle(elementIdPlayerCards, "grid")
2021-12-22 22:09:17 +01:00
setDisplayStyle(elementIdActionBar, "inline-block")
2021-11-30 20:55:25 +01:00
}
2021-12-03 18:03:29 +01:00
function showTableName(name) {
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdTableName).innerHTML = name
2021-12-03 18:03:29 +01:00
}
2021-12-01 22:50:42 +01:00
function showConnectedState() {
2021-12-18 15:08:43 +01:00
showPlayerState("bottom", "")
2021-11-30 20:55:25 +01:00
}
2021-12-01 22:50:42 +01:00
function showDisconnectedState() {
2021-12-18 15:08:43 +01:00
showPlayerDisconnected("bottom")
2021-12-01 22:50:42 +01:00
}
function setPlayerName(name) {
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdPlayerName).innerHTML = name
2021-12-01 22:50:42 +01:00
playerName = name
2021-11-28 23:59:24 +01:00
}
function getLoginName() {
2021-12-21 09:40:40 +01:00
return document.getElementById(elementIdUserName).value
2021-11-28 23:59:24 +01:00
}
function clearLoginName() {
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdUserName).value = ""
2021-11-28 23:59:24 +01:00
}
function getLoginPassword() {
2021-12-21 09:40:40 +01:00
return document.getElementById(elementIdUserPssword).value
2021-11-28 23:59:24 +01:00
}
function clearLoginPassword() {
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdUserPssword).value = ""
2021-11-28 23:59:24 +01:00
}
function getSessionToken() {
2021-12-03 18:03:29 +01:00
if (debugMode) {
return debugSessionToken
}
2021-12-21 09:40:40 +01:00
return localStorage.getItem(localStorageTokenId)
2021-11-28 23:59:24 +01:00
}
function setSessionToken(token) {
2021-12-03 18:03:29 +01:00
if (debugMode) {
debugSessionToken = token
return
}
2021-12-21 09:40:40 +01:00
localStorage.setItem(localStorageTokenId, token)
2021-11-28 23:59:24 +01:00
}
function deleteSessionToken() {
2021-12-21 09:40:40 +01:00
localStorage.removeItem(localStorageTokenId)
2021-11-28 23:59:24 +01:00
}
function setLoginError(text) {
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdLoginError).innerHTML = text
2021-11-28 23:59:24 +01:00
}
function getTableName() {
2021-12-21 09:40:40 +01:00
return document.getElementById(elementIdTableNameField).value
2021-11-28 23:59:24 +01:00
}
function clearTableName() {
2021-12-21 09:40:40 +01:00
return document.getElementById(elementIdTableNameField).value = ""
2021-11-28 23:59:24 +01:00
}
function getTableVisibility() {
2021-12-21 09:40:40 +01:00
return document.getElementById(elementIdPublicTableCheckbox).checked
2021-11-28 23:59:24 +01:00
}
function setTableListContent(content) {
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdTableList).innerHTML = content
2021-11-28 23:59:24 +01:00
}
2021-12-01 22:50:42 +01:00
2021-12-03 18:03:29 +01:00
function setEmptyPlayerInfo(position) {
2021-12-18 15:08:43 +01:00
setTablePlayerName(position, null, false)
showPlayerState(position, "")
setTableCard(position, "", 1)
2021-12-03 18:03:29 +01:00
}
2021-12-18 15:08:43 +01:00
function setTablePlayerName(position, name, active) {
2021-12-03 18:03:29 +01:00
const nameElement = document.getElementById("table-player-name-" + position)
2021-12-18 15:08:43 +01:00
if (name == null) {
nameElement.style.color = "var(--secondary-text-color)"
nameElement.innerHTML = missingPlayerText
} else {
nameElement.style.color = active ? "var(--button-color)" : "var(--text-color)"
nameElement.innerHTML = name
}
2021-12-03 18:03:29 +01:00
}
2021-12-18 15:08:43 +01:00
function showPlayerDisconnected(position) {
setPlayerState(position, "var(--alert-color)", offlineText)
}
function showPlayerState(position, state) {
setPlayerState(position, "var(--secondary-text-color)", state)
}
function setPlayerState(position, color, text) {
2021-12-03 18:03:29 +01:00
const connectionElement = "table-player-state-" + position
2021-12-18 15:08:43 +01:00
const element = document.getElementById(connectionElement)
element.style.color = color
element.innerHTML = text
2021-12-01 22:50:42 +01:00
}
2021-12-06 18:27:52 +01:00
function setTableCard(position, card, layer) {
const id = "table-player-card-" + position
setCard(id, card, layer)
2021-12-01 22:50:42 +01:00
}
function setHandCard(index, card, playable) {
const id = "player-card" + index.toString()
2021-12-06 18:27:52 +01:00
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() { }
}
2021-12-01 22:50:42 +01:00
}
2021-12-06 18:27:52 +01:00
function setCard(id, card, layer) {
const element = document.getElementById(id)
2021-12-01 22:50:42 +01:00
if (card == "") {
2021-12-06 18:27:52 +01:00
element.style.backgroundColor = "var(--element-background)"
element.style.backgroundImage = ""
element.style.zIndex = 0
2021-12-01 22:50:42 +01:00
} else {
2021-12-06 18:27:52 +01:00
element.style.backgroundColor = ""
element.style.backgroundImage = "url('/cards/" + card + ".jpeg')"
element.style.zIndex = layer + 1
2021-12-01 22:50:42 +01:00
}
2021-12-03 18:03:29 +01:00
}
function updateTableInfo(table) {
showTableName(table.name)
// Set own cards
2021-12-09 11:11:42 +01:00
const cardCount = table.cards.length
2021-12-03 18:03:29 +01:00
for (let i = 0; i < cardCount; i += 1) {
2021-12-09 11:11:42 +01:00
const card = table.cards[i]
2021-12-03 18:03:29 +01:00
setHandCard(i+1, card.card, card.playable)
}
for (let i = cardCount; i < 8; i += 1) {
setHandCard(i+1, "", false)
}
2021-12-18 15:08:43 +01:00
let playedGame = null
if (table.hasOwnProperty("game")) {
playedGame = textForAction(table.game)
}
2021-12-03 18:03:29 +01:00
// Show player info
console.log(table)
2021-12-18 15:08:43 +01:00
setInfoForPlayer(table.player, "bottom", playedGame)
2021-12-09 11:11:42 +01:00
if (table.playerSelectsGame) {
2021-12-06 18:27:52 +01:00
setActionsForOwnPlayer(table.playableGames)
2021-12-07 09:10:28 +01:00
showAvailableGames([])
2021-12-06 18:27:52 +01:00
} else {
2021-12-07 09:10:28 +01:00
if (table.player.active) {
showAvailableGames(table.playableGames)
} else {
showAvailableGames([])
}
2021-12-09 11:11:42 +01:00
setActionsForOwnPlayer(table.actions)
2021-12-06 18:27:52 +01:00
}
2021-12-03 18:03:29 +01:00
if (table.hasOwnProperty("playerLeft")) {
2021-12-18 15:08:43 +01:00
setInfoForPlayer(table.playerLeft, "left", playedGame)
2021-12-03 18:03:29 +01:00
} else {
setEmptyPlayerInfo("left")
}
if (table.hasOwnProperty("playerAcross")) {
2021-12-18 15:08:43 +01:00
setInfoForPlayer(table.playerAcross, "top", playedGame)
2021-12-03 18:03:29 +01:00
} else {
setEmptyPlayerInfo("top")
}
if (table.hasOwnProperty("playerRight")) {
2021-12-18 15:08:43 +01:00
setInfoForPlayer(table.playerRight, "right", playedGame)
2021-12-03 18:03:29 +01:00
} else {
setEmptyPlayerInfo("right")
}
2021-12-21 11:16:54 +01:00
if (table.hasOwnProperty("summary")) {
setGameSummary(table.summary)
} else {
hideGameSummary()
}
}
function setGameSummary(summary) {
document.getElementById(elementIdGameSummary).innerHTML = summary.text
setDisplayStyle(elementIdGameSummary, "inherit")
}
function hideGameSummary() {
hide(elementIdGameSummary)
2021-12-03 18:03:29 +01:00
}
2021-12-18 15:08:43 +01:00
function setInfoForPlayer(player, position, game) {
2021-12-06 18:27:52 +01:00
var card = ""
2021-12-18 15:08:43 +01:00
if (player.hasOwnProperty("card")) {
card = player.card
2021-12-06 18:27:52 +01:00
}
2021-12-18 15:08:43 +01:00
const leadsGame = player.leads
2021-12-06 18:27:52 +01:00
const layer = player.position
2021-12-18 15:08:43 +01:00
setTableCard(position, card, layer)
setTablePlayerName(position, player.name, player.active)
if (!player.connected) {
showPlayerDisconnected(position)
return
}
var state = []
if (game != null && leadsGame) {
state.push(game)
}
const double = doubleText(player.doubles)
if (double) {
state.push(double)
}
const text = state.join(", ")
showPlayerState(position, text)
}
function doubleText(doubles) {
if (doubles == 0) {
return null
}
if (doubles == 1) {
return "gedoppelt"
}
return doubles.toString() + "x gedoppelt"
2021-12-03 18:03:29 +01:00
}
function clearInfoForPlayer(position) {
setEmptyPlayerInfo(position)
}
function setActionsForOwnPlayer(actions) {
2021-12-06 18:27:52 +01:00
var len = actions.length
var html = ""
2021-12-03 18:03:29 +01:00
for (let i = 0; i < len; i += 1) {
const action = actions[i]
2021-12-06 18:27:52 +01:00
const content = textForAction(action)
html += "<button class=\"standard-button action-button\" " +
"onclick=\"performAction('" + action + "')\">" + content + "</button>"
2021-12-03 18:03:29 +01:00
}
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdActionBar).innerHTML = html
2021-12-03 18:03:29 +01:00
}
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":
2021-12-06 18:27:52 +01:00
return "Schießen"
2021-12-18 15:08:43 +01:00
case "ruf":
return "Ruf"
2021-12-06 18:27:52 +01:00
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"
2021-12-18 15:08:43 +01:00
case "solo":
return "Solo"
2021-12-06 18:27:52 +01:00
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
2021-12-03 18:03:29 +01:00
}
function performAction(action) {
const token = getSessionToken()
if (token == null) {
showBlankLogin()
return
}
performPlayerActionRequest(token, action)
// TODO: Handle errors and success
2021-12-07 09:10:28 +01:00
}
function showAvailableGames(games) {
var len = games.length
var html = ""
for (let i = 0; i < len; i += 1) {
const game = games[i]
const content = textForAction(game)
html += "<div class=\"standard-button available-game\">" + content + "</div>"
}
2021-12-21 09:40:40 +01:00
document.getElementById(elementIdAvailableGamesList).innerHTML = html
2021-12-01 22:50:42 +01:00
}