commit

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-regular-svg-icons": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "axios": "^1.7.2",
@@ -827,6 +828,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.7.2",

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.jsx

@@ -2,8 +2,10 @@ 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'
+import { far } from '@fortawesome/free-regular-svg-icons';
 
-library.add(fas)
+
+library.add(fas, far)
 
 import Home from './pages/Home';
 import Login from './pages/Login';

src/assets/Game.jsx

@@ -0,0 +1,27 @@
+import Helpers from "./Helpers"
+
+export default function Game({game, token, user}) {
+    function getCode(id) {
+        const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+        const base = alphabet.length;
+        let firstLetterIndex = Math.floor(id / base);
+        let secondLetterIndex = id % base;
+    
+        let firstLetter = alphabet[firstLetterIndex];
+        let secondLetter = alphabet[secondLetterIndex];
+    
+        return firstLetter + secondLetter;
+    }
+
+    return (
+        <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'>
+                    <Helpers gameid={game.id} user={user} token={token} />
+                </div>
+              </div>
+        </div>
+    )
+}

src/assets/HelpButton.jsx

@@ -1,51 +0,0 @@
-import { useEffect, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import axios from 'axios';
-
-export default function HelpButton({ gameid, token, user }) {
-    const [helping, setHelping] = useState();
-
-    function addHelper() {
-        axios.post("https://leizour.fr/api/v1/games/addHelper", { token, gameid })
-            .then(() => setHelping(true))
-            .catch((error) => console.error("Error adding helper"));
-    }
-
-    function removeHelper() {
-        axios.post("https://leizour.fr/api/v1/games/removeHelper", { token, gameid })
-            .then(() => setHelping(false))
-            .catch((error) => console.error("Error removing helper"));
-    }
-
-    function handleClick(event) {
-        if (helping) {
-            removeHelper();
-        } else {
-            addHelper();
-        }
-    }
-
-    useEffect(() => {
-        async function fetchGame() {
-            const response = await axios.post("https://leizour.fr/api/v1/games/getGame", { token, gameid })
-                .catch((error) => console.error("Error getting game"));
-            setHelping(JSON.parse(response.data.helpers).includes(user.username));
-        }
-
-        fetchGame();
-    }, [gameid]);
-
-    useEffect(() => {
-        if (helping) {
-            document.getElementById(`helpbutton-${gameid}`).classList.add("helpButton-enabled");
-            document.getElementById(`helpbutton-${gameid}`).classList.remove("helpButton-disabled");
-        } else {
-            document.getElementById(`helpbutton-${gameid}`).classList.remove("helpButton-enabled");
-            document.getElementById(`helpbutton-${gameid}`).classList.add("helpButton-disabled");
-        }
-    }, [helping]);
-
-    return (
-        <button className="helpButton" id={`helpbutton-${gameid}`} onClick={handleClick}>{helping ? <FontAwesomeIcon icon="fa-solid fa-book-bookmark" /> : <FontAwesomeIcon icon="fa-solid fa-book" />}</button>
-    )
-}

src/assets/Helpers.jsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import axios from 'axios';
+
+export default function Helpers({ gameid, user, token }) {
+    const [helpers, setHelpers] = useState([]);
+    const [gameLoading, setGameLoading] = useState(true);
+    const [helping, setHelping] = useState();
+
+    useEffect(() => {
+        async function fetchGame() {
+            const response = await axios.post("https://leizour.fr/api/v1/games/getGame", { token, gameid })
+                .catch((error) => console.error("Error getting game"));
+            setHelpers(JSON.parse(response.data.helpers));
+            setHelping(JSON.parse(response.data.helpers).includes(user.username));
+            setGameLoading(false);
+        }
+
+        fetchGame();
+    }, [gameid, helping]);
+
+    function addHelper() {
+        axios.post("https://leizour.fr/api/v1/games/addHelper", { token, gameid })
+            .then(() => setHelping(true))
+            .catch((error) => console.error("Error adding helper"));
+    }
+
+    function removeHelper() {
+        axios.post("https://leizour.fr/api/v1/games/removeHelper", { token, gameid })
+            .then(() => setHelping(false))
+            .catch((error) => console.error("Error removing helper"));
+    }
+
+    function handleClick(event) {
+        if (helping) {
+            removeHelper();
+        } else {
+            addHelper();
+        }
+    }
+
+    if (gameLoading) {
+        return <p>Loading...</p>
+    }
+
+    else if (helpers.length === 0) {
+        return (
+            <div className='helpers'>
+                <p className='no-helper'><FontAwesomeIcon icon="fa-regular fa-face-frown-open" /> Personne</p>
+                <button className={`helpButton ${helping ? "helpButton-enabled" : "helpButton-disabled"}`} 
+                        id={`helpbutton-${gameid}`} 
+                        onClick={handleClick}>
+                        {helping ? <FontAwesomeIcon icon="fa-solid fa-book-bookmark" /> : <FontAwesomeIcon icon="fa-solid fa-book" />}
+                </button>
+            </div>
+        )
+    }
+
+    else {
+        return (
+            <div>
+                <div className='helpers'>
+                    {helpers.map((helper) => {
+                        if (helper === user.username) {
+                            return <p className='helper' key={helper}><FontAwesomeIcon icon="fa-regular fa-face-smile" /> Vous</p>
+                        } else {
+                            return <p className='helper' key={helper}><FontAwesomeIcon icon="fa-regular fa-face-smile" /> {helper}</p>
+                        }
+                    })}
+                    <button className={`helpButton ${helping ? "helpButton-enabled" : "helpButton-disabled"}`} 
+                        id={`helpbutton-${gameid}`} 
+                        onClick={handleClick}>
+                        {helping ? <FontAwesomeIcon icon="fa-solid fa-book-bookmark" /> : <FontAwesomeIcon icon="fa-solid fa-book" />}
+                    </button>
+                </div>
+            </div>
+        )
+    }
+}

src/pages/Home.css

@@ -63,13 +63,15 @@ body {
 }
 
 .game-image {
-    height: 250px;
+    width: 250px;
     margin-left: 20px;
+    margin-right: 5px;
+    object-fit: contain;
 }
 
 .game-right {
     width: 55vw;
-    margin-right: 15vw;
+    margin-right: 10vw;
 }
 
 .game-bottom {
@@ -79,16 +81,25 @@ body {
     gap: 15px;
 }
 
+.helpers {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    gap: 5px;
+}
+
 .helper {
     background-color: #b4d666;
     padding: 7px 10px;
     border-radius: 15px;
+    margin: 0;
 }
 
 .no-helper {
     background-color: #d66666;
     padding: 7px 10px;
     border-radius: 15px;
+    margin: 0;
 }
 
 .helpButton {
@@ -106,22 +117,29 @@ body {
 }
 
 @media only screen and (max-width: 664px) {
+    .games {
+        margin: 10px;
+    }
+
     .game {
-        padding: 15px;
+        padding: 10px;
-        border-radius: 45px;
+        border-radius: 35px;
     }
 
     .game-image {
-        height: 150px;
+        width: 75px;
-        margin-left: 20px;
     }
 
     .game-right {
         width: 55vw;
-        margin-right: 5vw;
+        margin-right: 10vw;
     }
 
     .game-title {
-        font-size: 20px;
+        font-size: 17px;
+    }
+
+    .helpers {
+        flex-direction: column;
     }
 }

src/pages/Home.jsx

@@ -5,147 +5,123 @@ import axios from "axios";
 
 import './Home.css';
 
-import HelpButton from '../assets/HelpButton';
+import Game from '../assets/Game';
 
 export default function Home() {
-  const navigate = useNavigate();
+	const navigate = useNavigate();
-  const [user, setUser] = useState();
+	const [user, setUser] = useState();
-  const [token, setToken] = useState();
+	const [token, setToken] = useState();
-  const [games, setGames] = useState([]);
+	const [games, setGames] = useState([]);
-  const [loading, setLoading] = useState(true);
+	const [userloading, setUserLoading] = useState(true);
-  const [userloading, setUserLoading] = useState(true);
+	const [gameLoading, setGameLoading] = useState(true);
-  const [name, setName] = useState("");
+	const [name, setName] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
+	const [currentPage, setCurrentPage] = useState(1);
 
-  useEffect(() => {
+	useEffect(() => {
-    const tokenLocal = localStorage.getItem("token");
+		const tokenLocal = localStorage.getItem("token");
-    if (!tokenLocal) {
-      navigate("/login");
-      return;
-    }
 
-    setToken(tokenLocal);
+		function checkToken() {
-    setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user);
+			if (!tokenLocal) {
-    setUserLoading(false);
+				navigate("/login");
+				return;
+			}
 	
-    async function fetchGames() {
+			setToken(tokenLocal);
-      setLoading(true);
+			setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user);
-      try {
+			setUserLoading(false);
-        const response = await axios.post("https://leizour.fr/api/v1/games/getall", { token: tokenLocal });
+		}
-        setGames(response.data);
-      } catch (error) {
-        console.error("Error fetching games:", error);
-      } finally {
-        setLoading(false);
-      }
-    }
 
-    fetchGames();
+		async function fetchGames() {
-  }, []);
+			try {
+				const response = await axios.post("https://leizour.fr/api/v1/games/getall", { token: tokenLocal });
+				setGames(response.data);
+			} catch (error) {
+				console.error("Error fetching games:", error);
+			} finally {
+				setGameLoading(false);
+			}
+		}
 
-  function handleSearchChange(event) {
+		checkToken();
-    setName(event.target.value);
+		fetchGames();
-  };
+	}, []);
 
-  const filteredGames = games.filter((game) =>
+	function handleSearchChange(event) {
-    game.title.toLowerCase().includes(name.toLowerCase())
+		setName(event.target.value);
-  );
+	};
 
-  const itemsPerPage = 10;
+	const filteredGames = games.filter((game) =>
-  const totalPages = Math.ceil(filteredGames.length / itemsPerPage);
+		game.title.toLowerCase().includes(name.toLowerCase())
+	);
 
-  function handlePageChange(newPage) {
+	const itemsPerPage = 10;
-    if (newPage >= 1 && newPage <= totalPages) {
+	const totalPages = Math.ceil(filteredGames.length / itemsPerPage);
-      setCurrentPage(newPage);
-      window.scrollTo(0, 0);
-    }
-  }
 
-  const currentGames = filteredGames.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+	function handlePageChange(newPage) {
+		if (newPage >= 1 && newPage <= totalPages) {
+			setCurrentPage(newPage);
+			window.scrollTo(0, 0);
+		}
+	}
 
-  function getCode(id) {
+	const currentGames = filteredGames.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
-    const alphabet = 'abcdefghijklmnopqrstuvwxyz';
-    const base = alphabet.length;
-    let firstLetterIndex = Math.floor(id / base);
-    let secondLetterIndex = id % base;
 
-    let firstLetter = alphabet[firstLetterIndex];
+	if (userloading) {
-    let secondLetter = alphabet[secondLetterIndex];
+		return <p>Loading...</p>
+	}
 
-    return firstLetter + secondLetter;
+	return (
-  }
+		<div>
-
+			<h1 className='page-title'>Base de données des jeux Joclud</h1>
-  return (
+			<div className='home'>
-    <div>
+				<h2 className='welcome'>Bienvenue, {user.name} !</h2>
-      <h1 className='page-title'>Base de données des jeux Joclud</h1>
+				<button onClick={() => {
-      <div className='home'>
+					localStorage.removeItem("token");
-        <h2 className='welcome'>Bienvenue, {userloading ? "..." : user.name} !</h2>
+					navigate("/login");
-        <button onClick={() => {
+				}} className='logout-button'>
-          localStorage.removeItem("token");
+					Me déconnecter
-          navigate("/login");
+				</button>
-        }} className='logout-button'>
+			</div>
-          Me déconnecter
+			<div className='search'>
-        </button>
+				<input type="text" value={name} onChange={handleSearchChange} className='search-input' placeholder='Chercher un jeu' />
-      </div>
+			</div>
-      <div className='search'>
+			<div className="pagination">
-        <input type="text" value={name} onChange={handleSearchChange} className='search-input' placeholder='Chercher un jeu'/>
+				<button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
-      </div>
+					<FontAwesomeIcon icon="fa-solid fa-angles-left" />
-      <div className="pagination">
+				</button>
-        <button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
+				<button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="pagination-button">
-          <FontAwesomeIcon icon="fa-solid fa-angles-left" />
+					<FontAwesomeIcon icon="fa-solid fa-chevron-left" />
-        </button>
+				</button>
-        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="pagination-button">
+				<span className='pagination-text'>Page {currentPage} sur {totalPages}</span>
-          <FontAwesomeIcon icon="fa-solid fa-chevron-left" />
+				<button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="pagination-button">
-        </button>
+					<FontAwesomeIcon icon="fa-solid fa-chevron-right" />
-        <span className='pagination-text'>Page {currentPage} sur {totalPages}</span>
+				</button>
-        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="pagination-button">
+				<button onClick={() => handlePageChange(totalPages)} disabled={currentPage === totalPages} className="pagination-button">
-          <FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+					<FontAwesomeIcon icon="fa-solid fa-angles-right" />
-        </button>
+				</button>
-        <button onClick={() => handlePageChange(totalPages)} disabled={currentPage === totalPages} className="pagination-button">
+			</div>
-          <FontAwesomeIcon icon="fa-solid fa-angles-right" />
+			{gameLoading ? <p>Loading...</p> :
-        </button>
+				<div className='games'>
-      </div>
+					{currentGames.map((game) => {
-      <div className='games'>
+						return <Game key={game.id} game={game} token={token} user={user} />
-        {loading ? (
+					})}
-          <div>Loading...</div>
+				</div>
-        ) : (
+			}
-          currentGames.map((game) => (
+			<div className="pagination">
-            <div className='game'>
+				<button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
-              <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} className='game-image'/>
+					<FontAwesomeIcon icon="fa-solid fa-angles-left" />
-              <div className='game-right'>
+				</button>
-                <h1 className='game-title'>{game.title}</h1>
+				<button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="pagination-button">
-                <div className='game-bottom'>
+					<FontAwesomeIcon icon="fa-solid fa-chevron-left" />
-                  <div className='helpers'>
+				</button>
-                    {JSON.parse(game.helpers).length === 0 ? (
+				<span className='pagination-text'>Page {currentPage} sur {totalPages}</span>
-                      <p className='no-helper'>Personne</p>
+				<button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="pagination-button">
-                    ) :
+					<FontAwesomeIcon icon="fa-solid fa-chevron-right" />
-                    (JSON.parse(game.helpers).map((helper) => (
+				</button>
-                      helper === user.username ? () => { } : (
+				<button onClick={() => handlePageChange(totalPages)} disabled={currentPage === totalPages} className="pagination-button">
-                        <p className='helper'>{helper}</p>
+					<FontAwesomeIcon icon="fa-solid fa-angles-right" />
-                      ))))}
+				</button>
-                  </div>
+			</div>
-                  <HelpButton gameid={game.id} helpingprop={JSON.parse(game.helpers).includes(user.username)} user={user} token={token} />
+		</div>
-                </div>
+	);
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-      <div className="pagination">
-        <button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
-          <FontAwesomeIcon icon="fa-solid fa-angles-left" />
-        </button>
-        <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>
-  );
 }