First working version

Public/elements.js

@@ -6,6 +6,11 @@ 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"
+
 function showDebugLogins() {
     document.getElementById("login-window-inner").innerHTML += 
     "<button class=\"login-buttons standard-button\" onclick=\"loginDebugUser('a')\">Player A</button>" + 
@@ -35,7 +40,7 @@ function showLoginElements() {
     hide("table-list")
     hide("game-bar")
     hide("table-players")
-    hide("player-cards")
+    hide(playerCardsElement)
 }
 
 function showTableListElements() {
@@ -45,7 +50,7 @@ function showTableListElements() {
     setDisplayStyle("table-list", "inherit")
     hide("game-bar")
     hide("table-players")
-    hide("player-cards")
+    hide(playerCardsElement)
 }
 
 function showGameElements() {
@@ -55,7 +60,7 @@ function showGameElements() {
     hide("table-list")
     setDisplayStyle("game-bar", "grid")
     setDisplayStyle("table-players", "grid")
-    setDisplayStyle("player-cards", "grid")
+    setDisplayStyle(playerCardsElement, "grid")
 }
 
 function showTableName(name) {
@@ -63,11 +68,11 @@ function showTableName(name) {
 }
 
 function showConnectedState() {
-    showConnectionState("bottom", true)
+    showPlayerState("bottom", "")
 }
 
 function showDisconnectedState() {
-    showConnectionState("bottom", false)
+    showPlayerDisconnected("bottom")
 }
 
 function showDealButton() {
@@ -138,26 +143,36 @@ function setTableListContent(content) {
     document.getElementById("table-list").innerHTML = content
 }
 
-function setTablePlayerInfo(position, name, connected, active, card, layer) {
-    nameColor = active ?  "var(--button-color)" : "var(--text-color)"
-    setTablePlayerElements(position, name, nameColor, connected, card, layer)
-}
-
 function setEmptyPlayerInfo(position) {
-    setTablePlayerElements(position, "Empty", "var(--secondary-text-color)", true, "", 1)
+    setTablePlayerName(position, null, false)
+    showPlayerState(position, "")
+    setTableCard(position, "", 1)
 }
 
-function setTablePlayerElements(position, name, nameColor, connected, card, layer) {
+function setTablePlayerName(position, name, active) {
     const nameElement = document.getElementById("table-player-name-" + position)
-    nameElement.style.color = nameColor
-    nameElement.innerHTML = name
-    showConnectionState(position, connected)
-    setTableCard(position, card, layer)
+    if (name == null) {
+        nameElement.style.color = "var(--secondary-text-color)"
+        nameElement.innerHTML = missingPlayerText
+    } else {
+        nameElement.style.color = active ?  "var(--button-color)" : "var(--text-color)"
+        nameElement.innerHTML = name
+    }
 }
 
-function showConnectionState(position, connected) {
+function showPlayerDisconnected(position) {
+    setPlayerState(position, "var(--alert-color)", offlineText)
+}
+
+function showPlayerState(position, state) {
+    setPlayerState(position, "var(--secondary-text-color)", state)
+}
+
+function setPlayerState(position, color, text) {
     const connectionElement = "table-player-state-" + position
-    setDisplayStyle(connectionElement, connected ? "none" : "inherit")   
+    const element = document.getElementById(connectionElement)
+    element.style.color = color
+    element.innerHTML = text
 }
 
 function setTableCard(position, card, layer) {
@@ -206,9 +221,14 @@ function updateTableInfo(table) {
         setHandCard(i+1, "", false)
     }
     
+    let playedGame = null
+    if (table.hasOwnProperty("game")) {
+        playedGame = textForAction(table.game)
+    }
+
     // Show player info
     console.log(table)
-    setInfoForPlayer(table.player, "bottom")
+    setInfoForPlayer(table.player, "bottom", playedGame)
     if (table.playerSelectsGame) {
         setActionsForOwnPlayer(table.playableGames)
         showAvailableGames([])
@@ -221,29 +241,61 @@ function updateTableInfo(table) {
         setActionsForOwnPlayer(table.actions)
     }
     if (table.hasOwnProperty("playerLeft")) {
-        setInfoForPlayer(table.playerLeft, "left")
+        setInfoForPlayer(table.playerLeft, "left", playedGame)
     } else {
         setEmptyPlayerInfo("left")
     }
     if (table.hasOwnProperty("playerAcross")) {
-        setInfoForPlayer(table.playerAcross, "top")
+        setInfoForPlayer(table.playerAcross, "top", playedGame)
     } else {
         setEmptyPlayerInfo("top")
     }
     if (table.hasOwnProperty("playerRight")) {
-        setInfoForPlayer(table.playerRight, "right")
+        setInfoForPlayer(table.playerRight, "right", playedGame)
     } else {
         setEmptyPlayerInfo("right")
     }
 }
 
-function setInfoForPlayer(player, position) {
+function setInfoForPlayer(player, position, game) {
     var card = ""
-    if (player.hasOwnProperty("playedCard")) {
-        card = player.playedCard
+    if (player.hasOwnProperty("card")) {
+        card = player.card
     }
+    const leadsGame = player.leads
     const layer = player.position
-    setTablePlayerInfo(position, player.name, player.connected, player.active, card, layer)
+    setTableCard(position, card, layer)
+    setTablePlayerName(position, player.name, player.active)
+    if (!player.connected) {
+        showPlayerDisconnected(position)
+        return
+    }
+    var state = []
+    if (game != null && leadsGame) {
+        state.push(game)
+    }
+    
+    const double = doubleText(player.doubles)
+    if (double) {
+        state.push(double)
+    }
+
+    if (game != null) {
+        state.push(player.points.toString() + " Punkte")
+    }
+    
+    const text = state.join(", ")
+    showPlayerState(position, text)
+}
+
+function doubleText(doubles) {
+    if (doubles == 0) {
+        return null
+    }
+    if (doubles == 1) {
+        return "gedoppelt"
+    }
+    return doubles.toString() + "x gedoppelt"
 }
 
 function clearInfoForPlayer(position) {
@@ -296,6 +348,8 @@ function textForAction(action) {
         case "raise":
         return "Schießen"
         
+        case "ruf":
+        return "Ruf"
         case "ruf-eichel":
         return "Ruf Eichel"
         case "ruf-blatt":
@@ -308,6 +362,8 @@ function textForAction(action) {
         return "Wenz"
         case "geier":
         return "Geier"
+        case "solo":
+        return "Solo"
         case "solo-eichel":
         return "Eichel Solo"
         case "solo-blatt":