Created a game section for users to watch and switch between games

client/package.json

@@ -6,10 +6,11 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.33",
+    "bootstrap": "^5.1.0",
     "chess.js": "^0.12.0",
     "chessboardjsx": "^2.4.7",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.33",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",

client/src/App.js

@@ -1,4 +1,5 @@
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 import "./App.css";
 import HomePage from "./Pages/Homepage.js/Homepage";

client/src/components/Games/Games.jsx

@@ -1,3 +1,5 @@
+import Gamesection from "./gamesection";
+
 const Games = () => {
   return (
     <div
@@ -10,6 +12,7 @@ const Games = () => {
       }}
     >
       <h1>Games Component</h1>
+      <Gamesection />
     </div>
   );
 };

client/src/components/Games/game.css

@@ -0,0 +1,131 @@
+.container{
+    width: 100%;
+    padding: 5rem;
+
+
+}
+.figcaption .btn-1{
+
+    top: 8rem;
+    right: 10rem;
+    width: 200px;
+    height: 5rem;
+    padding: 1rem;
+
+
+}
+.figcaption .btn-2{
+    top: 13rem;
+    right: 10rem;
+    width: 200px;
+    height: 5rem;
+    padding: 1rem;
+
+
+}
+
+.img-fluid1{
+    position: relative;
+    width: 280px;
+    height: 250px;
+    right: 7rem;
+    bottom: 3.5rem;
+    background: rgba(0, 0, 0, 0.5);
+    margin-top: 1rem;
+} 
+.img-fluid2{
+    position: relative;
+    width: 280px;
+    height: 250px;
+    right: 7rem;
+    top: 2rem;
+    background: rgba(0, 0, 0, 0.5);
+    margin-bottom: 3.5rem;
+
+}
+.btn-1{
+    background-color: #1DB386;
+    border-radius: 0.5rem;
+    font-size: 1.5rem;
+    width: 200px;
+    height: 39px;
+    color:white;
+    position: absolute;
+
+
+}
+.btn-2{
+    background-color: #1DB386;
+    border-radius: 0.5rem;
+    width: 200px;
+    height: 39px;
+    font-size: 1.5rem;
+    color:white;
+    position: absolute;
+
+
+}
+.pic1{
+    position: absolute;
+    height: 40px;
+    width: 40px;
+    bottom: 31.5rem;
+    right: 25rem;
+
+}
+.pic2{
+    position: absolute;
+     bottom: 1rem;
+    height: 40px;
+    width: 40px;
+    left: 6rem;
+}
+.pic3{
+    position: absolute;
+    bottom: 29rem;
+    height: 40px;
+    width: 40px;
+    right: 25rem;
+
+}
+.pic4{
+    position: absolute;
+    top: 29rem;
+    height: 40px;
+    width: 40px;
+    left: 8rem;
+    margin-bottom: 2rem;
+}
+.text1{
+    position: relative;
+    bottom: 5rem;
+    left: 2rem;
+    font-size: 1rem ;
+    color: rgb(72, 70, 70);
+
+}
+.text2{
+    position: relative;
+    left: 11rem;
+    bottom: 2.5rem;
+    font-size: 1rem ;
+    color: rgb(72, 70, 70);
+}
+.text3{
+    position: relative;
+    bottom: 0.5rem;
+    font-size: 1rem ;
+    left: 2rem;
+    color: rgb(72, 70, 70);
+}
+.text4{
+    position: relative;
+    left: 13rem;
+    bottom: 0.3rem;
+    font-size: 1rem ;
+    color: rgb(72, 70, 70);
+}
+
+@media screen and (max-width: 978px){
+
+}

client/src/components/Games/gamesection.js

@@ -0,0 +1,44 @@
+import React from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import './game.css';
+
+
+
+import Chessboard from "../../assets/Chessboard.png";
+import Ellipse134 from "../../assets/Ellipse134.png";
+import Ellipse133 from "../../assets/Ellipse133.png";
+import Ellipse135 from "../../assets/Ellipse135.png";
+import Ellipse136 from "../../assets/Ellipse136.png";
+
+function Gamesection() {
+  return (
+   <div className = "container">
+     <figure className="position-relative">
+      <img src ={Ellipse134}  className="pic1" alt="ellipse"/> 
+     <div className= "text1"> @dejavu</div>
+
+     <div className="figcaption">
+    <img src ={Chessboard} alt="chessboard" className="img-fluid1"/>
+     <button className="btn-1"> Watch game</button>
+     </div>
+
+     <img src ={Ellipse133} className="pic2" alt="ellipse"/>
+     <div className= "text2"> Techlead</div>
+     </figure>
+     <br></br>
+     <figure className="position-relative">
+
+     <img src ={Ellipse135} className="pic3" alt="ellipse"/>
+     <div className= "text3"> @kemi</div>
+     <div className="figcaption">
+     <img src ={Chessboard} alt="chessboard" className="img-fluid2"/>
+     <button className="btn-2">Watch game</button>
+     </div>
+     <img src ={Ellipse136} className="pic4" alt="ellipse"/>
+     <div className= "text4"> Ademola</div>
+     </figure>
+     </div>
+  );
+}
+
+export default Gamesection;

client/yarn.lock

@@ -2906,6 +2906,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.0.tgz#543ef8f44f4b9af67b0230f19508542fec38ef55"
+  integrity sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"