working on the chat feature

utastudents · Apr 25, 2024 · 7631c0a · 7631c0a
1 parent 9494ed0
commit 7631c0a
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/html/index.html b/html/index.html
@@ -87,7 +87,7 @@
             border-radius: 20px;
             background-color: #c4c4c4;
             padding: 10px;
-
+            overflow: auto;
             z-index: 1;
         }
 
@@ -301,11 +301,8 @@ <h1>TheWordSearchGame Lobby</h1>
         </div>
 
         <div class="chat-container" id="chatBox">
-            <h2><center>Chat</center></h2>
-            <!-- <label for="msg">Select who you would like to message</label> -->
-            <!-- <button class="contact-button" type="button">All Players</button> -->
-
-            <!-- <p>Player 1: Hello everyone</p> -->
+            <h2><center>Global Chat</center></h2>
+
             <textarea placeholder="Your Message" name="msg" required></textarea>
             <button class="chat-button" type="button" onclick="sendMessage()">Send Message</button>
         </div>
@@ -400,6 +397,7 @@ <h1>HappySearching!</h1>
             // U.playerIdx = "userInfo";
             document.querySelector(".content").style.display = "none";
             document.getElementById("lobby").style.display = "flex";
+            // document.getElementById("chatBox").style.display = "block";
 
             // connection.send(JSON.stringify(U));
             // console.log(JSON.stringify(U));
@@ -431,8 +429,23 @@ <h1>HappySearching!</h1>
             document.getElementById("lobby").style.display = "flex";
         }
 
-        function sendMessageToAll() {
-            document.getElementById(event);
+        function sendMessage() {
+            var username = document.getElementById("nick").value;
+            var message = document.querySelector("#chatBox textarea").value;
+            var formattedMessage = username + ": " + message;
+            var chatBox = document.getElementById("chatBox");
+            var messageElement = document.createElement("p");
+            messageElement.textContent = formattedMessage;
+            chatBox.appendChild(messageElement);
+            document.querySelector("#chatBox textarea").value = "";
+
+            var messageData = {
+                name: username,
+                message: message
+            };
+
+            connection.send(JSON.stringify(messageData));
+
         }
 
     </script>