Schafkopf-Server/Public/elements.js

/**
* 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
}