Spectator colors

app/public/game.css

@@ -56,3 +56,11 @@
 .color-red {
     background-color: pink;
 }
+
+.color-yellow {
+    background-color: yellow;
+}
+
+.color-blue {
+    background-color: lightskyblue;
+}

app/public/game_render.js

@@ -5,6 +5,8 @@ const BOARDS = new Set();
 const CELL_COLORS = new Map();
 CELL_COLORS.set(1, "color-green");
 CELL_COLORS.set(2, "color-red");
+CELL_COLORS.set(3, "color-yellow"); // spectator player 1
+CELL_COLORS.set(4, "color-blue");   // spectator player 2
 
 function deselectAllBoards() {
     BOARDS.forEach(board => board.deselect());

app/semipublic/game.html

@@ -43,7 +43,7 @@
             BOARD1 = new SudokuBoard("board-container", args.editable, updateToServer);
         BOARD1.updateBoard(args.boardDisplay, args.boardLock, args.boardColors);
         BOARD1.editable = args.editable;
-        displayPlayerScores(args.playerScores);
+        displayPlayerScores(args.playerScores, args.playerColors);
         hideJoinButton();
     });
 
@@ -84,11 +84,15 @@
         }
     }
 
-    function displayPlayerScores(playerScores) {
+    function displayPlayerScores(playerScores, playerColors) {
         removePrevScore();
         for (let player in playerScores) {
             let scoreText = document.createElement("p");
+            if (BOARD1.editable) {
                 scoreText.textContent = `${player}: ${playerScores[player]}`;
+            } else {
+                scoreText.textContent = `${player} (${playerColors[player]}): ${playerScores[player]}`;
+            }
             playerInfo.appendChild(scoreText);
         }
     }

app/semipublic/login.html

@@ -14,6 +14,7 @@
         <div id="message"></div>
         <script>
             document.querySelector("#button-login").onclick = () => {
+                document.querySelector("#message").innerText = "";
                 fetch("/login", {
                     method: "POST",
                     headers: {

app/server.js

@@ -68,17 +68,22 @@ class Game {
         this.boardSolution = gen[1];
         this.boardLock = ARR9.map(y => ARR9.map(x => this.boardDisplay[y][x] ? 1 : 0));
         this.boardColors = ARR9.map(y => ARR9.map(x => this.boardDisplay[y][x] ? 1 : 0));
+        this.boardSpectatorColors = ARR9.map(y => ARR9.map(x => this.boardDisplay[y][x] ? 1 : 0));
         this.playerUsers.forEach(user => this.playerScores[user] = 0);
         this.state = ROOM_PLAYING;
         this.sendBoard();
     }
 
     packageBoardState(editable) {
+        const playerColors = {};
+        playerColors[this.playerUsers[0]] = "Yellow";
+        playerColors[this.playerUsers[1]] = "Blue";
         return {
             boardDisplay: this.boardDisplay,
             boardLock: this.boardLock,
-            boardColors: this.boardColors,
+            boardColors: editable ? this.boardColors : this.boardSpectatorColors,
             playerScores: this.playerScores,
+            playerColors: playerColors,
             editable: editable
         };
     }
@@ -119,10 +124,12 @@ class Game {
             return false;
         if (this.boardSolution[y][x] === val) {
             this.boardColors[y][x] = 1;
+            this.boardSpectatorColors[y][x] = this.playerUsers.indexOf(user) + 3;
             this.boardLock[y][x] = 1;
             dPoints = 1;
         } else {
             this.boardColors[y][x] = 2;
+            this.boardSpectatorColors[y][x] = 2;
             dPoints = -1;
         }
         this.boardDisplay[y][x] = val;