Made changes to handle room placement for connection events (specifically with page refreshes).

public_html/client.js

-const socket = io()
+const socket = io({
+    query: {
+        gameId: sessionStorage.getItem("gameId"),
+        playerId: sessionStorage.getItem("playerId")
+    }
+});
 
-socket.on('gameCode', handleGameCode);
-socket.on('unknownCode', handleUnknownCode);
-socket.on('tooManyPlayers', handleTooManyPlayers);
-socket.on('startGame', handleStartGame)
+// socket.on("unknownCode", handleUnknownCode);
+// socket.on("tooManyPlayers", handleTooManyPlayers);
 
-const waitingScreen = document.getElementById('waitingScreen');
-const homeScreen = document.getElementById('homeScreen');
-const newGameBtn = document.getElementById('newGameButton');
-const joinGameBtn = document.getElementById('joinGameButton');
-const gameCodeInput = document.getElementById('gameCodeInput');
-const gameCodeDisplay = document.getElementById('gameCodeDisplay');
+const waitingScreen = document.getElementById("waitingScreen");
+const homeScreen = document.getElementById("homeScreen");
+const newGameBtn = document.getElementById("newGameButton");
+const joinGameBtn = document.getElementById("joinGameButton");
+const gameCodeInput = document.getElementById("gameCodeInput");
+const gameCodeDisplay = document.getElementById("gameCodeDisplay");
 
-newGameBtn.addEventListener('click', newGame);
-joinGameBtn.addEventListener('click', joinGame);
+newGameBtn.addEventListener("click", newGame);
+joinGameBtn.addEventListener("click", joinGame);
 
 function newGame() {
-  socket.emit('newRoom');
-  init();
+    socket.emit("new game");
 }
 
+socket.on("game created", (info) => {
+    sessionStorage.setItem("gameId", info.gameId);
+    sessionStorage.setItem("playerId", info.playerId);
+    init(info.gameId);
+});
+
 function joinGame() {
-  const room = gameCodeInput.value;
-  if (room != null && room === '') {
-    alert("Please enter in a valid code!");
-  }
-  else {
-    socket.emit('joinRoom', room);
-    init();
-  }
+    const gameId = gameCodeInput.value;
+    socket.emit("join game", gameId);
 }
 
-function init() {
-  homeScreen.style.display = "none";
-  waitingScreen.style.display = "block";
+socket.on("game joined", (info) => {
+    sessionStorage.setItem("gameId", info.gameId);
+    sessionStorage.setItem("playerId", info.playerId);
+});
 
-  // window.location.href = 'index.html'
-  // gameScreen.innerHTML = "This is where we will play!";
-}
+socket.on("start game", () => {
+    window.location.replace("game.html");
+});
 
-function handleGameCode(gameCode) {
-  gameCodeDisplay.innerHTML = gameCode;
-}
+socket.on("failed to join game", () => {
+    alert("Failed to join game.");
+});
 
-function handleUnknownCode() {
-  reset();
-  alert('Unknown Game Code')
+function init(gameId) {
+    homeScreen.style.display = "none";
+    waitingScreen.style.display = "block";
+    gameCodeDisplay.innerText = gameId;
 }
 
-function handleTooManyPlayers() {
-  reset();
-  alert('This game is already in progress');
-}
+// function handleUnknownCode() {
+//     reset();
+//     alert("Unknown game code.");
+// }
 
-// Change client's url path to game board
-// NEED more concrete approach, changing path kicks sockets out of rooms
-// Either need to dynamically change the page, or pass room code into game board
-function handleStartGame() {
-  window.location.href = 'game.html';
-}
+// function handleTooManyPlayers() {
+//     reset();
+//     alert("This game is already in progress.");
+// }
 
-function reset() {
-  gameCodeInput.value = '';
-  homeScreen.style.display = "block";
-  waitingScreen.style.display = "none";
-}
+// function reset() {
+//     gameCodeInput.value = "";
+//     homeScreen.style.display = "block";
+//     waitingScreen.style.display = "none";
+// }

public_html/game.html

@@ -123,13 +123,18 @@
             }
 
             let submitButton = document.getElementById("ENTER");
-            let socket = io();
+            const socket = io({
+                query: {
+                    gameId: sessionStorage.getItem("gameId"),
+                    playerId: sessionStorage.getItem("playerId")
+                }
+            });
             let correct = false;
             let guess = "";
             let guessNum = 0;
             let oppGuessNum = 0;
 
-            // Calculate score
+            // calculate score
             function getScore(guessNum, first) {
                 let score = 300 - (50 * (guessNum));
                 if (first) {
@@ -208,6 +213,10 @@
                 }
             });
 
+            const rightLetterRightSpot = "green";
+            const rightLetterWrongSpot = "yellow";
+            const wrongLetterWrongSpot = "gray";
+            
             socket.on("correct word", (color) => {
                 alert("Correct word!");
                 let currentGuess = document.getElementById(`guess-${guessNum++}`);
@@ -228,7 +237,7 @@
                 }
                 playerScore = getScore(guessNum - 1, playerFirst);
                 let pScore = document.getElementById("p-score");
-                pScore.innerHTML = `SCORE: ${playerScore}`;
+                pScore.innerText = `SCORE: ${playerScore}`;
             });
 
             // demo of how to change opponent's board
