Handling welcoming and leaving events

AbdelrahmanNoaman · Jul 22, 2023 · de4664c · de4664c
1 parent 967d67f
commit de4664c
Show file tree

Hide file tree

Showing 9 changed files with 512 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "moment": "^2.29.4",
+    "mysql2": "^3.5.2",
     "nodemon": "^3.0.1",
     "path": "^0.12.7",
     "socket.io": "^4.7.1"

diff --git a/public/chat.html b/public/chat.html
@@ -20,10 +20,42 @@ <h3 class="room-id"></h3>
       </header>
       <main class="chat-main">
         <div class="chat-sidebar">
+
           <h3><i class="fas fa-comments"></i> Room Name:</h3>
           <h2 id="room-name"></h2>
-          <h3><i class="fas fa-users"></i> Users</h3>
-          <ul id="users"></ul>
+
+          <div>
+            <div class="add-users">
+              <h3><i class="fas fa-users"></i> Team One</h3>
+              <button class="chat-button" id="add-waiting">ADD</button>
+            </div>  
+              <ul id="team-one"></ul>
+          </div>
+
+          <div>
+            <div class="add-users">
+              <h3><i class="fas fa-users"></i> Team Two</h3>
+              <button class="chat-button" id="add-waiting">ADD</button>
+            </div>  
+              <ul id="team-two"></ul>
+          </div>
+
+          <div>
+            <div class="add-users">
+              <h3><i class="fas fa-user"></i> Referee</h3>
+              <button class="chat-button" id="add-waiting">ADD</button>
+            </div>  
+              <ul id="referee"></ul>
+          </div>
+
+          <div>
+              <div class="add-users">
+                <h3><i class="fas fa-users"></i> Waiting users</h3>
+                <button class="chat-button" id="add-waiting">ADD</button>
+              </div>  
+                <ul id="waiting-users"></ul>
+          </div>
+
         </div>
         <div class="chat-messages"></div>
       </main>

diff --git a/public/css/style.css b/public/css/style.css
@@ -41,9 +41,9 @@ a {
 /* Chat Page */
 
 .chat-container {
-  max-width: 1100px;
+  max-width: 1200px;
   background: #fff;
-  margin: 100px auto;
+  margin: 120px auto;
   overflow: hidden;
 }
 
@@ -179,13 +179,46 @@ a {
   width: 100%;
 }
 
-.main-container{
+.main-container {
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
 }
 
+.add-users {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.chat-button {
+  padding: 2px 10px;
+  border-radius: 15px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  -ms-border-radius: 15px;
+  -o-border-radius: 15px;
+  background-color: #b0bafc;
+  border-color: transparent;
+  max-height: 25px;
+  transition: 0.7s;
+  -webkit-transition: 0.7s;
+  -moz-transition: 0.7s;
+  -ms-transition: 0.7s;
+  -o-transition: 0.7s;
+}
+
+.chat-button:hover {
+  background-color: #2e3878;
+  color: white;
+  transform: scale(1.15);
+  -webkit-transform: scale(1.15);
+  -moz-transform: scale(1.15);
+  -ms-transform: scale(1.15);
+  -o-transform: scale(1.15);
+}
+
 @media (max-width: 700px) {
   .chat-main {
     display: block;