Clean up client API

Public/api.js

@@ -0,0 +1,81 @@
+/**
+* This file acts as an abstraction layer to the server.
+*/
+
+async function performRegisterPlayerRequest(name, password){
+    return fetch("/player/register/" + name, { method: 'POST',  body: password })
+    .then(convertServerResponse)
+}
+
+async function performDeletePlayerRequest(name, password){
+    return fetch("/player/delete/" + name, { method: 'POST',  body: password })
+    .then(convertServerResponse)
+    .then(function(value) {})
+}
+
+async function performLoginPlayerRequest(name, password) {
+    return fetch("/player/login/" + name, { method: 'POST',  body: password })
+    .then(convertServerResponse)
+}
+
+async function performLogoutRequest(token) {
+    return fetch("/player/logout", { method: 'POST',  body: token })
+    .then(convertServerResponse)
+    .then(function(value) {})
+}
+
+async function resumeSessionRequest(token) {
+    return fetch("/player/resume", { method: 'POST',  body: token })
+    .then(convertServerResponse)
+}
+
+async function performGetCurrentTableRequest(token) {
+    return fetch("player/table", { method: 'POST',  body: token })
+    .then(convertServerResponse)
+}
+
+async function performCreateTableRequest(token, name, visibility) {
+    const vis = visibility ? "public" : "private";
+    return fetch("/table/create/" + vis + "/" + name, { method: 'POST',  body: token })
+    .then(convertServerResponse)
+}
+
+async function performJoinTableRequest(tableId, token) {
+    return fetch("/table/join/" + tableId, { method: 'POST',  body: token })
+    .then(convertServerResponse)
+    .then(function(value) {})
+}
+
+async function performGetPublicTablesRequest(token) {
+    return fetch("/tables/public", { method: 'POST',  body: token })
+    .then(convertServerResponse)
+    .then(function(text) {
+        const decoded = atob(text)
+        return JSON.parse(decoded);
+    })
+}
+
+function convertServerResponse(response) {
+    switch (response.status) {
+        case 200: // Success
+        return response.text()
+        case 400: // Bad request
+        throw Error("The request was malformed")
+        case 401: // Unauthorized (Invalid session token)
+        throw Error("Please log in again")
+        case 403: // Forbidden
+        throw Error("Invalid username or password")
+        case 410: // Gone
+        throw Error("The table could not be found")
+        case 406: // notAcceptable
+        throw Error("The password or name is too long")
+        case 409: // Conflict
+        throw Error("A user with the same name is already registered")
+        case 417: // Expectation failed
+        throw Error("The table is already full and can't be joined")
+        case 424: // Failed dependency
+        throw Error("The request couldn't be completed")
+        default: 
+        throw Error("Unexpected response: " + response.statusText)
+    }
+}

Public/elements.js

@@ -0,0 +1,67 @@
+/**
+ * This file acts as an abstraction layer between HTML and JS.
+ */
+
+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
+}

Public/game.js

@@ -1,76 +1,22 @@
 
 // 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 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 setTableId(table) {
+    tableId = table
 }
 
 function showBlankLoginScreen(text) {
@@ -82,153 +28,159 @@ function showBlankLoginScreen(text) {
     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() {
+function showGame(tableId) {
+    setTableId(tableId)
     const token = getSessionToken()
     if (token) {
-        console.log("Logging out player")
-        performLogoutRequest(token)
+        openSocket(token)
+        // TODO: Show interface
+        console.log("Show table " + tableId)
     } 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) {
+function registerUser() {
     const username = getLoginName()
     const password = getLoginPassword()
-
-    console.log("Performing request " + type);
-    fetch("/player/" + type + "/" + username, { method: 'POST',  body: password })
-    .then(convertServerResponse)
+    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)
         hideLoginWindow()
-        setLoginError("")
-        console.log(type + " successful")
-        performGetPublicTablesList(token)
-        openSocket(token)
+        loadCurrentTable(token)
     }).catch(function(error) {
         setLoginError(error.message)
-        console.log(error)
-        return
     })
 }
 
-async function loadExistingSession() {
+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)
+        hideLoginWindow()
+        loadCurrentTable(token)
+    }).catch(function(error) {
+        setLoginError(error.message)
+    })
+}
+
+function logoutUser() {
     const token = getSessionToken()
     if (token) {
-        console.log("Resuming session with token " + token)
-        resumeSession(token)
+        performLogoutRequest(token)
+        .then(function() {
+            showBlankLoginScreen("")
+        }).catch(function(error) {
+            showBlankLoginScreen(error.message)
+            console.log(error)
+        })
     } else {
-        console.log("No session to resume")
-        showLoginWindow()
+        showBlankLoginScreen("")
     }
 }
 