@@ -252,7 +261,7 @@
                     oppScore = getScore(oppGuessNum, oppFirst);
                 }
                 let oScore = document.getElementById("o-score");
-                oScore.innerHTML = `OPPONENT'S SCORE: ${oppScore}`;
+                oScore.innerText = `OPPONENT'S SCORE: ${oppScore}`;
                 console.log(oppScore);
             });
 
@@ -263,6 +272,7 @@
                 for (let [index, letterInput] of currentGuess.childNodes.entries()) {
                     letterInput.style.backgroundColor = colors[index];
                     let keyButton = document.getElementById(letterInput.value);
+                    // work on keeping each key the correct color
                     keyButton.style.backgroundColor = colors[index];
                 }
                 currentGuess.lastChild.removeAttribute("id");
@@ -282,7 +292,7 @@
                 }
                 playerScore = getScore(guessNum, playerFirst);
                 let pScore = document.getElementById("p-score");
-                pScore.innerHTML = `SCORE: ${playerScore}`;
+                pScore.innerText = `SCORE: ${playerScore}`;
             });
 
             socket.on("invalid word", () => {

public_html/index.html

 <!DOCTYPE html>
 <html lang="en">
-
     <head>
         <meta charset="UTF-8">
         <title>REMAP</title>
@@ -17,26 +16,22 @@
                 transition-duration: 0.4s;
                 cursor: pointer;
             }
-
             .buttons {
                 background-color: white;
                 flex: 1;
                 color: black;
                 border: 2px solid #4CAF50;
             }
-
             .buttons:hover {
                 background-color: #4CAF50;
                 flex: 1;
                 color: white;
             }
-
             #waitingScreen {
                 display: none;
             }
         </style>
     </head>
-
     <body>
         <div id="homeScreen">
             <h1>REMAP</h1>
@@ -47,7 +42,6 @@
             </div>
             <button type="submit" class="button buttons" id="joinGameButton">Join Game</button>
         </div>
-
         <div id="waitingScreen">
             <div style="display: flex; justify-content: center; margin: 0 auto;">
                 <h1>Your room code is: <span id="gameCodeDisplay"></span></h1>
@@ -57,5 +51,4 @@
         <script src="/socket.io/socket.io.js"></script>
         <script src="client.js"></script>
     </body>
-
 </html>

server.js

 const pg = require("pg");
-// Import the Express module
+// import the Express module
 const express = require("express");
-const { join } = require("path");
-// Create a new instance of Express
+// create a new instance of Express
 const app = express();
+// https://www.npmjs.com/package/uuid
+const { v4: uuidv4 } = require('uuid');
 
-// Set-up a connection between the client and the server
+// set-up a connection between the client and the server
 const http = require("http").Server(app);
 const io = require("socket.io")(http);
 
-// user "public_html directory for static files"
+// use "public_html" directory for static files
 app.use(express.static("public_html"));
 
 // imports database environment variables
@@ -21,37 +22,26 @@ pool.connect().then(function () {
     console.log(`Connected to database ${env.database}`);
 });
 
-// app.get('/', function(req, res) {
-//     let path = require("path");
-//     res.sendFile(path.resolve('index.html'));
-// })
+// global variables to store the rooms and game states
+let rooms = new Set();
+let games = {};
 
-// Global variable to store the rooms' objects with id, name, and sockets (players)
-const rooms = {};
-
-// Function to generate a 5 letter unique room code
-function generateRoomCode() {
-    let code = '';
+// function to generate a 5 letter unique game code
+function generateGameCode() {
+    let gameCode = "";
     let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-    let charLength = characters.length
+    let charLength = characters.length;
+    do {
         for (let i = 0; i < 5; i++) {
-        code += characters.charAt(Math.floor(Math.random() * charLength))
-    }
-    return code;
+            gameCode += characters.charAt(Math.floor(Math.random() * charLength));
         }
+    } while (rooms.has(gameCode));
     
-// Function to connect a socket (player) to a specified room
-function connectToRoom(socket, room) {
-    // Object that represents a room from the 'rooms' variable
-    // Let the player join the room with the room id
-    socket.join(room.id, () => {
-        // Storing the room id in the sokcet to use later on 
-        socket.roomId = room.id;
-    });
-};
+    return gameCode;
+}
 
 // ---------------Function that assigns new words----------------
-// Function to assign a unique word to specified room
+// function to assign a unique word to specified room
 async function assignWord(roomName) {
     return new Promise((resolve, reject) => {
         let idx = Math.floor(Math.random() * 5758) + 1;
@@ -79,18 +69,18 @@ async function assignWord(roomName) {
             console.log(error);
             assignWord(roomName);
         });
-    })
+    });
 }
 
-// Function Call
+// function call
 // assignWord("roomName").then(function (result) {
 //     console.log(result);
