Schafkopf-Server/Public/elements.js

/**
 * This file acts as an abstraction layer between HTML and JS.
 */

var playerName = ""

function setDisplayStyle(id, style) {
    document.getElementById(id).style.display = style
}

function showLoginElements() {
    setDisplayStyle("login-window", "table")
    setDisplayStyle("top-bar", "none")
    setDisplayStyle("table-list-bar", "none")
    setDisplayStyle("table-list", "none")
    setDisplayStyle("game-bar", "none")
    setDisplayStyle("table-players", "none")
    setDisplayStyle("player-cards", "none")
}

function showTableListElements() {
    setDisplayStyle("login-window", "none")
    setDisplayStyle("top-bar", "inherit")
    setDisplayStyle("table-list-bar", "grid")
    setDisplayStyle("table-list", "inherit")
    setDisplayStyle("game-bar", "none")
    setDisplayStyle("table-players", "none")
    setDisplayStyle("player-cards", "none")
}

function showGameElements() {
    setDisplayStyle("login-window", "none")
    setDisplayStyle("top-bar", "inherit")
    setDisplayStyle("table-list-bar", "none")
    setDisplayStyle("table-list", "none")
    setDisplayStyle("game-bar", "grid")
    setDisplayStyle("table-players", "grid")
    setDisplayStyle("player-cards", "grid")
}

function showConnectedState() {
    const label = document.getElementById("table-connected-label")
    label.innerHTML = "Connected"
    label.style.color = "var(--text-color)"
}

function showDisconnectedState() {
    const label = document.getElementById("table-connected-label")
    label.innerHTML = "Disconnected"
    label.style.color = "var(--alert-color)"
}

function showDealButton() {
    setDisplayStyle("deal-button", "inherit")
}

function hideDealButton() {
    setDisplayStyle("deal-button", "none")
}

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() {
    return localStorage.getItem('token')
}

function setSessionToken(token) {
    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(nr, name, connected, active) {
    const infoElement = "table-player-name" + nr.toString()
    const connectionElement = "table-player-state" + nr
    const nameElement = document.getElementById(infoElement)
    if (name == "") {
        nameElement.innerHTML = "Empty"
        nameElement.style.color = "var(--secondary-text-color)"
        setDisplayStyle(connectionElement, "none")
        return
    }
    nameElement.innerHTML = name
    nameElement.style.color = active ?  "var(--button-color)" : "var(--text-color)"
    if (connected) {
        setDisplayStyle(connectionElement, "none")
    } else {
        setDisplayStyle(connectionElement, "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 = true
}

function setCard(id, card) {
    if (card == "") {
        document.getElementById(id).style.backgroundColor = "var(--element-background)"
    } else {
        document.getElementById(id).style.backgroundImage = "url('/cards/" + card + ".jpeg')"
    }
}