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 didCloseSocket() {
    socket = null
    tableId = ""
}

function setTableId(table) {
    tableId = table
}

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

function showTableList() {
    showTableListElements()
    hideLoginWindow()
}

function showGame(tableId) {
    setTableId(tableId)
    const token = getSessionToken()
    if (token) {
        openSocket(token)
        hideTableListElements()
        showGameElements()
        // 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)
        showTableList()
        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()
            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)
        showTableList()
        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)
            showTableList()
            loadCurrentTable(token)
        }).catch(function(error) {
            showBlankLoginScreen(error.message)
        })
    } else {
        showBlankLoginScreen("")
    }
}

function loadCurrentTable(token) {
    performGetCurrentTableRequest(token)
    .then(function(tableId) {
        if (tableId == "") {
            refreshTables()
            return
        }
        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() {
            showTableList()
            hideGameElements()
        })
        .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);
    };
    
    socket.onmessage = function(event) {
        // TODO: Handle server data
        //event.data
    };
    
    socket.onclose = function(event) {
        if (event.wasClean) {
            didCloseSocket()
        } 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
        }
    };
    
    socket.onerror = function(error) {
        // error.message
    };
}

function refreshTables() {
    const token = getSessionToken()
    if (token) {
        performGetPublicTablesRequest(token)
        .then(function(json) {
            const html = processTableList(json)
            setTableListContent(html)
        }).catch(function(error) {
            showBlankLoginScreen(error.message)
            return
        })
    } 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>"
        html += "<div class=\"table-subtitle\">Players: " + tableInfo.players.join(", ") + "</div>"
        html += "</div>" // table-row 
    }
    return html
}