Updates 4/24

html/index.html

@@ -117,8 +117,8 @@ <h1>LOBBY</h1>
     <div class="container-fluid custom-body h-auto d-none" id="game">
         <div id="home" class="container-fluid text-center d-flex justify-content-center align-items-center py-3" style="height: fit-content">
             <div class="container">
-                <div class="py-3 justify-content-center text-center flex-column d-flex container ">
-                    <table class="wordSearchTable" id="wordSearchTable"></table>
+                <div class="py-3 justify-content-center text-center flex-column d-flex container" id="grid">
+
                 </div>
             </div>
             <div>
@@ -143,7 +143,7 @@ <h1>LOBBY</h1>
                                 </div>
                                 <div class="card-footer container-fluid">
                                     <input type="text" class="form-control" id="chatMessage" placeholder="Type your message">
-                                    <button class="btn btn-primary mt-2 container-fluid" id="sendMessage">Send</button>
+                                    <button class="btn btn-primary mt-2 container-fluid" id="sendMessage" onclick="sendChatMessage()">Send</button>
                                 </div>
                             </div>
                         </div>
@@ -241,32 +241,76 @@ <h1>LEADERBOARD</h1>
     <!-- <script src="usernameValidation.js"></script> -->
 
     <script>
-        let UserId = null;
-
         class UserEvent{
             request;
             GameId;
             UserId;
+            chatMessage;
         }
 
+        let currentUser = new UserEvent;
+        currentUser.UserId = this.UserId;
+
+        var connection = null;
+        var serverUrl;
 
-        serverUrl = "ws://" + window.location.hostname +":"+ (parseInt(location.port) + 100);
+        serverUrl = "ws://" + window.location.hostname + `:${parseInt(window.location.port) + 100}`;
         connection = new WebSocket(serverUrl);
+
         connection.onopen = function (evt) {
             console.log("open");
         }
 
