Merge pull request #14 from WildCodeSchool-2023-09/homeGame

Home game

backend/src/controllers/gameControllers.js

@@ -14,6 +14,21 @@ const browse = async (req, res, next) => {
   }
 };
 
+const read = async (req, res, next) => {
+  try {
+    const games = await tables.game.read(req.params.id);
+
+    if (games == null) {
+      res.sendStatus(404);
+    } else {
+      res.status(200).json(games);
+    }
+  } catch (err) {
+    next(err);
+  }
+};
+
 module.exports = {
   browse,
+  read,
 };

backend/src/models/GameManager.js

@@ -7,11 +7,20 @@ class GameManager extends AbstractManager {
 
   async readAll() {
     const [rows] = await this.database.query(
-      `select id, image, alt from ${this.table}`
+      `select id, image, alt, description, name from ${this.table}`
     );
 
     return rows;
   }
+
+  async read(id) {
+    const [rows] = await this.database.query(
+      `select * from ${this.table} where id = ?`,
+      [id]
+    );
+
+    return rows[0];
+  }
 }
 
 module.exports = GameManager;

backend/src/router.js

@@ -15,6 +15,8 @@ router.get("/players", PlayerControllers.browse);
 router.delete("/players/:id", PlayerControllers.destroy);
 router.get("/party", PartyControllers.browse);
 router.get("/games", GameControllers.browse);
+router.get("/games/:id", GameControllers.read);
+
 router.post("/contact", ContactControllers.send);
 router.post("/players", validateUsers, hashPassword, PlayerControllers.add);
 router.post("/login", PlayerControllers.log);