-async function resumeSession(token) {
-    fetch("/player/resume", { method: 'POST',  body: token })
-    .then(convertServerResponse)
+function loadExistingSession() {
+    const token = getSessionToken()
+    if (token) {
+        resumeSessionRequest(token)
         .then(function(name) {
             setPlayerName(name)
             hideLoginWindow()
-        console.log("Session resumed")
-        performGetPublicTablesList(token)
-        openSocket(token)
+            loadCurrentTable(token)
         }).catch(function(error) {
-        deleteSessionToken()
-        setLoginError(error.message)
-        showLoginWindow()
-        console.log(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)
     })
 }
 
-async function openSocket(token) {
+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 openSocket(token) {
     socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/session/start")
 
     socket.onopen = function(e) {
@@ -237,14 +189,17 @@ async function openSocket(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
         }
     };
     
@@ -253,89 +208,35 @@ async function openSocket(token) {
     };
 }
 
-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);
+        performGetPublicTablesRequest(token)
+        .then(function(json) {
             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) {
-    
+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
 }

Public/schafkopf.html

@@ -5,6 +5,9 @@
     <title>Schafkopf</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
+    <script src='elements.js'></script>
+    <script src='api.js'></script>
+    <script src='game.js'></script>
 </head>
 <body>
     <div id="top-bar">
@@ -43,7 +46,6 @@
             </div>
         </div>
     </div>
-    <script src='game.js'></script>
     <script>
         loadExistingSession()
     </script>

Public/style.css

@@ -2,6 +2,7 @@
     /* Color definitions for light mode */
     --button-color: rgb(255, 172, 39);
     --button-hover: rgb(255, 185, 72);
+    --button-disabled: rgb(128, 88, 24);
     --button-text: rgb(0,0,0);
     --standard-background: rgb(54, 54, 54);
     --element-background: rgb(42, 42, 42);
@@ -27,7 +28,7 @@
 input {
     padding: 8px;
     border: 1px solid var(--element-border);
-    border-radius: 4px;
+    border-radius: 5px;
     box-sizing: border-box;
     background-color: var(--standard-background);
 }
@@ -101,6 +102,7 @@ body, html {
 #player-name {
     text-align: right;
     grid-column: 1;
+    padding-right: 5px;
 }
 
 #logout-button {
@@ -125,6 +127,7 @@ body, html {
 
 #table-name-field {
     width: 100%;
+    font-size: medium;
     grid-column: 1;
 }
 
@@ -169,7 +172,6 @@ body, html {
     grid-template-columns: 100px auto;
     grid-template-rows: auto auto;
     column-gap: 10px;
-    /* justify-items: left; */
 }
 
 .table-join-btn {
@@ -184,7 +186,13 @@ body, html {
     grid-row: 1 / span 2;
 }
 
-.table-join-btn:hover {
+.table-join-btn:disabled,
+.table-join-btn[disabled] {
+    background-color: var(--button-disabled);
+    cursor: not-allowed;
+}
+
+.table-join-btn:hover:enabled {
     background-color: var(--button-hover);
 }