lucien/joclud-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

commit

Browse source
This commit is contained in:
Lukian LEIZOUR 2024-06-05 20:17:16 +02:00
parent 5971eea3cb
commit f323683b27
9 changed files with 255 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

13
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

1
public/vite.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

4
src/App.jsx
View file

@ -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
View 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>
)
}

51
src/assets/HelpButton.jsx
View file

@ -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
View 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>
)
}
}

34
src/pages/Home.css
View file

@ -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;
}
}

236
src/pages/Home.jsx
View file

@ -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>
);
}