diff --git a/package-lock.json b/package-lock.json index 339dec9..ce0a824 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5bd3f1e..a111b60 100644 --- a/package.json +++ b/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", diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index b1c9e97..7c87efa 100644 --- a/src/App.jsx +++ b/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'; diff --git a/src/assets/Game.jsx b/src/assets/Game.jsx new file mode 100644 index 0000000..1c38ac8 --- /dev/null +++ b/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 ( +
+ +
+

{game.title}

+
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/assets/HelpButton.jsx b/src/assets/HelpButton.jsx deleted file mode 100644 index 6ff1f27..0000000 --- a/src/assets/HelpButton.jsx +++ /dev/null @@ -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 ( - - ) -} \ No newline at end of file diff --git a/src/assets/Helpers.jsx b/src/assets/Helpers.jsx new file mode 100644 index 0000000..121ff74 --- /dev/null +++ b/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

Loading...

+ } + + else if (helpers.length === 0) { + return ( +
+

Personne

+ +
+ ) + } + + else { + return ( +
+
+ {helpers.map((helper) => { + if (helper === user.username) { + return

Vous

+ } else { + return

{helper}

+ } + })} + +
+
+ ) + } +} \ No newline at end of file diff --git a/src/pages/Home.css b/src/pages/Home.css index 427b275..652c1bc 100644 --- a/src/pages/Home.css +++ b/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; - border-radius: 45px; + padding: 10px; + border-radius: 35px; } .game-image { - height: 150px; - margin-left: 20px; + width: 75px; } .game-right { width: 55vw; - margin-right: 5vw; + margin-right: 10vw; } .game-title { - font-size: 20px; + font-size: 17px; + } + + .helpers { + flex-direction: column; } } \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index f4969f9..b9b76c8 100644 --- a/src/pages/Home.jsx +++ b/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 [user, setUser] = useState(); - 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); + const navigate = useNavigate(); + const [user, setUser] = useState(); + const [token, setToken] = useState(); + const [games, setGames] = useState([]); + const [userloading, setUserLoading] = useState(true); + const [gameLoading, setGameLoading] = useState(true); + const [name, setName] = useState(""); + const [currentPage, setCurrentPage] = useState(1); - useEffect(() => { - const tokenLocal = localStorage.getItem("token"); - if (!tokenLocal) { - navigate("/login"); - return; - } + useEffect(() => { + const tokenLocal = localStorage.getItem("token"); - setToken(tokenLocal); - setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user); - setUserLoading(false); + function checkToken() { + if (!tokenLocal) { + navigate("/login"); + return; + } + + setToken(tokenLocal); + setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user); + setUserLoading(false); + } - async function fetchGames() { - setLoading(true); - 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 { - setLoading(false); - } - } + 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); + } + } - fetchGames(); - }, []); + checkToken(); + fetchGames(); + }, []); - function handleSearchChange(event) { - setName(event.target.value); - }; + function handleSearchChange(event) { + setName(event.target.value); + }; - const filteredGames = games.filter((game) => - game.title.toLowerCase().includes(name.toLowerCase()) - ); + const filteredGames = games.filter((game) => + game.title.toLowerCase().includes(name.toLowerCase()) + ); - const itemsPerPage = 10; - const totalPages = Math.ceil(filteredGames.length / itemsPerPage); + const itemsPerPage = 10; + const totalPages = Math.ceil(filteredGames.length / itemsPerPage); - function handlePageChange(newPage) { - if (newPage >= 1 && newPage <= totalPages) { - setCurrentPage(newPage); - window.scrollTo(0, 0); - } - } + function handlePageChange(newPage) { + if (newPage >= 1 && newPage <= totalPages) { + setCurrentPage(newPage); + window.scrollTo(0, 0); + } + } - const currentGames = filteredGames.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); + const currentGames = filteredGames.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); - function getCode(id) { - const alphabet = 'abcdefghijklmnopqrstuvwxyz'; - const base = alphabet.length; - let firstLetterIndex = Math.floor(id / base); - let secondLetterIndex = id % base; + if (userloading) { + return

Loading...

+ } - let firstLetter = alphabet[firstLetterIndex]; - let secondLetter = alphabet[secondLetterIndex]; - - return firstLetter + secondLetter; - } - - return ( -
-

Base de données des jeux Joclud

-
-

Bienvenue, {userloading ? "..." : user.name} !

- -
-
- -
-
- - - Page {currentPage} sur {totalPages} - - -
-
- {loading ? ( -
Loading...
- ) : ( - currentGames.map((game) => ( -
- -
-

{game.title}

-
-
- {JSON.parse(game.helpers).length === 0 ? ( -

Personne

- ) : - (JSON.parse(game.helpers).map((helper) => ( - helper === user.username ? () => { } : ( -

{helper}

- ))))} -
- -
-
-
- )) - )} -
-
- - - Page {currentPage} sur {totalPages} - - -
-
- ); + return ( +
+

Base de données des jeux Joclud

+
+

Bienvenue, {user.name} !

+ +
+
+ +
+
+ + + Page {currentPage} sur {totalPages} + + +
+ {gameLoading ?

Loading...

: +
+ {currentGames.map((game) => { + return + })} +
+ } +
+ + + Page {currentPage} sur {totalPages} + + +
+
+ ); }