gestion de la page de fin de jeu de facon a ce qu'elle soit dynamique pour le mode de jeu (solo ou pas) + ajout de la statistique nombre de tour et temps ⚡

cryptide_project/src/Components/GraphContainer.tsx

@@ -44,10 +44,13 @@ let firstEnigme = true
 
 
 const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, addToHistory, showLast, setNetwork}) => {
-let cptTour: number = 0
+  let cptTour: number = 0
+
+  //* Gestion du temps :
+  const initMtn = new Date().getSeconds()
 
   const {user} = useAuth()
-  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme } = useGame();
+  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setTurnPlayerIndexData, setWinnerData, dailyEnigme, setNbCoupData, settempsData} = useGame();
   const params = new URLSearchParams(window.location.search);
 
   const navigate = useNavigate();
@@ -648,7 +651,13 @@ let cptTour: number = 0
                     works = false
                   }
                   if (index == indices.length - 1 && works){
-                    navigate("/endgame")
+                    const Mtn = new Date().getSeconds()
+
+                    settempsData(Mtn - initMtn)
+
+                    cptTour ++;
+                    setNbCoupData(cptTour)
+                    navigate("/endgame?solo=true&daily=" + isDaily)
                   }
                   
                 }
@@ -657,7 +666,6 @@ let cptTour: number = 0
             }
             addToHistory(person.getName() + " n'est pas le tueur !"); //TODO préciser le nombre d'indice qu'il a de juste
 
-            //TODO METTRE LA WIN CONDITION ICI AVEC LE MERGE
             cptTour ++; // On Incrémente le nombre de tour du joueur
             const tour = cptTour+1;
             addToHistory("<----- [Tour " + tour  +"/"+networkData.nodes.length + "] ----->");

cryptide_project/src/Contexts/GameContext.tsx

@@ -19,6 +19,8 @@ interface GameContextProps {
   onlyFalse: boolean
   winner: Player | null
   dailyEnigme: Map<number, Pair<Indice, boolean>[]>
+  nbCoup : number
+  temps : number
   setIndicesData: (newIndices: Indice[]) => void;
   setIndiceData: (newIndice: Indice) => void;
   setPersonData: (newPerson: Person) => void;
@@ -33,6 +35,8 @@ interface GameContextProps {
   setWinnerData: (winner: Player) => void
   reset: () => void
   setDailyEnigmeData: (map: Map<number, Pair<Indice, boolean>[]>) => void
+  setNbCoupData: (newNbCoup : number) => void
+  settempsData: (newtemps : number) => void
 }
 
 const GameContext = createContext<GameContextProps | undefined>(undefined);
@@ -55,6 +59,8 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
   const [onlyFalse, setOnlyFalse] = useState<boolean>(false)
   const [winner, setWinner] = useState<Player | null>(null)
   const [dailyEnigme, setDailyEnigme] = useState<Map<number, Pair<Indice, boolean>[]>>(new Map())
+  const [nbCoup, setNbCoup] = useState<number>(0);
+  const [temps, settemps] = useState<number>(0);
 
 
   const setIndicesData = (newIndices: Indice[]) => {
@@ -110,6 +116,15 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
     setDailyEnigme(map)
   }
 
+
+  const setNbCoupData = (newNbCoup : number) => {
+    setNbCoup(newNbCoup);
+  }
+
+  const settempsData = (newtemps : number) => {
+    settemps(newtemps);
+  }
+
   const reset = () => {
     setIndices([])
     setActualPlayerIndex(-1)
@@ -122,10 +137,12 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
     setTurnPlayerIndex(-1)
     setNodeId(-1)
     setIndice(null)
+    setNbCoup(0)
+    settemps(0)
   }
 
   return (
-    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData, winner, setWinnerData, reset, dailyEnigme, setDailyEnigmeData }}>
+    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData, winner, setWinnerData, reset, dailyEnigme, setDailyEnigmeData, nbCoup, setNbCoupData, temps, settempsData}}>
       {children}
     </GameContext.Provider>
   );

cryptide_project/src/Pages/EndGame.css

@@ -80,3 +80,38 @@
     padding: 10px;  
     box-shadow: 5px 5px 5px rgb(246, 246, 246);    
 }
+
+.SoloContainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+    background-color: white;
+
+    max-width: 50%;
+}
+
+.indicesolo{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    
+    /* margin: 10px 0;  */
+    /* max-height: 200px; */
+}
+
+.solostat{
+    display: flex;
+    justify-content: space-between;
+    width: 70%;
+}
+
+.solostat p {
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+    background-color: white;
+
+    padding: 10px;
+}

