finission du style de la page de fin de jeu 💄

cryptide_project/src/Components/ScoreBoard.tsx

@@ -28,7 +28,7 @@ function ScoreBoard({Player = null}) {
         // <div className='LeaderBoardiv'>
         <div className='LeaderBoardiv'>
             <Tabs style={{width:"100%"}}
-                defaultActiveKey="profile"
+                defaultActiveKey="daily"
                 id="ScoreBoard"
                 className="mb-3">
                 

cryptide_project/src/Pages/EndGame.css

@@ -48,16 +48,35 @@
     align-items: center; */
     /* flex-direction: column; */
 
-    width: 300px;
-    
+    /* width: 300px; */
+    width: 30%;
+    margin-bottom: 20px;
+    /* margin-bottom: 10px; */
+
     border: solid 1px whitesmoke;
     border-radius: 15px;
     
     background-color: white;
 }
 
-.losingPlayer{
+.losingPlayersContainer{
     display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    
+    margin: 10px 0; 
+    
+    max-width: 50%;
+    
+    overflow-y: scroll;
+    max-height: 200px;
+    /* background-color: yellow; */
+}
 
-    background-color: yellow;
+.indiceDisplay{
+    border: solid 2px whitesmoke;
+    border-radius: 10px;
+    margin: 0 15px 0 15px;
+    padding: 10px;  
+    box-shadow: 5px 5px 5px rgb(246, 246, 246);    
 }

cryptide_project/src/Pages/EndGame.tsx

@@ -38,29 +38,6 @@ function EndGame() {
     }
 
     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>
@@ -71,32 +48,25 @@ function EndGame() {
                 </header>
             </div>
             <div className='winner'>
-                <img src={Person} width='300' height='300'/>
-                <h3>{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}</h3>
+                <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'>
                     <BigButtonNav dest="/play" img={Leave}/>
                 </div>
-                {/* <div className='losingPlayer'> */}
-                    {/* {
-                        losingPlayers.map((player, index) => (
-                            <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}
-                    
-                {/* </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.name} 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>