342 lines
9.3 KiB
JavaScript
342 lines
9.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 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) {
|
|
document.getElementById("user-name").value = name
|
|
document.getElementById("user-pwd").value = name
|
|
loginUser()
|
|
}
|
|
|
|
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, card, layer) {
|
|
nameColor = active ? "var(--button-color)" : "var(--text-color)"
|
|
setTablePlayerElements(position, name, nameColor, connected, card, layer)
|
|
}
|
|
|
|
function setEmptyPlayerInfo(position) {
|
|
setTablePlayerElements(position, "Empty", "var(--secondary-text-color)", true, "", 1)
|
|
}
|
|
|
|
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) {
|
|
const connectionElement = "table-player-state-" + position
|
|
setDisplayStyle(connectionElement, connected ? "none" : "inherit")
|
|
}
|
|
|
|
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, 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, layer) {
|
|
const element = document.getElementById(id)
|
|
if (card == "") {
|
|
element.style.backgroundColor = "var(--element-background)"
|
|
element.style.backgroundImage = ""
|
|
element.style.zIndex = 0
|
|
|
|
} else {
|
|
element.style.backgroundColor = ""
|
|
element.style.backgroundImage = "url('/cards/" + card + ".jpeg')"
|
|
element.style.zIndex = layer + 1
|
|
}
|
|
}
|
|
|
|
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")
|
|
if (table.player.selectsGame) {
|
|
setActionsForOwnPlayer(table.playableGames)
|
|
showAvailableGames([])
|
|
} else {
|
|
if (table.player.active) {
|
|
showAvailableGames(table.playableGames)
|
|
} else {
|
|
showAvailableGames([])
|
|
}
|
|
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")
|
|
}
|
|
}
|
|
|
|
function setInfoForPlayer(player, position) {
|
|
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) {
|
|
setEmptyPlayerInfo(position)
|
|
}
|
|
|
|
function setActionsForOwnPlayer(actions) {
|
|
var len = actions.length
|
|
var html = ""
|
|
for (let i = 0; i < len; i += 1) {
|
|
const action = actions[i]
|
|
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) {
|
|
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"
|
|
|
|
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 performAction(action) {
|
|
const token = getSessionToken()
|
|
if (token == null) {
|
|
showBlankLogin()
|
|
return
|
|
}
|
|
performPlayerActionRequest(token, action)
|
|
// TODO: Handle errors and success
|
|
}
|
|
|
|
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>"
|
|
}
|
|
document.getElementById("available-games-list").innerHTML = html
|
|
} |