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,36 +22,63 @@ 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]
+    let losingPlayers : Player[];
+    
+    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;
         }
-
+    }
+    else{
+        losingPlayers = [];
+    }
     const theme = useTheme();
     
     return (
+        <div>
+            {!IsSolo &&
                 <div>
                     <div className="head">
                         <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
@@ -84,6 +111,43 @@ function EndGame() {
                         </div>
                     </div>
                 </div>
+            }
+            <div className="head">
+                        <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
+                            <h1>Vous avez gagné !</h1>
+                            <h3>Le tueur était <u>{person?.getName()}</u></h3>
+                        </header>
+            </div>
+            <div className='winner'>
+                <img src={Person} width='250' height='250'/>
+                <h1>[ {winner?.pseudo} ]</h1>
+            </div>
+
+            <div className='bottom'>
+                <div className='centerDivH' onClick={resetAll}>
+                    <BigButtonNav dest="/play" img={Leave}/>
+                </div>
+                <div className="SoloContainer">
+                    <div className='solostat'>
+                        {!IsDaily && <p>Nombre de coups : {nbCoup}</p> }
+                        <p>Temps : {temps}s</p>
+                    </div>
+                    <div className='indicesolo'>
+                        {indices.map((indice, index) => (
+                                    // <div className="playerContainer" key={index}>
+                                        <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}/>
+                </div>
+            </div>
+        </div>
     );
 }