Schafkopf-Server/Public/game.js

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

function closeSocketIfNeeded() {
    if (socket) {
        socket.close()
        socket = null
    }
}

function hideLoginWindow() {
    document.getElementById("signup-window").style.display = "none"
}

function showLoginWindow() {
    document.getElementById("signup-window").style.display = "table"
}

function setPlayerName(name) {
    document.getElementById("player-name").innerHTML = name
}

function getPlayerName() {
    return document.getElementById("player-name").innerHTML
}

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 showBlankLoginScreen(text) {
    closeSocketIfNeeded()
    clearLoginPassword()
    clearLoginName()
    deleteSessionToken()
    showLoginWindow()
    setLoginError(text)
}

async function registerUser() {
    console.log("Registration started")
    performGetSessionTokenRequest("register")
}

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

    fetch("/player/delete/" + username, { method: 'POST',  body: password })
    .then(function(response) {
        if (response.status == 200) { // Success
            return
        }
        if (response.status == 400) { // Bad request
            throw Error("The request had an error")
        }
        if (response.status == 401) { // Invalid session token
            throw Error("Please log in again")
        }
        if (response.status == 403) { // Forbidden
            throw Error("The password or name is incorrect")
        }
        if (response.status == 424) { // Failed dependency
            throw Error("The request couldn't be completed")
        }
        throw Error("Unexpected registration response: " + response.statusText)
    }).then(function() {
        showBlankLoginScreen("")
        console.log("Player deleted")
    }).catch(function(error) {
        closeSocketIfNeeded()
        deleteSessionToken()
        alert(error.message)
        console.log(error)
    })
}

async function loginUser() {
    console.log("Login started");
    performGetSessionTokenRequest("login")
}

async function logoutUser() {
    const token = getSessionToken()
    if (token) {
        console.log("Logging out player")
        performLogoutRequest(token)
    } else {
        console.log("No player to log out")
        showBlankLoginScreen("")
    }
}

async function performLogoutRequest(token) {
    fetch("/player/logout", { method: 'POST',  body: token })
    .then(function(response) {
        if (response.status == 200) { // Success
            return
        }
        if (response.status == 400) { // Bad request
            throw Error("The request had an error")
        }
        throw Error("Unexpected logout response: " + response.statusText)
    }).then(function() {
        showBlankLoginScreen("")
        console.log("Player logged out")
    }).catch(function(error) {
        showBlankLoginScreen(error.message)
        console.log(error)
    })
}

function convertServerResponse(response) {
    if (response.status == 200) { // Success
        return response.text()
    }
    if (response.status == 400) { // Bad request
        throw Error("The request was malformed")
    }
    if (response.status == 403) { // Forbidden
        throw Error("Invalid username or password")
    }
    if (response.status == 406) { // notAcceptable
        throw Error("The password or name is too long")
    }
    if (response.status == 409) { // Conflict
        throw Error("A user with the same name is already registered")
    }
    if (response.status == 424) { // Failed dependency
        throw Error("The request couldn't be completed")
    }
    throw Error("Unexpected response: " + response.statusText)
}

async function performGetSessionTokenRequest(type) {
    const username = getLoginName()
    const password = getLoginPassword()

    console.log("Performing request " + type);
    fetch("/player/" + type + "/" + username, { method: 'POST',  body: password })
    .then(convertServerResponse)
    .then(function(token) {
        setSessionToken(token)
        setPlayerName(username)
        hideLoginWindow()
        setLoginError("")
        console.log(type + " successful")
        performGetPublicTablesList(token)
        openSocket(token)
    }).catch(function(error) {
        setLoginError(error.message)
        console.log(error)
        return
    })
}

async function loadExistingSession() {
    const token = getSessionToken()
    if (token) {
        console.log("Resuming session with token " + token)
        resumeSession(token)
    } else {
        console.log("No session to resume")
        showLoginWindow()
    }
}

async function resumeSession(token) {
    fetch("/player/resume", { method: 'POST',  body: token })
    .then(convertServerResponse)
    .then(function(name) {
        setPlayerName(name)
        hideLoginWindow()
        console.log("Session resumed")
        performGetPublicTablesList(token)
        openSocket(token)
    }).catch(function(error) {
        deleteSessionToken()
        setLoginError(error.message)
        showLoginWindow()
        console.log(error)
        return
    })
}

async 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
    };
    
    socket.onclose = function(event) {
        if (event.wasClean) {
            
        } else {
            // e.g. server process killed or network down
            // event.code is usually 1006 in this case
        }
    };
    
    socket.onerror = function(error) {
        // error.message
    };
}

function createTable() {
    const tableName = getTableName()
    const isVisible = getTableVisibility()
    const token = getSessionToken()
    if (token) {
        performCreateTableRequest(token, tableName, isVisible)
    }
}

async function performCreateTableRequest(token, name, visibility) {
    const vis = visibility ? "public" : "private";
    fetch("/table/create/" + vis + "/" + name, { method: 'POST',  body: token })
    .then(function(response) {
        if (response.status == 200) { // Success
            return response.text()
        }
        if (response.status == 400) { // Bad request
            throw Error("The request had an error")
        }
        if (response.status == 401) { // Token invalid
            showBlankLoginScreen("")
            return ""
        }
        throw Error("Unexpected registration response: " + response.statusText)
    })
    .then(function(tableId) {
        if (tableId == "") {
            return;
        }
        clearTableName()
        console.log("Created table " + tableId)
    }).catch(function(error) {
        showBlankLoginScreen(error.message)
        console.log(error)
        return
    })
}

function refreshTables() {
    const token = getSessionToken()
    if (token) {
        performGetPublicTablesList(token)
    } else {
        showBlankLoginScreen()
    }
}

async function performGetPublicTablesList(token) {
    fetch("/tables/public", { method: 'POST',  body: token })
    .then(convertServerResponse)
    .then(function(text) {
        const decoded = atob(text)
        const json = JSON.parse(decoded);
        const html = processTableList(json)
        setTableListContent(html)
    }).catch(function(error) {
        showBlankLoginScreen(error.message)
        console.log(error)
        return
    })
}

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

function joinTable(tableId) {
    const token = getSessionToken()
    if (token) {
        performJoinTableRequest(tableId, token)
    } else {
        showBlankLoginScreen()
    }
}

async function performJoinTableRequest(tableId, token) {
    
}