cryptide_project/src/Pages/EndGame.tsx

@@ -22,62 +22,126 @@ import { Link } from 'react-router-dom';
 /* lang */
 import { FormattedMessage } from 'react-intl';
 import { useGame } from '../Contexts/GameContext';
+import { map } from 'lodash';
+import Player from '../model/Player';
 
 
 function EndGame() {
 
+    const params = new URLSearchParams(window.location.search);
+
+    //* Gestion solo
+    let IsSolo: boolean = false
+    const solotmp = params.get('solo');
+    if (solotmp == "true"){
+        IsSolo=true
+    }
+
+
+    //* Gestion daily
+    let IsDaily: boolean = false
+    const dailytmp = params.get('daily');
+    if (dailytmp == "true"){
+        IsDaily=true
+    }
+
     const {reset} = useGame()
     
     const resetAll = () => {
         reset()
     }
     
-    const {winner, person, players, indices} =useGame()
+    const {winner, person, players, indices, nbCoup, temps} =useGame()
+    
     console.log(winner)
     let indice = indices[0]
-    const index = players.findIndex((p) => p.id == winner?.id)
+    let losingPlayers : Player[];
-    if (index != -1) {
-        indice = indices[index]
-    }
     
+    if(!IsSolo){
+        const index = players.findIndex((p) => p.id == winner?.id)
+        if (index != -1) {
+            indice = indices[index]
+        }
         
-    let losingPlayers;
 
-    if (winner != null) {
-        losingPlayers = players.filter(player => player.id !== winner.id);
-    } else {
-        losingPlayers = players;
-    }
 
+        if (winner != null) {
+            losingPlayers = players.filter(player => player.id !== winner.id);
+        } else {
+            losingPlayers = players;
+        }
+    }
+    else{
+        losingPlayers = [];
+    }
     const theme = useTheme();
     
     return (
         <div>
+            {!IsSolo &&
+                <div>
+                    <div className="head">
+                        <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
+                            <h1>{winner?.pseudo} a gagné !</h1>
+                            <h3>Le tueur était <u>{person?.getName()}</u></h3>
+                        </header>
+                    </div>
+                    <div className='winner'>
+                        <img src={Person} width='250' height='250'/>
+                        <h3 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>
+                    </div>
+                    <div className='bottom'>
+                        <div className='centerDivH' onClick={resetAll}>
+                            <BigButtonNav dest="/play" img={Leave}/>
+                        </div>
+                        <div className="losingPlayersContainer">
+                            {losingPlayers.map((player, index) => (
+                                <div className="playerContainer" key={index}>
+                                    {player.id !== winner?.id && (
+                                        <div>
+                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
+                                            <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                        <div className='centerDivH'>
+                            <BigButtonNav dest="/lobby" img={Replay}/>
+                        </div>
+                    </div>
+                </div>
+            }
             <div className="head">
-                <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
+                        <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
-                    <h1>{winner?.pseudo} a gagné !</h1>
+                            <h1>Vous avez gagné !</h1>
-                    <h3>Le tueur était <u>{person?.getName()}</u></h3>
+                            <h3>Le tueur était <u>{person?.getName()}</u></h3>
-                </header>
+                        </header>
             </div>
             <div className='winner'>
                 <img src={Person} width='250' height='250'/>
-                <h3 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>
+                <h1>[ {winner?.pseudo} ]</h1>
             </div>
+
             <div className='bottom'>
                 <div className='centerDivH' onClick={resetAll}>
                     <BigButtonNav dest="/play" img={Leave}/>
                 </div>
-                <div className="losingPlayersContainer">
+                <div className="SoloContainer">
-                    {losingPlayers.map((player, index) => (
+                    <div className='solostat'>
-                        <div className="playerContainer" key={index}>
+                        {!IsDaily && <p>Nombre de coups : {nbCoup}</p> }
-                            {player.id !== winner?.id && (
+                        <p>Temps : {temps}s</p>
-                                <div>
+                    </div>
-                                    <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
+                    <div className='indicesolo'>
-                                    <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
+                        {indices.map((indice, index) => (
-                                </div>
+                                    // <div className="playerContainer" key={index}>
-                            )}
+                                        <div>
-                        </div>
+                                            <h6 className='indiceDisplay'> <u>Indice {index+1}</u> : {indice.ToString("fr")}</h6>
-                    ))}
+                                        </div>
+                                    //</div>
+                                ))
+                        }
+                    </div>
                 </div>
                 <div className='centerDivH'>
                     <BigButtonNav dest="/lobby" img={Replay}/>