Created the chats components that allows spectators to pass comments while viewing ongoing games.

client/package.json

@@ -6,8 +6,13 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+<<<<<<< HEAD
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.33",
+=======
     "chess.js": "^0.12.0",
     "chessboardjsx": "^2.4.7",
+>>>>>>> b0138eb2bd923e8a16b67354e8f197dfaab39a7e
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",

client/src/App.js

@@ -7,9 +7,23 @@ import GameScreen2 from './Pages/GameScreen2';
 import MainGame from "./Pages/GameScreen/MainGame";
 // import Input from './components/Chat/Input/Input';
 
+
 function App() {
   return (
     <div className="App">
+<<<<<<< HEAD
+      <header class="main-header">
+        <nav>
+          <h1 id="logo">Chess Board Room Plugin</h1>
+        </nav>
+      </header>
+      <section class="hero">
+        <h2>Welcome to the Chess Board Update</h2>
+
+        <button>Start Game</button>
+      </section>
+
+=======
       <Router>
         <Switch>
           <Route exact path='/' render={HomePage} />
@@ -18,6 +32,7 @@ function App() {
         </Switch>
       </Router>
 
+>>>>>>> b0138eb2bd923e8a16b67354e8f197dfaab39a7e
     </div>
   );
 }

client/src/components/Comment/Chat.js

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import "./index.css";
+import moment from "moment";
+import avi from "../../assets/ChatAvatar.png";
+
+
+const data = {
+  players: [
+    {
+      id: 10,
+      name: "Abiola",
+    },
+    {
+      id: 11,
+      name: "Ode",
+    },
+  ],
+  comments: [
+
+    {
+      id: 1,
+      name: "Abby",
+      message: "@Yemyemm, I challenge you to a match when these guys are done",
+    },
+    {
+      id: 2,
+      name: "Success",
+      message: "My teammates are frustrated, maybe a game can help them",
+    },
+    {
+      id: 3,
+      name: "DevPriest",
+      message: "Move the queen next",
+    },
+    {
+      id: 4,
+      name: "Blaze",
+      message: "Who wants to challenge me after this game",
+    },
+    {
+      id: 5,
+      name: "Odiri",
+      message: "I am a proud goat",
+    },
+  ],
+};
+
+const mainUser = {
+  id: 1,
+  name: "Adebola",
+  message: "hello there",
+};
+
+function Comment() {
+  const [message, setMessage] = useState("");
+  const [details, setDetails] = useState([]);
+  const [players, setPlayers] = useState([]);
+
+  useEffect(() => {
+    const ids = data.players.map((player) => player.id);
+    setDetails(data.comments);
+    setPlayers(ids);
+  }, []);
+
+  console.log(players);
+
+  const submitForm = () => {
+    const time = moment().format('h:mm a');
+    const submitted = {
+      id: 5,
+      message,
+      name: "Yemyemm",
+      time,
+    };
+
+    setDetails([...details, submitted]);
+    setMessage("");
+  };
+
+  return (
+    <div className="chatContainer">
+      {details.length ? (
+        details.map(({ id, name, time, message}) => (
+          <div className="chatWrapper"
+           key={id}>
+           <img className= "specAvi" src={avi} alt="avi" img/>
+           <div className="specNameTime">
+               <div className="specInfo">
+            <h2 className="spectatorName">{name}</h2>
+            {time ? <p className="time-muted">{time}</p> : null}
+            </div>
+            <p className="spectatorMessage">{message}</p>
+            </div>
+          </div>
+        ))
+      ) : (
+        <p>Loading</p>
+      )}
+
+{players.includes(mainUser.id) ? null : (
+        <>
+        <div className="chatInputForm">
+          <input 
+            type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+          />
+          <button onClick={submitForm}>submit</button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Comment;

client/src/components/Comment/index.css

@@ -0,0 +1,75 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300&display=swap');
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+.chatContainer {
+    width:100%;
+    max-height: 80vh;
+    padding: 2rem;
+    overflow-y: scroll;
+    font-family: 'Lato', sans-serif;
+    position: relative;
+}
+.chatWrapper {
+    width: 100%;
+    line-height: 2rem; 
+    background:white;
+    display: flex;
+    margin: 1rem 0;
+}
+.specNameTime {
+ line-height: 3rem;
+ margin: 0 0 1rem 2rem;
+}
+.spectatorName {
+    font-size: 1.7rem;
+    font-weight: 600;
+    margin-right: 1rem ;
+}
+.specInfo {
+    display: flex;
+}
+.time-muted{
+    color: gray;
+    font-size: 1.4rem;
+    text-transform: uppercase;
+}
+.specAvi {
+    background-color: rgb(215, 219, 150);
+    margin:.5rem 1rem;
+    max-height: 3rem;
+    max-width: 4rem;
+}
+.spectatorMessage {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 300;
+}
+
+.chatInputForm {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 1rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.chatInputForm > input {
+    height: 4rem;
+    margin: 2rem auto;
+    width: 85%;
+}
+.chatInputForm > button {
+    margin: 2rem 1rem;
+    width: 50%;
+    margin: 0 auto;
+}
+
+