commit

src/App.jsx

@@ -1,5 +1,9 @@
 import { useState } from 'react';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+library.add(fas)
 
 import Home from './pages/Home';
 import Login from './pages/Login';

src/assets/HelpButton.css

@@ -1,7 +0,0 @@
-.helpButton-enabled {
-    background-color: green;
-}
-
-.helpButton-disabled {
-    background-color: red;
-}

src/assets/HelpButton.jsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import axios from 'axios';
 
-import './HelpButton.css';
-
 export default function HelpButton({ gameid, helpingprop, token }) {
     const [helping, setHelping] = useState(helpingprop);
+    console.log("helpingprop:", helpingprop)
 
     function addHelper() {
         axios.post("http://leizour.fr:3000/api/v1/games/addHelper", { token, gameid })
@@ -19,6 +19,7 @@ export default function HelpButton({ gameid, helpingprop, token }) {
     }
 
     function handleClick(event) {
+        console.log("helping:", helping)
         if (helping) {
             removeHelper();
         } else {
@@ -37,6 +38,6 @@ export default function HelpButton({ gameid, helpingprop, token }) {
     }, [helping]);
 
     return (
-        <button className="helpButton" id={`helpbutton-${gameid}`} onClick={handleClick}>Set helper</button>
+        <button className="helpButton" id={`helpbutton-${gameid}`} onClick={handleClick}>{helping ? <FontAwesomeIcon icon="fa-solid fa-book-bookmark" /> : <FontAwesomeIcon icon="fa-solid fa-book" />}</button>
     )
 }

src/pages/Home.css

@@ -0,0 +1,106 @@
+body {
+    text-align: center;
+    background-color: #66c6d6;
+    font-family: sans-serif;
+}
+
+.page-title {
+    font-size: 50px;
+}
+
+.home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
+
+.logout-button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+    background-color: #d45555;
+}
+
+.search {
+    margin: 20px;
+}
+
+.search-input {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin: 20px;
+}
+
+.pagination-button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.games {
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+    gap: 20px;
+}
+
+.game {
+    padding: 30px;
+    background-color: white;
+    display: flex;
+    border-radius: 60px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    justify-content: space-between;
+}
+
+.game-image {
+    height: 250px;
+    margin-left: 20px;
+}
+
+.game-right {
+    width: 55vw;
+    margin-right: 15vw;
+}
+
+.game-bottom {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    gap: 15px;
+}
+
+.helper {
+    background-color: #b4d666;
+    padding: 7px 10px;
+    border-radius: 15px;
+}
+
+.no-helper {
+    background-color: #d66666;
+    padding: 7px 10px;
+    border-radius: 15px;
+}
+
+.helpButton {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.helpButton-enabled {
+    background-color: #8caf39;
+}
+
+.helpButton-disabled {
+    background-color: #d45555;
+}

src/pages/Home.jsx

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import axios from "axios";
 
+import './Home.css';
+
 import HelpButton from '../assets/HelpButton';
 
 export default function Home() {
@@ -10,6 +13,7 @@ export default function Home() {
   const [token, setToken] = useState();
   const [games, setGames] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [userloading, setUserLoading] = useState(true);
   const [name, setName] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
 
@@ -22,6 +26,7 @@ export default function Home() {
 
     setToken(tokenLocal);
     setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user);
+    setUserLoading(false);
 
     async function fetchGames() {
       setLoading(true);
@@ -72,53 +77,73 @@ export default function Home() {
 
   return (
     <div>
-      <div>
-        <h1>Home</h1>
+      <h1 className='page-title'>Base de données des jeux Joclud</h1>
+      <div className='home'>
+        <h2 className='welcome'>Bienvenue, {userloading ? "..." : user.name} !</h2>
         <button onClick={() => {
           localStorage.removeItem("token");
           navigate("/login");
-        }}>Logout</button>
+        }} className='logout-button'>
+          Me déconnecter
+        </button>
+      </div>
+      <div className='search'>
+        <input type="text" value={name} onChange={handleSearchChange} className='search-input' placeholder='Chercher un jeu'/>
       </div>
-      Recherche : <input
-        type="text"
-        value={name}
-        onChange={handleSearchChange}
-      />
       <div className="pagination">
-        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
-          Previous
+        <button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-angles-left" />
         </button>
-        <span>Page {currentPage} of {totalPages}</span>
-        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
-          Next
+        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-chevron-left" />
+        </button>
+        <span className='pagination-text'>Page {currentPage} sur {totalPages}</span>
+        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+        </button>
+        <button onClick={() => handlePageChange(totalPages)} disabled={currentPage === totalPages} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-angles-right" />
         </button>
       </div>
-      {loading ? (
-        <div>Loading...</div>
-      ) : (
-        currentGames.map((game) => (
-          <div className='game'>
-            <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} />
-            <h1 className='game-title'>{game.title}</h1>
-            <div className='helpers'>
-              {(JSON.parse(game.helpers).map((helper) => (
-                helper === user.username ? () => { } : (
-                  <div className='helper'>
-                    <h2 className='helper-title'>{helper}</h2>
+      <div className='games'>
+        {loading ? (
+          <div>Loading...</div>
+        ) : (
+          currentGames.map((game) => (
+            <div className='game'>
+              <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} className='game-image'/>
+              <div className='game-right'>
+                <h1 className='game-title'>{game.title}</h1>
+                <div className='game-bottom'>
+                  <div className='helpers'>
+                    {JSON.parse(game.helpers).length === 0 ? (
+                      <p className='no-helper'>Aucun membre ne connait les rêgles</p>
+                    ) :
+                    (JSON.parse(game.helpers).map((helper) => (
+                      helper === user.username ? () => { } : (
+                        <p className='helper'>{helper}</p>
+                      ))))}
                   </div>
-                ))))}
+                  <HelpButton gameid={game.id} helpingprop={JSON.parse(game.helpers).includes(user.username)} token={token} />
+                </div>
+              </div>
             </div>
-            <HelpButton gameid={game.id} helpingprop={JSON.parse(game.helpers).includes(user.id)} token={token} />
-          </div>
-        ))
-      )}
+          ))
+        )}
+      </div>
       <div className="pagination">
-        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
-          Previous
+        <button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-angles-left" />
         </button>
-        <span>Page {currentPage} of {totalPages}</span>
-        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
-          Next
+        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-chevron-left" />
+        </button>
+        <span className='pagination-text'>Page {currentPage} sur {totalPages}</span>
+        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+        </button>
+        <button onClick={() => handlePageChange(totalPages)} disabled={currentPage === totalPages} className="pagination-button">
+          <FontAwesomeIcon icon="fa-solid fa-angles-right" />
         </button>
       </div>
     </div>

src/pages/Login.css

@@ -0,0 +1,23 @@
+body {
+    text-align: center;
+    background-color: #66c6d6;
+}
+
+.login {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.input {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}

src/pages/Login.jsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
 import { useNavigate, Link } from "react-router-dom";
 import axios from 'axios';
 
+import './Login.css';
+
 export default function Login() {
   const navigate = useNavigate();
 
@@ -35,20 +37,12 @@ export default function Login() {
   }
 
   return (
-    <div>
-      <h1>Login</h1>
-      <div>
-        <div>
-          Usename : <input type="text" id="username"/>
-        </div>
-        <div>
-          Password : <input type="password" id="password"/>
-        </div>
-        <div>
-          <button onClick={login}>Login</button>
-        </div>
-      </div>
-      <Link to="/register">Create an account</Link>
+    <div className='login'>
+      <h1>Connexion</h1>
+      <input type="text" id="username" className='input' placeholder="Nom d'utilisateur"/>
+      <input type="password" id="password" className='input' placeholder='Mot de passe'/>
+      <button onClick={login} className='button'>Me connecter</button>
+      <Link to="/register">Créer un compte</Link>
     </div>
   )
 }

src/pages/Register.css

@@ -0,0 +1,23 @@
+body {
+    text-align: center;
+    background-color: #66c6d6;
+}
+
+.register {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.input {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}

src/pages/Register.jsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
 import { useNavigate, Link } from "react-router-dom";
 import axios from 'axios';
 
+import './Register.css';
+
 export default function Register() {
     const navigate = useNavigate();
 
@@ -43,26 +45,16 @@ export default function Register() {
     }
 
     return (
-        <div>
-          <h1>Create an account</h1>
+        <div className='register'>
+          <h1>Création de compte</h1>
+            <input type="text" id="username" placeholder="Nom d'utilisateur" className='input'/>
+            <input type="text" id="name" placeholder='Prénom' className='input'/>
+            <input type="text" id="lastname" placeholder='Nom de famille' className='input'/>
+            <input type="password" id="password" placeholder='Mot de passe' className='input'/>
           <div>
-            <div>
-              Usename : <input type="text" id="username"/>
-            </div>
-            <div>
-              Name : <input type="text" id="name"/>
-            </div>
-            <div>
-              Last name : <input type="text" id="lastname"/>
-            </div>
-            <div>
-              Password : <input type="password" id="password"/>
-            </div>
-            <div>
-              <button onClick={register}>Create an account</button>
-            </div>
+            <button onClick={register} className='button'>Créer un compte</button>
           </div>
-          <Link to="/login">Login with my account</Link>
+          <Link to="/login">Me connecter avec mon compte</Link>
         </div>
     )
 }