-//     // Do stuff here ... a.k.a. emit or send etc
+//     // do stuff here ... a.k.a. emit or send etc
 
 // });
 // --------------------------------------------------------------
-const answer = "sweet"; // hardcoded for now
-// ---- Try this to test the word function - Comment previous line and uncomment the lines beneath
+const answer = "lapse"; // hardcoded for now
+// ---- try this to test the word function - Comment previous line and uncomment the lines beneath
 // let answer;
 // assignWord("roomName").then(function (result) {
 //     answer = result;
@@ -99,55 +89,52 @@ const rightLetterRightSpot = "green";
 const rightLetterWrongSpot = "yellow";
 const wrongLetterWrongSpot = "gray";
 
-
-function debugRooms() {
-    console.log(io.sockets.adapter.rooms);
-}
-
-// Handle incoming connections from clients
+// handle incoming connections from clients
 io.on("connection", socket => {
-
     console.log("A user connected with id: " + socket.id);
 
-    socket.on('debugRooms', debugRooms);
+    const gameId = socket.handshake.query.gameId;
+    const playerId = socket.handshake.query.playerId;
 
-    socket.on('newRoom', roomName => {
-        // Storing the id, name, and sockets in the room object
-        const room = {
-            id: generateRoomCode(5),
-            name: roomName,
-            sockets: []
+    socket.on('new game', () => {
+        const gameId = generateGameCode(5);
+        rooms.add(gameId);
+        const game = {
+            players: []
         };
-        rooms[room.id] = room;
-        // Emit the new gameCode with room id
-        socket.emit('gameCode', room.id)
-        // Player joins the new room that they created
-        connectToRoom(socket, room);
-        console.log("A new game room created with id: " + room.id);
+        const playerId = uuidv4();
+        game.players.push(playerId);
+        games[gameId] = game;
+
+        io.to(socket.id).emit('game created', {gameId: gameId, playerId: playerId});
+
+        socket.join(gameId);
+
+        console.log("A new game room created with id: " + gameId);
     });
 
-    socket.on('joinRoom', roomId => {
+    socket.on('join game', (gameId) => {
+        if (games.hasOwnProperty(gameId) && games[gameId].players.length === 1) {
+            const game = games[gameId];
+            const playerId = uuidv4();
+            game.players.push(playerId);
 
-        const room = rooms[roomId];
-        // https://stackoverflow.com/questions/66531331/socket-io-the-room-in-the-rooms-dictionary-is-undefined
-        // Condition to check if the roomId object is in the sockets
-        if (io.sockets.adapter.rooms.has(roomId) && io.sockets.adapter.rooms.get(roomId).size == 1) {
-            // console.log(io.sockets.adapter.rooms);
-            // If it is, allow the socket (player) to join
-            connectToRoom(socket, room);
-            console.log(socket.id + " has joined room with id: " + roomId);
-            // Emit the same gameCode to the new player that joined
-            socket.emit('gameCode', room.id);
-            // Tells client to open game board
-            io.in(room.id).emit('startGame');
-        }
-        // Otherwise let the player know the code is invalid or unknown
-        else {
-            console.log(socket.id + " tried to join " + roomId + " but the room does not exist.");
-            socket.emit('unknownCode');
+            io.to(socket.id).emit('game joined', {gameId: gameId, playerId: playerId});
+
+            socket.join(gameId);
+
+            io.in(gameId).emit("start game");
+        } else {
+            io.to(socket.id).emit('failed to join game');
         }
     });
 
+    // handles room placement when clients disconnect and reconnect with a different socket id
+    if (games.hasOwnProperty(gameId) && games[gameId].players.includes(playerId)) {
+        socket.join(gameId);
+        // console.log(io.sockets.adapter.rooms);
+    }
+
     socket.on("submit word", (word) => {
         pool.query(
             `SELECT * FROM words WHERE word = $1`,
@@ -156,8 +143,8 @@ io.on("connection", socket => {
             if (response.rows.length) {
                 let colors = [];
                 if (word === answer) {
-                    socket.emit("correct word", rightLetterRightSpot);
-                    socket.broadcast.emit("update opponent", Array(5).fill(rightLetterRightSpot));
+                    io.to(socket.id).emit("correct word", rightLetterRightSpot);
+                    socket.to(gameId).emit("update opponent", Array(5).fill(rightLetterRightSpot));
                 } else {
                     for (let i = 0; i < word.length; i++) {
                         // https://reactgo.com/javascript-variable-regex/
@@ -182,18 +169,16 @@ io.on("connection", socket => {
                             colors.push(wrongLetterWrongSpot);
                         }
                     }
-                    socket.emit("incorrect word", colors);
-                    // TEMPORARY
-                    socket.broadcast.emit("update opponent", colors);
+                    io.to(socket.id).emit("incorrect word", colors);
+                    socket.to(gameId).emit("update opponent", colors);
                 }
             } else {
-                socket.emit("invalid word");
+                io.to(socket.id).emit("invalid word");
             }
         }).catch(function (error) {
             console.log(error);
-        })
         });
-
+    });
 });
 
 http.listen(3000, function () {