diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx index 6834eea..3dc36d7 100644 --- a/cryptide_project/src/Components/PlayerList.tsx +++ b/cryptide_project/src/Components/PlayerList.tsx @@ -25,7 +25,7 @@ const PlayerList: React.FC = ({ players, playerTouched, setPlay { //@ts-ignore players.map((player, index) => ( - player.id!=socket.id && + player.id!=socket.id && )) } diff --git a/cryptide_project/src/ImageHelper.ts b/cryptide_project/src/ImageHelper.ts new file mode 100644 index 0000000..7400876 --- /dev/null +++ b/cryptide_project/src/ImageHelper.ts @@ -0,0 +1,14 @@ +async function loadImageAsync(url: string): Promise { + 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} \ No newline at end of file diff --git a/cryptide_project/src/Pages/Home.tsx b/cryptide_project/src/Pages/Home.tsx index 1c16b9e..6016578 100644 --- a/cryptide_project/src/Pages/Home.tsx +++ b/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); } }) } diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 5c4b5df..5219059 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/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) }) diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index dcc9361..bb4a672 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/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() { {/* */} - +
diff --git a/cryptide_project/src/model/User.tsx b/cryptide_project/src/model/User.tsx index 66573d8..d112003 100644 --- a/cryptide_project/src/model/User.tsx +++ b/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 == ""){ - profilePicture = defaultpdp - } - super(id, pseudo, profilePicture) + super(id, pseudo, profilePicture || defaultImg) 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 diff --git a/cryptide_project/startServers.sh b/cryptide_project/startServers.sh new file mode 100755 index 0000000..f340c6e --- /dev/null +++ b/cryptide_project/startServers.sh @@ -0,0 +1,5 @@ +#!/bin/sh + +node server/server.js & + +node src/server/server.js & \ No newline at end of file