diff --git a/index.html b/index.html index 0a6b896..1202855 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Joclud APP + Joclud's Games
diff --git a/package-lock.json b/package-lock.json index 6b9b7f1..339dec9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "front", "version": "0.0.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.2", "axios": "^1.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -803,6 +806,51 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", + "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz", + "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==", + "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", + "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -3294,7 +3342,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3558,7 +3605,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3625,8 +3671,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.2", diff --git a/package.json b/package.json index c5e99cb..5bd3f1e 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.2", "axios": "^1.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/App.jsx b/src/App.jsx index 4aab85e..b1c9e97 100644 --- a/src/App.jsx +++ b/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'; diff --git a/src/assets/HelpButton.css b/src/assets/HelpButton.css deleted file mode 100644 index 4b2743d..0000000 --- a/src/assets/HelpButton.css +++ /dev/null @@ -1,7 +0,0 @@ -.helpButton-enabled { - background-color: green; -} - -.helpButton-disabled { - background-color: red; -} \ No newline at end of file diff --git a/src/assets/HelpButton.jsx b/src/assets/HelpButton.jsx index ac1a3e5..0b75ad0 100644 --- a/src/assets/HelpButton.jsx +++ b/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 ( - + ) } \ No newline at end of file diff --git a/src/pages/Home.css b/src/pages/Home.css new file mode 100644 index 0000000..77750d2 --- /dev/null +++ b/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; +} diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 24cbc91..8da3c61 100644 --- a/src/pages/Home.jsx +++ b/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 (
-
-

Home

+

Base de données des jeux Joclud

+
+

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

+ }} className='logout-button'> + Me déconnecter + +
+
+
- Recherche :
- - Page {currentPage} of {totalPages} - + Page {currentPage} sur {totalPages} + +
- {loading ? ( -
Loading...
- ) : ( - currentGames.map((game) => ( -
- -

{game.title}

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

{helper}

+
+ {loading ? ( +
Loading...
+ ) : ( + currentGames.map((game) => ( +
+ +
+

{game.title}

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

Aucun membre ne connait les rêgles

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

{helper}

+ ))))}
- ))))} + +
+
- -
- )) - )} + )) + )} +
- - Page {currentPage} of {totalPages} - + Page {currentPage} sur {totalPages} + +
diff --git a/src/pages/Login.css b/src/pages/Login.css new file mode 100644 index 0000000..a5ceeaf --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 594cc54..fe7538d 100644 --- a/src/pages/Login.jsx +++ b/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 ( -
-

Login

-
-
- Usename : -
-
- Password : -
-
- -
-
- Create an account +
+

Connexion

+ + + + Créer un compte
) } diff --git a/src/pages/Register.css b/src/pages/Register.css new file mode 100644 index 0000000..eb68f29 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx index 630a25e..4b7c1bc 100644 --- a/src/pages/Register.jsx +++ b/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 ( -
-

Create an account

+
+

Création de compte

+ + + +
-
- Usename : -
-
- Name : -
-
- Last name : -
-
- Password : -
-
- -
+
- Login with my account + Me connecter avec mon compte
) } \ No newline at end of file