Add game summary on client side

Public/elements.js

@@ -26,6 +26,7 @@ const elementIdTableNameField = "table-name-field"
 const elementIdPublicTableCheckbox = "table-public-checkbox"
 const elementIdActionBar = "action-bar"
 const elementIdAvailableGamesList = "available-games-list"
+const elementIdGameSummary = "game-summary"
 
 const localStorageTokenId = "token"
 
@@ -265,6 +266,20 @@ function updateTableInfo(table) {
     } else {
         setEmptyPlayerInfo("right")
     }
+    if (table.hasOwnProperty("summary")) {
+        setGameSummary(table.summary)
+    } else {
+        hideGameSummary()
+    }
+}
+
+function setGameSummary(summary) {
+    document.getElementById(elementIdGameSummary).innerHTML = summary.text
+    setDisplayStyle(elementIdGameSummary, "inherit")
+}
+
+function hideGameSummary() {
+    hide(elementIdGameSummary)
 }
 
 function setInfoForPlayer(player, position, game) {

Public/schafkopf.html

@@ -54,6 +54,7 @@
                 <div id="table-player-state-left" class="player-connection-state">Offline</div>
             </div>
             <div id="available-games-list"></div>
+            <div id="game-summary">The game has ended.</div>
         </div>
         <div id="action-bar-centering">
             <div id="action-bar"></div>

Public/style.css

@@ -386,6 +386,23 @@ body {
     text-align: center;
 }
 
+#game-summary {
+    display: none;
+    width: 180px;
+    height: 130px;
+    text-align: center;
+    grid-column: 2 / span 5;
+    grid-row: 2 / span 3;
+    z-index: 6;
+    margin: auto;
+    padding: 10px;
+    background-color: var(--standard-background);
+    color: var(--text-color);
+    border: 2px solid var(--button-color);
+    border-radius: 5px;
+    font-size: medium;
+}
+
 #player-cards-center {
     width: 100%;
     margin-top: 10px;