Worked on Player's game page

client/src/App.js

@@ -1,20 +1,17 @@
-import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
-
 import "./App.css";
-import HomePage from "./Pages/Homepage.js/Homepage"
-import MainGame from "./Pages/GameScreen/MainGame"
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import * as ROUTES from './constants/routes';
+import { Homepage, MainGame, SpectatorsGameScreen } from "./Pages";
 
 function App() {
   return (
-    <div className="App">
-      <Router>
-        <Switch>
-          <Route exact path='/' render={HomePage} />
-          <Route exact path='/game' render={MainGame} />
-        </Switch>
-      </Router>
-     {/* <HomePage /> */}
-    </div>
+    <Router>
+      <Switch>
+        <Route exact path={ROUTES.HOME} component={Homepage}/>
+        <Route exact path={ROUTES.PLAYERSGAMESCREEN} component={MainGame}/>
+        <Route exact path={ROUTES.SPECTATORSGAMESCREEN} component={SpectatorsGameScreen}/>
+      </Switch>
+    </Router>
   );
 }
 

client/src/Pages/Homepage/Homepage.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import MiniBoard from "../../components/MiniBoard/MiniBoard";
+
+export default function Homepage() {
+  return <div>
+    <MiniBoard id="234" playerOne="Annietah" playerTwo="codeJonin" />
+      <MiniBoard id="234" playerOne="" playerTwo="codeJonin" />
+  </div>
+}

client/src/Pages/InviteNotification/InviteNotification.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function InviteNotification() {
+  return <></>
+}

client/src/Pages/PlayersGameScreen/MainGame.css

@@ -0,0 +1,42 @@
+main {
+  border: 1px solid #616161;
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+#chessboard_container {
+  width: 70%;
+  box-sizing: border-box;
+  font-size: 5rem;
+  min-height: 80vh;
+  text-align: center;
+  padding-top: 15rem;
+}
+
+#side_container {
+  box-sizing: border-box;
+  border-left: 1px solid #616161;
+  width: 30%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.btn_container {
+  padding: 1.2rem;
+}
+
+@media only screen and (max-width: 600px) {
+  main {
+    flex-direction: column;
+  }
+  #chessboard_container {
+    width: 100%;
+  }
+  #side_container {
+    width: 100%;
+  }
+}

client/src/Pages/PlayersGameScreen/MainGame.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ExitButton from '../../components/Button/ExitButton';
+import Comments from '../../components/Comments/Comments';
+import './MainGame.css';
+
+export default function MainGame() {
+  return <main>
+    <div id="chessboard_container">
+      Chessboard stays here
+    </div>
+    <div id="side_container">
+     <div className="btn_container"> <ExitButton /></div>
+      <Comments />
+    </div>
+  </main>
+}

client/src/Pages/SpectatorsGameScreen/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function SpectatorsGameScreen() {
+  return <></>
+}

client/src/Pages/index.js

@@ -0,0 +1,3 @@
+export { default as Homepage } from './Homepage/Homepage'
+export { default as MainGame } from './PlayersGameScreen/MainGame';
+export { default as SpectatorsGameScreen } from './SpectatorsGameScreen'; 

client/src/components/Comments/Comments.css

@@ -0,0 +1,85 @@
+.comments_container {
+  position: relative;
+  background-color: transparent;
+  box-sizing: border-box;
+}
+
+.comments_container .title {
+  color: #00B87C;
+  padding: 1.2rem;
+  border-bottom: .4rem solid #00B87C;
+  font-size: 2rem;
+}
+
+.comments_container .comments {
+  padding: 1.2rem;
+  font-size: 1.8rem;
+  position: relative;
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.comments_container .comments::-webkit-scrollbar {
+  width: 8px;
+  background-color:#F3F1F1; 
+}
+
+.comments_container .comments::-webkit-scrollbar-thumb {
+  background-color: #CCCCCC;
+  border-radius: 10px;
+}
+
+.comments_container .text-muted {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: normal;
+  font-style: italic;
+  font-size: 1.6rem;
+  line-height: 1.9rem;
+  width: 100%;
+  text-align: center;
+  color: #747474;
+}
+
+.comment_container {
+  display: flex;
+  flex-direction: row;
+  align-items: top;
+  margin-bottom: 1.5rem;
+}
+
+.comment_container img {
+  width: 4rem;
+  vertical-align: middle;
+  height: auto;
+  margin-top: -3rem;
+  margin-right: 1rem;
+}
+
+.name {
+  font-style: normal;
+  font-weight: 900;
+  font-size: 1.6rem;
+  line-height: 1.9rem;
+  color: #242424;
+  margin-right: .8rem;
+}
+
+.faded {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 1.9rem;
+  color: #C1C1C1;
+  text-transform: uppercase;
+}
+
+.comment {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1.5rem;
+  line-height: 140%;
+  color: #3A3A3A;
+}

client/src/components/Comments/Comments.js

@@ -0,0 +1,43 @@
+import React from "react";
+import commentsData from "./comments.json";
+import "./Comments.css";
+import avatar from "../../assets/avatar.svg";
+
+export default function Comments() {
+  return (
+    <div className="comments_container">
+      <div className="title">Comments</div>
+      <div className="comments">
+        {!commentsData.length ? (
+          <span className="text-muted">Spectators' comments go here</span>
+        ) : (
+          commentsData.map((item, id) => {
+            return (
+              <div key={`comment-${id + 1}`} className="comment_container">
+                <img src={avatar} alt="" />
+                <div>
+                  <div>
+                    <span className="name">{item.name}</span>{" "}
+                    <span className="faded">{item.time}</span>
+                  </div>
+                  <p className="comment">{item.comment}</p>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+
+// <div
+//   key={`comment-${id + 1}`}
+//   className="comment-container"
+// >
+//   <img src={item.avatar}/>
+//   <div>
+//     <div><span>{item.name}</span> <span>{item.time}</span></div>
+//     <p>{item.comment}</p>
+//   <div>
+// </div>

client/src/components/Comments/comments.json

@@ -0,0 +1,102 @@
+[
+  {
+    "name": "TechLead",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "techyNkem",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Trustiee",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "saAR_Jhoel",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Prolifiq",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "TechLead",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "techyNkem",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Trustiee",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "saAR_Jhoel",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Prolifiq",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "TechLead",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "techyNkem",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Trustiee",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "saAR_Jhoel",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Prolifiq",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "TechLead",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "techyNkem",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Trustiee",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "saAR_Jhoel",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  },
+  {
+    "name": "Prolifiq",
+    "comment": "You have not still mastered the tricks of winning me..haha.",
+    "time": "10:02am" 
+  }
+]

client/src/constants/routes.js

@@ -0,0 +1,3 @@
+export const HOME = '/';
+export const PLAYERSGAMESCREEN = '/game';
+export const SPECTATORSGAMESCREEN = '/watch_game';