frontend/src/components/ListGames.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+
+function ListGames({ games }) {
+  return (
+    <div className="all-game-list">
+      <h2 className="game-available">Jeux disponibles</h2>
+      <div className="game-list">
+        {games.map((e) => (
+          <Link to={`/games/${e.id}`} key={e.id}>
+            <img className="size-image-list" src={e.image} alt={e.alt} />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+ListGames.propTypes = {
+  data: PropTypes.array.isRequired,
+}.isRequired;
+
+export default ListGames;

frontend/src/components/carousel/Carousel.jsx

@@ -1,20 +1,18 @@
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import PropTypes from "prop-types";
 
-function Carousel({ data }) {
+function Carousel({ games }) {
   return (
     <div className="carouselContainer">
       <Splide
         aria-label="Testimonial"
         options={{
           type: "loop",
-          width: "100%",
+          Width: "100%",
           perPages: 1,
-          arrows: false,
-          pagination: false,
         }}
       >
-        {data.map((e) => (
+        {games.map((e) => (
           <SplideSlide className="splideSlide" key={e.id}>
             <ul className="thumbnails">
               <li className="thumbnail">

frontend/src/main.jsx

@@ -3,13 +3,15 @@ import ReactDOM from "react-dom/client";
 import "./style/index.scss";
 
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import connexion from "./services/connexion";
 
 import App from "./App";
 import Home from "./pages/Home";
 import AdminPage from "./pages/AdminPage";
 import AdminGame from "./pages/AdminGame";
 import AdminUsersPage from "./pages/AdminUsersPage";
 import TicTacToe from "./pages/TicTacToe";
+import InfoGame from "./pages/InfoGame";
 import Signup from "./pages/auth/Signup";
 
 const router = createBrowserRouter([
@@ -46,9 +48,16 @@ const router = createBrowserRouter([
     element: <TicTacToe />,
   },
   {
-    path: "/signup",
-    element: <Signup />,
+    path: "/games/:id",
+    element: <InfoGame />,
+    loader: async ({ params }) => {
+      return connexion
+        .get(`/games/${params.id}`)
+        .then((response) => response.data)
+        .catch((err) => console.error(err));
+    },
   },
+  { path: "/signup", element: <Signup /> },
 ]);
 
 const root = ReactDOM.createRoot(document.getElementById("root"));

frontend/src/pages/Home.jsx

@@ -2,9 +2,10 @@ import { useState, useEffect } from "react";
 import Carousel from "../components/carousel/Carousel";
 import connexion from "../services/connexion";
 import Contact from "../components/Contact/Contact";
+import ListGames from "../components/ListGames";
 
 function Home() {
-  const [data, setData] = useState([]);
+  const [games, setData] = useState([]);
   const exportData = async () => {
     try {
       const res = await connexion.get("/games");
@@ -19,7 +20,8 @@ function Home() {
 
   return (
     <div>
-      <Carousel data={data} />
+      <Carousel games={games} />
+      <ListGames games={games} />
       <Contact />
     </div>
   );

frontend/src/pages/InfoGame.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useLoaderData, Link } from "react-router-dom";
+import LeaderBoard from "../components/LeaderBoard/LeaderBoard";
+
+function InfoGame() {
+  const info = useLoaderData();
+
+  return (
+    <div className="all-page-info-game">
+      <LeaderBoard />
+      <div className="container-info-game">
+        <img className="info-image" src={info.image} alt={info.alt} />
+        <div className="name-info">
+          <h2 className="name-game">{info.name}</h2>
+          <h3 className="detail-game">Détail du jeu:</h3>
+          <p className="info-game">{info.description}</p>
+        </div>
+
+        <div className="link-go">
+          <Link className="go" to="/tictactoe">
+            JOUER
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default InfoGame;

frontend/src/style/components/Carousel.scss

@@ -8,7 +8,6 @@
     display: none;
   }
 }
-
 .thumbnail {
   width: 100%;
   overflow: hidden;
@@ -27,7 +26,6 @@
     justify-content: flex-start;
   }
 }
-
 .thumbnail img {
   width: 75%;
   height: 75%;

frontend/src/style/components/LeaderBoard/LeaderBoard.scss

@@ -84,7 +84,6 @@
     display: none;
   }
 }
-
 .menuBurguerRankingContainer {
   .leaderBoardLineContainer {
     display: flex;

frontend/src/style/components/ListGames.scss

@@ -0,0 +1,20 @@
+.game-available {
+  color: #ffffff;
+  margin-left: 16rem;
+  margin-top: 2rem;
+}
+.game-list {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #2b2d31;
+  width: 60rem;
+  margin: auto;
+  border-radius: 20px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.size-image-list {
+  width: 15rem;
+  margin: 2rem;
+}

frontend/src/style/index.scss

@@ -11,5 +11,8 @@
 @import "../style/components/DeleteButton.scss";
 @import "../style/components/InputSearchBar.scss";
 @import "./components/contact.scss";
+@import "./components/ListGames.scss";
+@import "./pages/Home.scss";
+@import "./pages/InfoGame.scss";
 @import "./components/InputComponents.scss";
 @import "../style/pages/Signup.scss";

frontend/src/style/pages/Home.scss

@@ -0,0 +1,3 @@
+.container-home {
+  background-color: #383a40;
+}

frontend/src/style/pages/InfoGame.scss

@@ -0,0 +1,53 @@
+.all-page-info-game {
+  display: flex;
+  flex-direction: row;
+}
+.container-info-game {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 8rem;
+}
+.info-image {
+  border: solid;
+  border-width: 22px;
+  border-radius: 15px;
+  border-color: #2b2d31;
+  width: 50rem;
+  margin: 5rem;
+}
+.name-info {
+  background-color: #2b2d31;
+  color: #ffffff;
+  width: 50rem;
+  padding: 2rem;
+  border-radius: 15px;
+}
+.name-game {
+  font-size: 1rem;
+}
+.detail-game {
+  font-size: 1rem;
+  padding: 0;
+  margin-top: 3rem;
+}
+.info-game {
+  background-color: #383a40;
+}
+.link-go {
+  display: flex;
+}
+.go {
+  background-color: #5865f2;
+  color: #ffffff;
+  width: 7rem;
+  height: 2.5rem;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 39rem;
+  margin-top: 1rem;
+}
+@media (max-width: 900px) {
+}

frontend/src/style/settings.scss

@@ -4,7 +4,6 @@
   box-sizing: border-box;
   font-family: "Montserrat", sans-serif;
 }
-
 :root {
   --main-bg-color: #383a40;
   --primary-color: #2b2d31;
@@ -13,7 +12,6 @@
   --button-color: #5865f2;
   --user-color: #e59834;
 }
-
 li {
   list-style: none;
 }