+        // Received a broadcast from a different client
         connection.onmessage = function(evt){
 
             let lobby = document.getElementById("lobby-body");
-            lobby.innerHTML = "";
+
             var msg;
             msg = evt.data;
+
             let obj = JSON.parse(msg);
 
             console.log("Message received: " + msg);
             console.log("NUM USERS: " + obj.length)
 
+            if('grid' in obj){ // Grid sent from server
+
+                // Generate and display the word search
+                generateWordSearch(obj.grid);
+            }
+
+            if('request' in obj){   // Is a UserEvent broadcast
+                if(obj.request == 3){   // Is a chatMessage
+                    console.log("Chat message received from broadcast: " + obj.chatMessage + "  From userid: " + obj.UserId);
+                    const chatBox = document.getElementById("chatBox");
+
+                    const para = document.createElement("p");
+                    const node = document.createTextNode(obj.UserId + ":\n" + obj.chatMessage);
+                    para.appendChild(node);
+
+                    const rAlign = document.createAttribute("align");
+                    rAlign.value = "right";
+
+                    const lAlign = document.createAttribute("align");
+                    lAlign.value = "left"; 
+
+                    console.log("Current user Id: " + currentUser);
+                    console.log("Object user Id: " + obj.UserId);
+
+                    if(currentUser == obj.UserId){
+                        para.setAttributeNode(rAlign);
+                    }
+                    else{
+                        para.setAttributeNode(lAlign);
+                    }
+
+                    chatBox.appendChild(para);
+                }
+            }
+
+            lobby.innerHTML = "";
+
             obj.forEach(function(obj){
                 console.log("OBJECT: " + obj)
                 var row = lobby.insertRow();
@@ -292,16 +336,39 @@ <h1>LEADERBOARD</h1>
                 U.request = 1;
                 connection.send(JSON.stringify(U));
                 let div = document.getElementById("log-in");
-                div.innerHTML = "";
+                div.classList.add("d-none");
             } else if (value == 2){
                 U.UserId = this.UserId;
                 U.request = 2;
                 connection.send(JSON.stringify(U));
             }
         }
 
+        function sendChatMessage(){
+            const inputBox = document.getElementById("chatMessage");
+            let msg = inputBox.value;
+
+            let limit = 40;
 
+            if(msg == ""){
+                alert("Enter a message: ");
+            }
+            else if(msg.length > limit){
+                alert("Message exceeds " + limit + " character limit. Try again.");
+            }
+            else{
+                U = new UserEvent;
+                U.request = 3;
+                U.GameId = this.GameId;
+                U.UserId = this.UserId;
+                U.chatMessage = msg;
 
+                connection.send(JSON.stringify(U)); 
+
+                // Empty message box after "sending"
+                inputBox.value = "";
+            }
+        }
 
         //document.getElementById("startMatchmakingBtn").addEventListener("click", startMatchmaking);
 
@@ -321,82 +388,55 @@ <h1>LEADERBOARD</h1>
 
     </script>
 
-
     <script>
-        /*
-        document.getElementById("startMatchmakingBtn").addEventListener("click", startMatchmaking);
-
-        function startMatchmaking() {
-            const username = document.forms["userForm"]["fname"].value;
-            if (username.trim() === "") {
-                alert("Please enter a username.");
-                return;
+        class Coordinate {
+            constructor(row, col){
+                this.row = row;
+                this.col = col;
             }
-
-            // Hide matchmaking form
-            document.getElementById("matchmaking").classList.add("d-none");
-
-            // Show game elements
-            document.getElementById("game").classList.remove("d-none");
-
-            // Update player names
-            document.getElementById("playerOneName").innerText = "@" + username.toUpperCase();
-            document.getElementById("playerTwoName").innerText = "@opponent"; // Replace "opponent" with actual opponent's name
-
-            // Start matchmaking process or any other game initialization logic
         }
-        */
+
+        function getLetterLocation(button){
+            let id = button.id;
+            let row = Math.floor(id / 10);
+            let col = id % 10;
+
+            let location = new Coordinate(row, col);
+        }
     </script>
 
     <script>
         const wordsToFind = ['apple', 'banana', 'cherry', 'grape', 'orange', 'pear', 'kiwi', 'peach', 'mango','melon' ];
-        const gridSize = 50;
-        const table = document.getElementById('wordSearchTable');
+        const gridSize = 40;
+        const gridDiv = document.getElementById('grid');
         const wordListElement = document.getElementById('wordList');
-
-        // Function to generate a random letter
-        function getRandomLetter() {
-            const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-            return alphabet[Math.floor(Math.random() * alphabet.length)];
-        }
+        const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 
         // Function to generate the word search grid
-        function generateWordSearch() {
+        function generateWordSearch(grid) {
+            let n = 0;
+
             for (let i = 0; i < gridSize; i++) {
-                const row = table.insertRow();
+                const div = document.createElement("div");
+                gridDiv.appendChild(div);
+
                 for (let j = 0; j < gridSize; j++) {
-                    const cell = row.insertCell();
-                    cell.textContent = getRandomLetter();
-                }
-            }
-        }
+                    const button = document.createElement("button");
+                    button.textContent = letters[Math.floor(Math.random() * letters.length)];
 
-        // Function to add words to the grid
-        function addWordsToGrid() {
-            for (const word of wordsToFind) {
-                const direction = Math.random() < 0.5 ? 'horizontal' : 'vertical';
-                const startX = Math.floor(Math.random() * (gridSize - word.length + 1));
-                const startY = Math.floor(Math.random() * (gridSize - word.length + 1));
+                    const buttonAttr = document.createAttribute("id");
+                    buttonAttr.value = `${n}`;
+                    button.setAttributeNode(buttonAttr);
 
-                for (let i = 0; i < word.length; i++) {
-                    const cell = direction === 'horizontal' ? table.rows[startY].cells[startX + i] : table.rows[startY + i].cells[startX];
-                    cell.textContent = word[i].toUpperCase();
-                }
-            }
-        }
+                    div.appendChild(button);
 
-        // Function to display the list of words to find
-        function displayWordList() {
+                    n++;
+                }
 
-            wordListElement.textContent = wordsToFind.sort()
-                                                     .map(word => word.toUpperCase())
-                                                     .join(', ');
+            }
         }
 
-        // Generate and display the word search
-        generateWordSearch();
-        addWordsToGrid();
-        displayWordList();
+        generateWordSearch(); // For testing. Will remove when grid is broadcasted.
     </script>
 </body>