commit
This commit is contained in:
parent
5971eea3cb
commit
f323683b27
9 changed files with 255 additions and 191 deletions
|
|
@ -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';
|
||||
|
|
|
|||
27
src/assets/Game.jsx
Normal file
27
src/assets/Game.jsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
79
src/assets/Helpers.jsx
Normal file
79
src/assets/Helpers.jsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <p>Loading...</p>
|
||||
}
|
||||
|
||||
let firstLetter = alphabet[firstLetterIndex];
|
||||
let secondLetter = alphabet[secondLetterIndex];
|
||||
|
||||
return firstLetter + secondLetter;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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");
|
||||
}} 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>
|
||||
<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 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'>Personne</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)} user={user} token={token} />
|
||||
</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>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<h1 className='page-title'>Base de données des jeux Joclud</h1>
|
||||
<div className='home'>
|
||||
<h2 className='welcome'>Bienvenue, {user.name} !</h2>
|
||||
<button onClick={() => {
|
||||
localStorage.removeItem("token");
|
||||
navigate("/login");
|
||||
}} 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>
|
||||
<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>
|
||||
{gameLoading ? <p>Loading...</p> :
|
||||
<div className='games'>
|
||||
{currentGames.map((game) => {
|
||||
return <Game key={game.id} game={game} token={token} user={user} />
|
||||
})}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue