Photo de profile des users sur toutes les pages + script pour lancer les deux servers en même temps

cryptide_project/src/Components/PlayerList.tsx

@@ -25,7 +25,7 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                 {
                     //@ts-ignore
                     players.map((player, index) => (
-                        player.id!=socket.id && <PersonStatus img={Person} state={Person} key={index} name={player.pseudo + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
+                        player.id!=socket.id && <PersonStatus img={player.profilePicture} state={Person} key={index} name={player.pseudo + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
                     ))
                 }
             </div>

cryptide_project/src/ImageHelper.ts

@@ -0,0 +1,14 @@
+async function loadImageAsync(url: string): Promise<string> {
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      
+      // Faire quelque chose avec le blob, par exemple, créer une URL blob
+      const blobUrl = URL.createObjectURL(blob);
+      return blobUrl
+    } catch (error) {
+      throw new Error("Erreur lors du chargement de l'image :");
+    }
+  }
+
+export {loadImageAsync}

cryptide_project/src/Pages/Home.tsx

@@ -7,6 +7,9 @@ import { useTheme } from '../Style/ThemeContext';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import ButtonImgNav from '../Components/ButtonImgNav';
+import defaultImg from "../res/img/Person.png"
+import {loadImageAsync} from "../ImageHelper"
+
 
 // @ts-ignore
 function Home() {
@@ -18,11 +21,16 @@ function Home() {
         if (user == null){
             manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
                 if (user!=null){
-                    setUserData(user)
                     if (loggedIn){
                         login()
+                        setUserData(user)
+                    }
+                    else{
+                        loadImageAsync(defaultImg).then((blob) => {
+                            user.profilePicture=blob
+                            setUserData(user)
+                        })
                     }
-                    console.log('isLoggedIn : ', isLoggedIn);
                 }
             })
         }

cryptide_project/src/Pages/Lobby.tsx

@@ -27,6 +27,8 @@ import Bot from '../model/Bot';
 import User from '../model/User';
 import { useAuth } from '../Contexts/AuthContext';
 import SessionService from '../services/SessionService';
+import defaultImg from "../res/img/Person.png"
+import {loadImageAsync} from "../ImageHelper"
 
 
 let gameStarted = false
@@ -48,6 +50,8 @@ function Lobby() {
         socket.emit("lobby joined", room, new EasyBot("botId" + Math.floor(Math.random() * 1000), "Bot" + Math.floor(Math.random() * 100), "").toJson())
     }
 
+    
+
     useEffect(() => {
         if (first){
             first=false
@@ -55,9 +59,15 @@ function Lobby() {
             if (user == null){
                 manager.userService.fetchUserInformation().then(([u, loggedIn]) => {
                     if (u!=null){
-                        setUserData(u)
                         if (loggedIn){
                             login()
+                            setUserData(u)
+                        }
+                        else{
+                            loadImageAsync(defaultImg).then((blob) => {
+                                u.profilePicture=blob
+                                setUserData(u)
+                            })
                         }
                         socket.emit("lobby joined", room, u.toJson())
                     }
@@ -108,6 +118,7 @@ function Lobby() {
         for (const p of tab){
             tmpTab.push(JSONParser.JSONToPlayer(p))
         }
+        console.log(tmpTab)
         setPlayersData(tmpTab)
     })
 

cryptide_project/src/Pages/Play.tsx

@@ -12,8 +12,6 @@ import ButtonImgNav from "../Components/ButtonImgNav"
 import SessionService from "../services/SessionService";
 
 /* Img */
-import Person from '../res/img/Person.png';
-
 /* Icon */
 import { socket } from '../SocketConfig';
 import { useNavigate } from 'react-router-dom';
@@ -21,16 +19,39 @@ import GameCreator from '../model/GameCreator';
 import { useGame } from '../Contexts/GameContext';
 import ScoreBoard from '../Components/ScoreBoard';
 
+import defaultImg from "../res/img/Person.png"
+
 /* Types */
 import User from '../model/User';
+import { loadImageAsync } from '../ImageHelper';
 
 function Play() {
     const theme=useTheme()
-    const {user} = useAuth();
+    const {isLoggedIn, login, user, setUserData, manager } = useAuth();
       
     const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();
 
 
+    useEffect(() => {
+
+        if (user == null){
+            manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
+                if (user!=null){
+                    if (loggedIn){
+                        login()
+                        setUserData(user)
+                    }
+                    else{
+                        loadImageAsync(defaultImg).then((blob) => {
+                            user.profilePicture=blob
+                            setUserData(user)
+                        })
+                    }
+                }
+            })
+        }
+    }, [isLoggedIn]);
+
     const [room, setRoom] = useState(null);
     const navigate = useNavigate();
 
@@ -82,7 +103,7 @@ function Play() {
                 {/* <button className='ButtonNav'>
                     Param
                 </button> */}
-                <ButtonImgNav dest='/signup' img={Person} text="Gestion du compte"/>
+                <ButtonImgNav dest='/signup' img={defaultImg} text="Gestion du compte"/>
             </div>
             <div className="MidContainer">
                 <div>

cryptide_project/src/model/User.tsx

@@ -1,16 +1,12 @@
 import Player from "./Player";
-import defaultpdp from "../res/img/Person.png"
+import defaultImg from "../res/img/Person.png"
-
 class User extends Player{
 
     public soloStats: any
     public onlineStats: any
 
     constructor(id: string, pseudo: string, profilePicture: string, soloStats: any, onlineStats: any){
-        if (profilePicture == ""){
+        super(id, pseudo, profilePicture || defaultImg)
-            profilePicture = defaultpdp
-        }
-        super(id, pseudo, profilePicture)
         this.soloStats=soloStats
         this.onlineStats=onlineStats
     }
@@ -20,6 +16,7 @@ class User extends Player{
         return {
             type: "User",
             id: this.id,
+            profilePicture: this.profilePicture,
             pseudo: this.pseudo,
             soloStats: this.soloStats,
             onlineStats: this.onlineStats

cryptide_project/startServers.sh

@@ -0,0 +1,5 @@
+#!/bin/sh 
+
+node server/server.js &
+
+node src/server/server.js &