Schafkopf-Server/Public/game.js

// The web socket to connect to the server
var socket = null;
var tableId = "";

function closeSocketIfNeeded() {
    if (socket) {
        socket.close()
        didCloseSocket()
    }
}

function didLeaveTable() {
    tableId = ""
}

function didCloseSocket() {
    socket = null
}

function setTableId(table) {
    tableId = table
}

function showBlankLoginScreen(text) {
    closeSocketIfNeeded()
    didLeaveTable()
    clearLoginPassword()
    clearLoginName()
    deleteSessionToken()
    showLoginElements()
    setLoginError(text)
}

function showGame(tableId) {
    setTableId(tableId)
    const token = getSessionToken()
    if (token) {
        showGameElements()
        openSocket(token)
        // TODO: Show interface
        console.log("Show table " + tableId)
    } else {
        showBlankLoginScreen("")
    }
}

function registerUser() {
    const username = getLoginName()
    const password = getLoginPassword()
    if (username == "") {
        setLoginError("Please enter your desired user name")
        return
    }
    if (password == "") {
        setLoginError("Please enter a password")
        return
    }
    performRegisterPlayerRequest(username, password)
    .then(function(token) {
        setSessionToken(token)
        setPlayerName(username)
        showTableListElements()
        loadCurrentTable(token)
    }).catch(function(error) {
        setLoginError(error.message)
    })
}

function deletePlayerAccount() {
    const name = getPlayerName()
    const password = getLoginPassword()

    performDeletePlayerRequest(name, password, function(error) { 
        if (error == "") {
            showBlankLoginScreen("")
            console.log("Player deleted")
        } else {
            closeSocketIfNeeded()
            didLeaveTable()
            deleteSessionToken()
            alert(error)
            console.log(error)
        }
    })
}

function loginUser() {
    const username = getLoginName()
    const password = getLoginPassword()
    if (username == "") {
        setLoginError("Please enter your user name")
        return
    }
    if (password == "") {
        setLoginError("Please enter your password")
        return
    }
    performLoginPlayerRequest(username, password)
    .then(function(token) {
        setSessionToken(token)
        setPlayerName(username)
        showTableListElements()
        loadCurrentTable(token)
    }).catch(function(error) {
        setLoginError(error.message)
    })
}

function logoutUser() {
    const token = getSessionToken()
    if (token) {
        performLogoutRequest(token)
        .then(function() {
            showBlankLoginScreen("")
        }).catch(function(error) {
            showBlankLoginScreen(error.message)
            console.log(error)
        })
    } else {
        showBlankLoginScreen("")
    }
}

function loadExistingSession() {
    const token = getSessionToken()
    if (token) {
        resumeSessionRequest(token)
        .then(function(name) {
            setPlayerName(name)
            showTableListElements()
            loadCurrentTable(token)
        }).catch(function(error) {
            showBlankLoginScreen(error.message)
        })
    } else {
        showBlankLoginScreen("")
    }
}

function loadCurrentTable(token) {
    performGetCurrentTableRequest(token)
    .then(function(tableId) {
        if (tableId == "") {
            didLeaveTable()
            refreshTables()
            return
        }
        console.log("Loaded table " + tableId)
        showGame(tableId)
    }).catch(function(error) {
        showBlankLoginScreen(error.message)
    })
}

function createTable() {
    const tableName = getTableName()
    if (tableName == "") {
        return
    }
    const token = getSessionToken()
    if (token) {
        const isVisible = getTableVisibility()
        performCreateTableRequest(token, tableName, isVisible)
        .then(function(tableId) {
            clearTableName()
            showGame(tableId)
        }).catch(function(error) {
            showBlankLoginScreen(error.message)
        })
    } else {
        showBlankLoginScreen("")
    }
}

function joinTable(tableId) {
    const token = getSessionToken()
    if (token) {
        performJoinTableRequest(tableId, token)
        .then(function() {
            showGame(tableId)
        })
        .catch(function(error) {
            showBlankLoginScreen(error.message)
        })
    } else {
        showBlankLoginScreen("")
    }
}

function leaveTable() {
    const token = getSessionToken()
    if (token) {
        performLeaveTableRequest(token)
        .then(function() {
            showTableListElements()
            closeSocketIfNeeded()
            didLeaveTable()
            refreshTables()
        })
        .catch(function(error) {
            showBlankLoginScreen(error.message)
        })
    } else {
        showBlankLoginScreen("")
    }
}

function openSocket(token) {
    socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/session/start")

    socket.onopen = function(e) {
        socket.send(token);
        showConnectedState()
    };
    
    socket.onmessage = function(event) {
        // TODO: Handle server data
        //event.data
        handleServerUpdates(event.data)
    };
    
    socket.onclose = function(event) {
        if (event.wasClean) {

        } else {
            // e.g. server process killed or network down
            // event.code is usually 1006 in this case
            // TODO: Retry several times to open socket,
            // stop after too many failed attempts
        }
        didCloseSocket()
        showDisconnectedState()
    };
    
    socket.onerror = function(error) {
        // error.message
    };
}

function handleServerUpdates(data) {
    const info = JSON.parse(data.substring(1))
    if (data.startsWith("t")) {
        handleTableInfoUpdate(info)
    } else if (data.startsWith("c")) {
        handleCardInfoUpdate(info)
    } else {
        console.log("Unhandled update: " + data)
    }
}

function handleTableInfoUpdate(info) {
    for (let i = 0, len = info.players.length; i < len; i += 1) {
        const player = info.players[i]
        // TODO: Mark active player
        setTablePlayerInfo(i + 1, player.name, player.connected, false)
    }
    if (info.tableIsFull) {
        showDealButton()
    } else {
        hideDealButton()
    }
}

function handleCardInfoUpdate(info) {
    for (let i = 0, len = info.cards.length; i < len; i += 1) {
        setHandCard(i+1, info.cards[i].card, info.cards[i].playable)
    }
    for (let i = 0, len = info.tableCards.length; i < len; i += 1) {
        setTableCard(i+1, info.tableCards[i])
    }
}

function refreshTables() {
    const token = getSessionToken()
    if (token) {
        performGetPublicTablesRequest(token)
        .then(function(json) {
            const html = processTableList(json)
            setTableListContent(html)
        }).catch(function(error) {
            showBlankLoginScreen(error.message)
        })
    } else {
        showBlankLoginScreen()
    }
}

function processTableList(tables) {
    var html = ""
    for (let i = 0, len = tables.length; i < len; i++) {
        tableInfo = tables[i]
        html += "<div class=\"table-row\">"
        if (tableInfo.players.length < 4) {
            html += "<button class=\"table-join-btn\" onclick=\"joinTable('" + tableInfo.id + "')\">Join</button>"
        } else {
            html += "<button class=\"table-join-btn\" disabled>Full</button>"
        }
        html += "<div class=\"table-title\">" + tableInfo.name + "</div>"
        if (tableInfo.players.length == 0) {
            html += "<div class=\"table-subtitle\">No players</div>"
        } else {
            const names = tableInfo.players.map(function(player) { return player.name }).join(", ")
            html += "<div class=\"table-subtitle\">Players: " + names + "</div>"
        }
        html += "</div>" // table-row 
    }
    return html
}

function dealCards() {
    const token = getSessionToken()
    if (token) {
        performDealCardsRequest(token)
        .catch(function(error) {
            showBlankLoginScreen(error.message)
        })
    } else {
        showBlankLoginScreen()
    }
}