Refactor JS constants

Public/elements.js

@@ -6,11 +6,29 @@ var playerName = ""
 var debugSessionToken = null
 const debugMode = true // Does not load session token, to allow multiple players per browser
 
-const playerCardsElement = "player-cards"
 
 const offlineText = "Offline"
 const missingPlayerText = "Leer"
 
+const elementIdUserName = "user-name"
+const elementIdUserPssword = "user-pwd"
+const elementIdPlayerCards = "player-cards"
+const elementIdLoginWindow = "login-window"
+const elementIdTopBar = "top-bar"
+const elementIdTableListBar = "table-list-bar"
+const elementIdTableList = "table-list"
+const elementIdGameBar = "game-bar"
+const elementIdTablePlayers = "table-players"
+const elementIdTableName = "table-name-label"
+const elementIdPlayerName = "player-name"
+const elementIdLoginError = "login-error"
+const elementIdTableNameField = "table-name-field"
+const elementIdPublicTableCheckbox = "table-public-checkbox"
+const elementIdActionBar = "action-bar"
+const elementIdAvailableGamesList = "available-games-list"
+
+const localStorageTokenId = "token"
+
 function showDebugLogins() {
     document.getElementById("login-window-inner").innerHTML += 
     "<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('a')\">Player A</button>" + 
@@ -20,8 +38,8 @@ function showDebugLogins() {
 }
 
 function loginDebugUser(name) {
-    document.getElementById("user-name").value = name
-    document.getElementById("user-pwd").value = name
+    document.getElementById(elementIdUserName).value = name
+    document.getElementById(elementIdUserPssword).value = name
     loginUser()
 }
 
@@ -34,37 +52,37 @@ function hide(elementId) {
 }
 
 function showLoginElements() {
-    setDisplayStyle("login-window", "table")
-    hide("top-bar")
-    hide("table-list-bar")
-    hide("table-list")
-    hide("game-bar")
-    hide("table-players")
-    hide(playerCardsElement)
+    setDisplayStyle(elementIdLoginWindow, "table")
+    hide(elementIdTopBar)
+    hide(elementIdTableListBar)
+    hide(elementIdTableList)
+    hide(elementIdGameBar)
+    hide(elementIdTablePlayers)
+    hide(elementIdPlayerCards)
 }
 
 function showTableListElements() {
-    hide("login-window")
-    setDisplayStyle("top-bar", "inherit")
-    setDisplayStyle("table-list-bar", "grid")
-    setDisplayStyle("table-list", "inherit")
-    hide("game-bar")
-    hide("table-players")
-    hide(playerCardsElement)
+    hide(elementIdLoginWindow)
+    setDisplayStyle(elementIdTopBar, "inherit")
+    setDisplayStyle(elementIdTableListBar, "grid")
+    setDisplayStyle(elementIdTableList, "inherit")
+    hide(elementIdGameBar)
+    hide(elementIdTablePlayers)
+    hide(elementIdPlayerCards)
 }
 
 function showGameElements() {
-    hide("login-window")
-    setDisplayStyle("top-bar", "inherit")
-    hide("table-list-bar")
-    hide("table-list")
-    setDisplayStyle("game-bar", "grid")
-    setDisplayStyle("table-players", "grid")
-    setDisplayStyle(playerCardsElement, "grid")
+    hide(elementIdLoginWindow)
+    setDisplayStyle(elementIdTopBar, "inherit")
+    hide(elementIdTableListBar)
+    hide(elementIdTableList)
+    setDisplayStyle(elementIdGameBar, "grid")
+    setDisplayStyle(elementIdTablePlayers, "grid")
+    setDisplayStyle(elementIdPlayerCards, "grid")
 }
 
 function showTableName(name) {
-    document.getElementById("table-connected-label").innerHTML = name
+    document.getElementById(elementIdTableName).innerHTML = name
 }
 
 function showConnectedState() {
@@ -75,40 +93,32 @@ function showDisconnectedState() {
     showPlayerDisconnected("bottom")
 }
 
-function showDealButton() {
-    setDisplayStyle("deal-button", "inherit")
-}
-
-function hideDealButton() {
-    hide("deal-button")
-}
-
 function setPlayerName(name) {
-    document.getElementById("player-name").innerHTML = name
+    document.getElementById(elementIdPlayerName).innerHTML = name
     playerName = name
 }
 
 function getLoginName() {
-    return document.getElementById("user-name").value
+    return document.getElementById(elementIdUserName).value
 }
 
 function clearLoginName() {
-    document.getElementById("user-name").value = ""
+    document.getElementById(elementIdUserName).value = ""
 }
 
 function getLoginPassword() {
-    return document.getElementById("user-pwd").value
+    return document.getElementById(elementIdUserPssword).value
 }
 
 function clearLoginPassword() {
-    document.getElementById("user-pwd").value = ""
+    document.getElementById(elementIdUserPssword).value = ""
 }
 
 function getSessionToken() {
     if (debugMode) {
         return debugSessionToken
     }
-    return localStorage.getItem('token')
+    return localStorage.getItem(localStorageTokenId)
 }
 
 function setSessionToken(token) {
@@ -116,31 +126,31 @@ function setSessionToken(token) {
         debugSessionToken = token
         return
     }
-    localStorage.setItem('token', token)
+    localStorage.setItem(localStorageTokenId, token)
 }
 
 function deleteSessionToken() {
-    localStorage.removeItem('token')
+    localStorage.removeItem(localStorageTokenId)
 }
 
 function setLoginError(text) {
-    document.getElementById("login-error").innerHTML = text
+    document.getElementById(elementIdLoginError).innerHTML = text
 }
 
 function getTableName() {
-    return document.getElementById("table-name-field").value
+    return document.getElementById(elementIdTableNameField).value
 }
 
 function clearTableName() {
-    return document.getElementById("table-name-field").value = ""
+    return document.getElementById(elementIdTableNameField).value = ""
 }
 
 function getTableVisibility() {
-    return document.getElementById("table-public-checkbox").checked
+    return document.getElementById(elementIdPublicTableCheckbox).checked
 }
 
 function setTableListContent(content) {
-    document.getElementById("table-list").innerHTML = content
+    document.getElementById(elementIdTableList).innerHTML = content
 }
 
 function setEmptyPlayerInfo(position) {
@@ -280,10 +290,6 @@ function setInfoForPlayer(player, position, game) {
         state.push(double)
     }
 
-    if (game != null && player.hasOwnProperty("points")) {
-        state.push(player.points.toString() + " Punkte")
-    }
-    
     const text = state.join(", ")
     showPlayerState(position, text)
 }
@@ -311,7 +317,7 @@ function setActionsForOwnPlayer(actions) {
         html += "<button class=\"standard-button action-button\" " + 
         "onclick=\"performAction('" + action + "')\">" + content + "</button>"
     }
-    document.getElementById("action-bar").innerHTML = html
+    document.getElementById(elementIdActionBar).innerHTML = html
 }
 
 function textForAction(action) {
@@ -394,5 +400,5 @@ function showAvailableGames(games) {
         const content = textForAction(game)
         html += "<div class=\"standard-button available-game\">" + content + "</div>"
     }
-    document.getElementById("available-games-list").innerHTML = html
+    document.getElementById(elementIdAvailableGamesList).innerHTML = html
 }

Public/schafkopf.html

@@ -24,7 +24,7 @@
         </div>
         <div id="game-bar">
             <button id="leave-table" class="standard-button" onclick="leaveTable()">Leave table</button>
-            <span id="table-connected-label">Disconnected</span>
+            <span id="table-name-label">Table</span>
         </div>
     </div>