Merge pull request #28 from WildCodeSchool-2023-09/pageProfil

Page profil

frontend/src/components/ProfilPage/InfoProfil.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function InfoProfil({ time, timePlayed, numberPlayed, numberWon }) {
+  return (
+    <div className="infoGamerContainer">
+      <div className="menberSince">
+        <h2>Menbre depuis : {time}</h2>
+      </div>
+      <div className="bottomContainer">
+        <div className="leftinfo">
+          <p>Temps du jeu :</p>
+          <br />
+          <p>{timePlayed}</p>
+        </div>
+        <div className="rightinfos">
+          <p>
+            Partie :<span>{numberPlayed}</span>
+          </p>
+          <br />
+          <p>
+            Gagné :<span>{numberWon}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+InfoProfil.propTypes = {
+  time: PropTypes.string.isRequired,
+  timePlayed: PropTypes.string.isRequired,
+  numberPlayed: PropTypes.number.isRequired,
+  numberWon: PropTypes.number.isRequired,
+};
+
+export default InfoProfil;

frontend/src/components/ProfilPage/ProfilBio.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function ProfilBio({ img, username, bio }) {
+  return (
+    <div className="profilbioContainer">
+      <h2>Profil</h2>
+      <div className="toprofilbioContainer">
+        <img src={img} alt="profil img" />
+        <h2>{username}</h2>
+      </div>
+      <div className="bottomprofilbioContainer">
+        <textarea>{bio}</textarea>
+      </div>
+    </div>
+  );
+}
+
+ProfilBio.propTypes = {
+  img: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
+  bio: PropTypes.string.isRequired,
+};
+
+export default ProfilBio;

frontend/src/components/ProfilPage/Rancking.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import trophy from "../../assets/trophy.svg";
+
+function Rancking({ rang, color }) {
+  return (
+    <div className="ranckingContainer">
+      <div>
+        <h2>
+          Division <span>{rang}</span>
+        </h2>
+      </div>
+      <hr />
+      <div>
+        <img
+          src={trophy}
+          width={105}
+          alt="trophée"
+          style={{ backgroundColor: color }}
+        />
+      </div>
+    </div>
+  );
+}
+
+Rancking.propTypes = {
+  rang: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+export default Rancking;

frontend/src/components/header/Header.jsx

@@ -1,12 +1,14 @@
 import React from "react";
 import logo from "../../assets/logo.png";
 import ButtonConected from "../input/ButtonConected";
+import InputProfil from "../input/InputProfil";
 
 function Header() {
   return (
     <div className="headerContainer">
       <img src={logo} alt="logo" width={100} />
       <ButtonConected />
+      <InputProfil />
     </div>
   );
 }

frontend/src/components/input/InputProfil.jsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+import logo from "../../assets/icons8-user-32.png";
+
+function InputProfil() {
+  return (
+    <Link to="/profil">
+      <button type="button">
+        <span>
+          <img src={logo} alt="profilimage" />
+        </span>
+      </button>
+    </Link>
+  );
+}
+
+export default InputProfil;

frontend/src/main.jsx

@@ -16,6 +16,7 @@ import Signup from "./pages/auth/Signup";
 import PageComment from "./pages/PageComment";
 import Login from "./pages/auth/Login";
 import AuthProvider from "../context/AuthContext";
+import ProfilPage from "./pages/ProfilPage";
 
 const router = createBrowserRouter([
   {
@@ -30,6 +31,10 @@ const router = createBrowserRouter([
         path: "tictactoe",
         element: <TicTacToe />,
       },
+      {
+        path: "profil",
+        element: <ProfilPage />,
+      },
     ],
   },
   {

frontend/src/pages/ProfilPage.jsx

@@ -0,0 +1,24 @@
+import { useContext } from "react";
+import Rancking from "../components/ProfilPage/Rancking";
+import { AuthContext } from "../../context/AuthContext";
+import division from "../services/divisions";
+import cupColors from "../services/cupColors";
+
+function ProfilPage() {
+  const { profil, connected } = useContext(AuthContext);
+
+  if (connected && connected.login && connected.login.username && profil) {
+    return (
+      <div className="profilPageContainer">
+        <div className="ranckingContainerPage">
+          <Rancking
+            rang={division(connected.wonGames.won_count)}
+            color={cupColors(connected.wonGames.won_count)}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProfilPage;

frontend/src/services/cupColors.js

@@ -0,0 +1,17 @@
+const cupColors = (num) => {
+  if (num === 0) {
+    return "#FFFFFF";
+  }
+  if (num <= 3) {
+    return "#614E1A";
+  }
+  if (num <= 5) {
+    return "#C0C0C0";
+  }
+  if (num <= 7) {
+    return "#FFD700";
+  }
+  return "#A0B2C6";
+};
+
+export default cupColors;