Spectators can view a game

app/public/game_render.js

@@ -50,6 +50,7 @@ class SudokuBoard {
     }
 
     isEditable(x, y) {
+        if (!this.editable) return false;
         if ((x < 0 || x >= 9 || y < 0 || y >= 9)) return false;
         return this.boardLock[y][x] === 0;
     }
@@ -125,10 +126,11 @@ class SudokuBoard {
         document.getElementById(parent_id).append(this.root);
     }
 
-    constructor(parent_id, onInput) {
+    constructor(parent_id, editable, onInput) {
         this.selected = false;
         this.selX = -1;
         this.selY = -1;
+        this.editable = editable;
         this.initEmptyBoard(parent_id);
         this.onInput = onInput;
         BOARDS.add(this);

app/semipublic/game.html

@@ -24,7 +24,7 @@
             return t ? t[1] : null;
         }
 
-        function hideJoinButton() {
+        function hideJoinButtons() {
             document.querySelector("#join-game").style.display = "none";
         }
 
@@ -34,24 +34,31 @@
                 token: getToken()
             }
         });
+
         let BOARD1 = null;
         let playerInfo = document.getElementById("player-info-container");
         socket.on("board state", (args) => {
+            console.log(args);
             if (!BOARD1)
-                BOARD1 = new SudokuBoard("board-container", updateToServer);
+                BOARD1 = new SudokuBoard("board-container", args.editable, updateToServer);
             BOARD1.updateBoard(args.boardDisplay, args.boardLock, args.boardColors);
-            document.querySelector("#join-game").style.display = "none";
+            BOARD1.editable = args.editable;
             displayPlayerScores(args.playerScores);
-            hideJoinButton();
+            hideJoinButtons();
         });
 
         socket.on("game stop", () => {
             window.location.href = "/";
         });
 
+        socket.on("please log in", () => {
+            window.alert("Please log in to join a game.");
+            window.location.href = "/login";
+        });
+
         document.querySelector("#join-game").onclick = () => {
             socket.emit("join game");
-            hideJoinButton();
+            hideJoinButtons();
         }
 
         function updateToServer(x, y, num) {

app/server.js

@@ -61,19 +61,21 @@ class Game {
         this.sendBoard();
     }
 
-    packageBoardState() {
+    packageBoardState(editable) {
         return {
             boardDisplay: this.boardDisplay,
             boardLock: this.boardLock,
             boardColors: this.boardColors,
-            playerScores: this.playerScores
+            playerScores: this.playerScores,
+            editable: editable
         };
     }
 
     sendBoard() {
         // do not send board state if game is not in progress
         if (this.state === ROOM_PLAYING) {
-            this.sendAll("board state", this.packageBoardState());
+            const playerClients = this.playerUsers.map(u => this.usersToClients.get(u));
+            this.sendEach("board state", this.connectedClients, id => this.packageBoardState(playerClients.includes(id)));
         }
     }
 
@@ -129,12 +131,12 @@ class Game {
         GAMES.delete(this.id);
     }
 
-    userLeave(client, user) {
+    leave(client, user) {
+        if (user)
             this.usersToClients.delete(user);
-        if (this.connectedClients.includes(client)) {
+        if (this.connectedClients.includes(client))
             this.connectedClients.splice(this.connectedClients.indexOf(client), 1);
     }
-    }
 
     send(name, clients, message = null) {
         for (let clientId of clients) {
@@ -146,6 +148,16 @@ class Game {
         }
     }
 
+    sendEach(name, clients, msgFn) {
+        for (let clientId of clients) {
+            io.in(clientId).fetchSockets().then(sockets => {
+                sockets.forEach(socket => {
+                    socket.emit(name, msgFn(socket.id))
+                });
+            });
+        }
+    }
+
     sendAll(name, message = null) {
         this.send(name, this.connectedClients, message);
     }
@@ -244,13 +256,17 @@ app.get("/logout", (req, res) => {
 app.get("/debug/listGames", (req, res) => {
     if (GAMES.size === 0)
         return res.status(404).send("No games");
-    return res.send(Array.from(GAMES.values()).map(g => `${g.id} | ${g.difficulty} | ${g.state}<br>`).reduce((a, b) => a + b));
+    return res.send(Array.from(GAMES.values()).map(g => `${g.id} | ${g.difficulty} | ${g.state}<br>${g.boardSolution}<br>`).reduce((a, b) => a + b));
 });
 
 app.get("/openGames", (req, res) => {
     return res.send(Array.from(GAMES.values())
         .filter(g => g.state === ROOM_OPEN)
-        .map(g => ({"id": g.id, "players": g.playerUsers, "difficulty": g.difficulty})).sort((a,b) => a.id.compare(b.id)));
+        .map(g => ({
+            "id": g.id,
+            "players": g.playerUsers,
+            "difficulty": g.difficulty
+        })).sort((a, b) => a.id.compare(b.id)));
 });
 
 app.get("/create", (req, res) => {
@@ -266,13 +282,12 @@ app.get("/create", (req, res) => {
 });
 
 app.get("/game/:id", (req, res) => {
-    ensureAuth(req, res, user => {
+    clearBadToken(req, res);
     const game = getGame(req.params.id);
     if (!game)
         return res.status(404).send("No such game");
     return res.sendFile(__dirname + "/semipublic/game.html");
 });
-});
 
 
 io.on("connection", (socket) => {
@@ -281,9 +296,6 @@ io.on("connection", (socket) => {
     const gameId = socket.handshake.query.gameId;
     const token = socket.handshake.query.token;
     const user = login.getUserForToken(token);
-    if (!user) {
-        return socket.disconnect();
-    }
     const game = getGame(gameId);
     if (!game) {
         console.log(`Invalid game from client ${socketId} game id: ${gameId}`)
@@ -292,8 +304,8 @@ io.on("connection", (socket) => {
     game.clientJoin(socketId);
     console.log(`Client connected: ${socketId} to game ${gameId}`);
 
-    if (game.playerUsers.includes(user)) {
-        socket.emit("board state", game.packageBoardState());
+    if (game.state === ROOM_PLAYING) {
+        socket.emit("board state", game.packageBoardState(user && Object.keys(game.playerScores).includes(user)));
     }
 
     socket.on("cell input", args => {
@@ -304,14 +316,18 @@ io.on("connection", (socket) => {
     });
 
     socket.on("join game", () => {
+        if (user) {
             if (!game.playerUsers.includes(user)) {
                 game.userJoin(socketId, user);
             }
+        } else {
+            socket.emit("please log in");
+        }
     });
 
     socket.on("disconnect", () => {
         if (game) {
-            game.userLeave(socketId, user);
+            game.leave(socketId, user);
         }
     });
 });