changement de l'affichage des joueurs en endagame et bouton de reset 🎨

cryptide_project/src/Pages/EndGame.css

@@ -33,10 +33,31 @@
     align-items: center;
 }
 
-.playerContainer {
+.playersContainer {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-left: "5px";
+    /* padding-left: "5px"; */
+
+    width: 100px;
+    background-color: red;
 }
 
+.playerContainer{
+    /* display: flex;
+    align-items: center; */
+    /* flex-direction: column; */
+
+    width: 300px;
+    
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+    
+    background-color: white;
+}
+
+.losingPlayer{
+    display: flex;
+
+    background-color: yellow;
+}

cryptide_project/src/Pages/EndGame.tsx

@@ -28,7 +28,40 @@ function EndGame() {
 
     const {winner, person, players, indices} =useGame()
     console.log(winner)
+
+    let losingPlayers;
+
+    if (winner != null) {
+        losingPlayers = players.filter(player => player.id !== winner.id);
+    } else {
+        losingPlayers = players;
+    }
+
     const theme = useTheme();
+
+
+    const playersRows = [];
+    for (let i = 0; i < losingPlayers.length; i += 3) {
+        const rowPlayers = losingPlayers.slice(i, i + 3);
+        playersRows.push(
+            <div className="playerRow" key={i}>
+                {rowPlayers.map((player, index) => (
+                    <div className="playerContainer" key={index}>
+                        {player.id !== winner?.id && (
+                            <div>
+                                <PersonStatus img={Person} state={Person} key={index} name={player.name} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
+                                <h6>
+                                    {indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
+                                </h6>
+                            </div>
+                        )}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    
     return (
         <div>
             <div className="head">
@@ -45,21 +78,25 @@ function EndGame() {
                 <div className='centerDivH'>
                     <BigButtonNav dest="/play" img={Leave}/>
                 </div>
-                <ul className='centerDivH'>
+                {/* <div className='losingPlayer'> */}
-                    {
+                    {/* {
-                    players.map((player, index) => (
+                        losingPlayers.map((player, index) => (
-                        <div className="playerContainer">
+                            <div className="playersContainer">
                                 {player.id!=winner?.id && 
                                 <>
+                                    <div className='playerContainer'>
                                         <PersonStatus img={Person} state={Person} key={index} name={player.name} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
                                         <h5 style={{width: 50}}>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h5>
+                                    </div>
                                 </>
                                 }
                             </div>
                         ))
-                    }
+                    } */}
+
+                    {playersRows}
                     
-                </ul>
+                {/* </div> */}
                 <div className='centerDivH'>
                     <BigButtonNav dest="/lobby" img={Replay}/>
                 </div>

cryptide_project/src/Pages/InGame.css

@@ -40,10 +40,12 @@
 }
 
 .resetDiv{
-    z-index: 1;
-    position: absolute;
-    top: 190px;
     right: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
 }
 
 #graphDiv{

cryptide_project/src/Pages/InGame.tsx

@@ -20,6 +20,7 @@ import Info from "../res/icon/infoGreen.png";
 import Check from "../res/icon/checkboxGreen.png";
 import Alpha from "../res/GreekLetters/alphaW.png";
 import MGlass from "../res/icon/magnifying-glass.png";
+import Reset from "../res/icon/reset.png";
 import Oeye from "../res/icon/eye.png";
 import Ceye from "../res/icon/hidden.png";
 
@@ -33,7 +34,7 @@ import Offcanvas from 'react-bootstrap/Offcanvas';
 /* Model */
 import Stub from '../model/Stub';
 import { HiLanguage } from 'react-icons/hi2';
-import { Nav, NavDropdown } from 'react-bootstrap';
+import { Nav, NavDropdown, Spinner } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 import Color from '../model/Color';
 import { useGame } from '../Contexts/GameContext';
@@ -67,12 +68,8 @@ const InGame = ({locale, changeLocale}) => {
   };
   
   const setShowLastData = () =>{
-    if (showLast){
+    setLastVisible(!showLast);
-      setShowLast(false)
+    setShowLast(!showLast);
-    }
-    else{
-      setShowLast(true)
-    }
   }
 
   useEffect(() => {
@@ -105,7 +102,11 @@ const InGame = ({locale, changeLocale}) => {
   }
 
   const resetGraph = () => {
+    setisLoading(true);
     socket.emit("reset graph", socket.id)
+    setTimeout(() => {
+      setisLoading(false);
+    }, 2000);  
   }
 
   /* offcanvas */
@@ -127,6 +128,8 @@ const InGame = ({locale, changeLocale}) => {
 
   const [LastVisible, setLastVisible] = useState(false);
 
+  const [isLoading, setisLoading] = useState(false);
+  
 
   //@ts-ignore
   const changecptTour = (newcptTour) => {
@@ -220,6 +223,8 @@ const InGame = ({locale, changeLocale}) => {
         </div>
 
 
+
+        <div className='menuGame'>
           <div className='resetDiv'>
             <button className='button'
               style={{ 
@@ -227,11 +232,23 @@ const InGame = ({locale, changeLocale}) => {
                   borderColor: theme.colors.secondary
               }}
               onClick={resetGraph}>
-            <img src={Param} alt="paramètres" height='40'/>
+              
+              {
+                isLoading ? (
+                  <Spinner animation="grow" />
+                  )
+                  : (
+                  <img src={Reset} alt="paramètres" height='40'/>
+                )
+              }
+              
+              
             </button>
           </div>
 
-        <div className='menuGame'>
+
+
+
           {/* <Link to='/info#indice-possible' target='_blank'> 
             //? redirection impossible apparament (securité des navigateur
           */}