Add client leave api

Public/api.js

@@ -54,6 +54,12 @@ async function performGetPublicTablesRequest(token) {
     })
 }
 
+async function performLeaveTableRequest(token) {
+    return fetch("/table/leave", { method: 'POST',  body: token })
+    .then(convertServerResponse)
+    .then(function(value) {})
+}
+
 function convertServerResponse(response) {
     switch (response.status) {
         case 200: // Success

Public/elements.js

@@ -20,6 +20,14 @@ function showTableListElements() {
     document.getElementById("table-list").style.display = "inherit"
 }
 
+function showGameElements() {
+    document.getElementById("game-bar").style.display = "grid"
+}
+
+function hideGameElements() {
+    document.getElementById("game-bar").style.display = "none"
+}
+
 function setPlayerName(name) {
     document.getElementById("player-name").innerHTML = name
 }

Public/game.js

@@ -39,6 +39,7 @@ function showGame(tableId) {
     if (token) {
         openSocket(token)
         hideTableListElements()
+        showGameElements()
         // TODO: Show interface
         console.log("Show table " + tableId)
     } else {
@@ -186,6 +187,22 @@ function joinTable(tableId) {
     }
 }
 
+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")
 

Public/schafkopf.html

@@ -22,6 +22,9 @@
             <button id="create-table-button" class="standard-button" onclick="createTable()">Create table</button>
             <button id="refresh-tables" class="standard-button" onclick="refreshTables()">Refresh list</button>
         </div>
+        <div id="game-bar">
+            <button id="leave-table" class="standard-button" onclick="leaveTable()">Leave table</button>
+        </div>
     </div>
     
     <div id="table-list">

Public/style.css

@@ -157,6 +157,28 @@ body, html {
     height: 34px;
 }
 
+
+#game-bar {
+    position: absolute;
+    width: 120px;
+    height: 40px;
+    top: 5px;
+    left: 10px;
+    display: none;
+    grid-template-columns: 1200px;
+    column-gap: 10px;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
+}
+
+#leave-table {
+    width: 120px;
+    grid-column: 1;
+    padding: 0px;
+    height: 34px;
+}
+
 #table-list {
     margin: 20px;
     padding-right: 20px;