From 07c3bc8d5c46277a46822d52726ad52d84b65ea1 Mon Sep 17 00:00:00 2001
From: Tien Dung Le <95424716+flannelboy@users.noreply.github.com>
Date: Sun, 14 Apr 2024 17:13:47 -0500
Subject: [PATCH] Update match.html

---
 html/match.html | 47 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/html/match.html b/html/match.html
index d454189..eeeea15 100644
--- a/html/match.html
+++ b/html/match.html
@@ -24,8 +24,8 @@
             width: 15rpx;
             height:15px;
             text-align: center;
-            line-height: 15px; /* Adjust the line-height */
-            margin: 0; /* Remove any default margin */
+            line-height: 15px;
+            margin: 0; 
         }
     </style>
 </head>
@@ -35,7 +35,6 @@
         <nav class="navbar navbar-expand-sm navbar-dark container">
             <a href="index.html" class="navbar-brand" ><img src="../asset/navBarIcon.png" width="200" height="70"></a>
 
-
             <!-- Create ticket to fix this, doesn't respone on click  -->
             <!-- <button class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around"
                 type="button"
@@ -51,7 +50,6 @@
 
         </button> -->
 
-
             <div class="collapse navbar-collapse" id="toggleMobileMenu">
                 <ul class="navbar-nav ms-auto text-end">
                     <li>
@@ -66,17 +64,13 @@
                     <li>
                         <a class="nav-link" href="#contact">SUPPORT</a>
                     </li>
-
-
                 </ul>
             </div>
         </nav>
     </div>
-    <div class=" custom-body h-auto">
-        <div id="home" class="container-fluid text-center flex-column d-flex justify-content-center align-items-center py-3"
-            style="height: fit-content">
-
-            <div ">
+    <div class="container custom-body h-auto">
+        <div id="home" class="container text-center d-flex justify-content-center align-items-center py-3" style="height: fit-content">
+            <div>
                 <table class="h4 table table-light">
                     <tr class="h3">
                         <td id="playerOneName">@</td>
@@ -86,15 +80,34 @@
                         <td id="playerTwoName">@</td>
                     </tr>
                 </table>
+                <p>FIND THE WORDS: <span id="wordList"></span></p>
+                <!-- Multi-user chat box -->
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-md-8">
+                            <div class="card">
+                                <div class="card-header">Chat</div>
+                                <div class="card-body" id="chatBox">
+                                    <!-- Chat messages will be displayed here -->
+                                </div>
+                                <div class="card-footer">
+                                    <input type="text" class="form-control" id="chatMessage" placeholder="Type your message">
+                                    <button class="btn btn-primary mt-2" id="sendMessage">Send</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="py-3 justify-content-center text-center flex-column d-flex container" >
-                <p >FIND THE WORDS: <span id="wordList"></span></p>
-                <table class="wordSearchTable" id="wordSearchTable"></table>
+            <div class="container">
+                <div class="py-3 justify-content-center text-center flex-column d-flex container ">
+                    <table class="wordSearchTable" id="wordSearchTable"></table>
+                </div>
+                <div class="flex"></div>
             </div>
         </div>
-        
-        
     </div>
+    
     <section data-aos="fade-up" id="contact">
         <div class="container-fluid custom-footer">
             <div id="contact"
@@ -191,4 +204,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>