Refactor JS constants

This commit is contained in:
Christoph Hagen 2021-12-21 09:40:40 +01:00
parent 3a95e1c990
commit 5d6ad89b56
2 changed files with 59 additions and 53 deletions

View File

@ -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
}

View File

@ -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>