fix des pdp et des images qui se baladaient, debut logique (besoin de master)

cryptide_project/src/Components/ProfilePDP.tsx

@@ -3,27 +3,33 @@ import '../Pages/Profile.css'
 import dl from '../res/icon/download.png'
 import defaultImg from '../res/img/Person.png'
 
-const ProfilePDP = () => {
+//@ts-ignore
+const ProfilePDP = ({ player }) => {
     const [selectedFile, setSelectedFile] = useState(null);
 
     // @ts-ignore
     const handleFileChange = (event) => {
         let file = event.target.files[0];
-        // Validez la taille, le format, etc.
-        // if (file == null){
-        //     file = defaultImg;
-        // }
+
         setSelectedFile(file);
+        if (file) {
+            const pdpUrl = URL.createObjectURL(file);
+            player.pdp = pdpUrl
+        }
     };
 
     return (
         <div className='mainPDPContainer'>
-                {selectedFile && (
+                {selectedFile ? (
                     <div >
                     {/* @ts-ignore */}
                     {/* <p>Selected File: {selectedFile.name}</p> */}
                     <img src={URL.createObjectURL(selectedFile)} alt="Preview" className='imgContainer' width='100px' height='100px' />
                     </div>
+                ) : (
+                    <div >
+                    <img src={player.pdp} alt="Preview" className='imgContainer' width='100px' height='100px' />
+                    </div>
                 )}
                 <div className="parent">
                     <div className="file-upload">

cryptide_project/src/Pages/Profile.css

@@ -16,6 +16,8 @@
     background-color: white;
 
     margin: 10px;
+
+    min-height: 250px;
 }
 
 .imgContainer{

cryptide_project/src/Pages/Profile.tsx

@@ -1,14 +1,51 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ProfilePDP from '../Components/ProfilePDP';
 
 import './Profile.css'
 
-const ProfilePictureUploader = () => {
+
+import SessionService from '../services/SessionService';
+import { PlayerProps } from '../types/Player';
+import { update } from 'lodash';
+
+//@ts-ignore
+const Profile = () => {
+  
+  //let player;
+  const [player, setPlayer] = useState<PlayerProps | null>(null);
+  //! useeffect pour l'instant, il faudra voir pour changer la facons de prendre une session
+  useEffect(() => {
+    const fetchUserInformation = async () => {
+        try {
+            const sessionData = await SessionService.getSession();
+            if (sessionData.user) {
+                const updatedPlayer: PlayerProps = {
+                    pseudo: sessionData.user.pseudo,
+                    profilePicture: sessionData.user.profilePicture,
+                    soloStats: {
+                        nbGames: sessionData.user.soloStats.nbGames,
+                        bestScore: sessionData.user.soloStats.bestScore,
+                        avgNbTry: sessionData.user.soloStats.avgNbTry,
+                    },
+                    onlineStats: {
+                        nbGames: sessionData.user.onlineStats.nbGames,
+                        nbWins: sessionData.user.onlineStats.nbWins,
+                        ratio: sessionData.user.onlineStats.ratio,
+                    },
+                };
+                setPlayer(updatedPlayer);
+            }
+          } catch (error) {
+            console.error(error);
+        }
+    }})
+
   return (
     <div className='mainContainer'>
-      <ProfilePDP/>
+      <ProfilePDP player={player}/>
+      <h1> {player?.pseudo} </h1>
     </div>
   );
 };
 
-export default ProfilePictureUploader;
+export default Profile;

cryptide_project/src/model/Player.ts

@@ -1,10 +1,14 @@
+import defaultImg from '../res/img/Person.png'
+
 abstract class Player{
     public id: string
     public name: string;
+    public pdp: string;
 
     constructor(id: string, name: string){
         this.id=id
         this.name=name
+        this.pdp = defaultImg;
     }
 
     abstract toJson(): any

graph.aux

@@ -1,3 +0,0 @@
-\relax 
-\@writefile{toc}{\contentsline {paragraph}{Première énigme}{2}{}\protected@file@percent }
-\gdef \@abspage@last{2}

graph.tex

@@ -1,132 +0,0 @@
-\documentclass[11pt]{article}
-\usepackage{fullpage}
-\usepackage{times}
-\usepackage{tikz}
-\usepackage{paralist}
-\usetikzlibrary {shapes.multipart}
-\newcommand{\Basketball}{\includegraphics[width=.5cm]{ballon-de-basket.png}}
-\newcommand{\Football}{\includegraphics[width=.4cm]{ballon-de-foot.png}}
-\newcommand{\Bowling}{\includegraphics[width=.5cm]{bowling.png}}
-\newcommand{\Baseball}{\includegraphics[width=.5cm]{baseball.png}}
-\newcommand{\Tennis}{\includegraphics[width=.5cm]{tennis.png}}
-\begin{document}
-\thispagestyle{empty}
-Voici le graphe de SocialGraphe
-\begin{center}
-\begin{tikzpicture}[scale=.9]
-  \node[draw, circle split] (0) at (0,0) { Alexander \nodepart{lower} \Football{} \Bowling{}};
-  \node[draw, circle split] (1) at (4,0) { Wyatt \nodepart{lower} \Baseball{} \Tennis{}};
-  \node[draw, circle split] (2) at (8,0) { Mia \nodepart{lower} \Basketball{}};
-  \node[draw, circle split] (3) at (12,0) { William \nodepart{lower} \Baseball{} \Football{}};
-  \node[draw, circle split] (4) at (16,0) { Zoey \nodepart{lower} \Basketball{} \Bowling{} \Tennis{}};
-  \node[draw, circle split] (5) at (0,4) { Isabella \nodepart{lower} \Tennis{}};
-  \node[draw, circle split] (6) at (4,4) { Abigail \nodepart{lower} \Baseball{}};
-  \node[draw, circle split] (7) at (8,4) { Savannah \nodepart{lower} \Bowling{} \Basketball{} \Football{}};
-  \node[draw, circle split] (8) at (12,4) { Peyton \nodepart{lower} \Football{}};
-  \node[draw, circle split] (9) at (16,4) { Alice \nodepart{lower} \Tennis{} \Baseball{}};
-  \node[draw, circle split] (10) at (0,8) { Sophia \nodepart{lower} \Bowling{} \Basketball{} \Bowling{}};
-  \node[draw, circle split] (11) at (4,8) { Layla \nodepart{lower} \Tennis{} \Baseball{} \Football{}};
-  \node[draw, circle split] (12) at (8,8) { Ava \nodepart{lower} \Basketball{}};
-  \node[draw, circle split] (13) at (12,8) { Harper \nodepart{lower} \Bowling{}};
-  \node[draw, circle split] (14) at (16,8) { Sebastian \nodepart{lower} \Tennis{} \Basketball{} \Baseball{}};
-  \node[draw, circle split] (15) at (0,12) { Michael \nodepart{lower} \Football{}};
-  \node[draw, circle split] (16) at (4,12) { Natalie \nodepart{lower} \Bowling{} \Football{} \Baseball{}};
-  \node[draw, circle split] (17) at (8,12) { Penelope \nodepart{lower} \Basketball{}};
-  \node[draw, circle split] (18) at (12,12) { Lily \nodepart{lower} \Tennis{} \Tennis{}};
-  \node[draw, circle split] (19) at (16,12) { Eleanor \nodepart{lower} \Football{}};
-  \node[draw, circle split] (20) at (0,16) { Henry \nodepart{lower} \Bowling{} \Basketball{}};
-  \node[draw, circle split] (21) at (4,16) { Claire \nodepart{lower} \Baseball{} \Basketball{}};
-  \node[draw, circle split] (22) at (8,16) { Caleb \nodepart{lower} \Baseball{}};
-  \node[draw, circle split] (23) at (12,16) { Charlotte \nodepart{lower} \Bowling{} \Football{} \Tennis{}};
-  \node[draw, circle split] (24) at (16,16) { Luke \nodepart{lower} \Football{}};
-  \node[draw, circle split] (25) at (0,20) { Connor \nodepart{lower} \Baseball{} \Tennis{}};
-  \node[draw, circle split] (26) at (4,20) { Aiden \nodepart{lower} \Basketball{} \Bowling{} \Tennis{}};
-  \node[draw, circle split] (27) at (8,20) { Aurora \nodepart{lower} \Football{}};
-  \node[draw, circle split] (28) at (12,20) { Nathan \nodepart{lower} \Bowling{} \Baseball{}};
-  \node[draw, circle split] (29) at (16,20) { Aurora \nodepart{lower} \Basketball{}};
-  \draw (0) -- (11);
-  \draw (0) -- (13);
-  \draw (0) -- (18);
-  \draw (1) -- (13);
-  \draw (1) -- (24);
-  \draw (2) -- (22);
-  \draw (2) -- (16);
-  \draw (2) -- (9);
-  \draw (2) -- (6);
-  \draw (3) -- (4);
-  \draw (3) -- (20);
-  \draw (4) -- (28);
-  \draw (4) -- (3);
-  \draw (5) -- (17);
-  \draw (5) -- (15);
-  \draw (5) -- (24);
-  \draw (6) -- (2);
-  \draw (7) -- (17);
-  \draw (7) -- (24);
-  \draw (7) -- (22);
-  \draw (7) -- (11);
-  \draw (8) -- (25);
-  \draw (8) -- (21);
-  \draw (8) -- (24);
-  \draw (8) -- (11);
-  \draw (9) -- (2);
-  \draw (10) -- (25);
-  \draw (10) -- (26);
-  \draw (10) -- (27);
-  \draw (11) -- (0);
-  \draw (11) -- (7);
-  \draw (11) -- (8);
-  \draw (12) -- (20);
-  \draw (12) -- (27);
-  \draw (13) -- (0);
-  \draw (13) -- (1);
-  \draw (14) -- (15);
-  \draw (15) -- (5);
-  \draw (15) -- (14);
-  \draw (15) -- (20);
-  \draw (15) -- (17);
-  \draw (16) -- (2);
-  \draw (16) -- (26);
-  \draw (17) -- (5);
-  \draw (17) -- (7);
-  \draw (17) -- (15);
-  \draw (17) -- (20);
-  \draw (18) -- (0);
-  \draw (19) -- (23);
-  \draw (20) -- (3);
-  \draw (20) -- (12);
-  \draw (20) -- (15);
-  \draw (20) -- (17);
-  \draw (21) -- (8);
-  \draw (22) -- (2);
-  \draw (22) -- (7);
-  \draw (22) -- (23);
-  \draw (23) -- (19);
-  \draw (23) -- (22);
-  \draw (24) -- (1);
-  \draw (24) -- (5);
-  \draw (24) -- (7);
-  \draw (24) -- (8);
-  \draw (25) -- (8);
-  \draw (25) -- (10);
-  \draw (26) -- (10);
-  \draw (26) -- (16);
-  \draw (26) -- (29);
-  \draw (27) -- (10);
-  \draw (27) -- (12);
-  \draw (28) -- (4);
-  \draw (29) -- (26);
-\end{tikzpicture}
-\end{center}
-
-
-\paragraph{Première énigme}
-Trouver qui est le coupable avec les indices suivants.
-\begin{compactitem}
-\item Indice 1 : Le suspect pratique au moins du Baseball et/ou du Basketball .
-\item Indice 2 : Le suspect pratique 2 ou 1 sport(s).
-\item Indice 3 : Le suspect a les cheveux Roux ou Blond .
-\item Indice 4 : Le suspect a au moins un ami avec les cheveux Roux .
-\end{compactitem}
-% Solution : Nathan
-\end{document}