gestion des la liste de player ⚡

cryptide_project/src/Components/PersonStatus.tsx

@@ -17,11 +17,12 @@ interface PlayerStatusProps {
     setPlayerTouched: (newPlayerTouch: number) => void;
     playerTouched: number
     showCircle: boolean
+    IsActualPlayer : boolean
   }
   let touchedPlayer = -1
 
 //@ts-ignore
-const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle}) => {
+const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, IsActualPlayer}) => {
     const theme=useTheme();
     const {players} = useGame()
     if (players[index] instanceof Bot){
@@ -32,12 +33,20 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
     useEffect(() =>{
         setTouchedPlayer(playerTouched)
     }, [playerTouched])
+
+    let isCurrentPlayer = true
+    let buffer = ''
+    if (isCurrentPlayer){
+        buffer = 'solid 1px green'
+    }
     return (
+        <div style={{border:buffer}}>
             <div className='centerDivV' onClick={() => setPlayerTouched(index)}>
                 <img src={img} alt="player" height="60" width="60"/>
                 <h5>{name}</h5>      
 
-            {(touchedPlayer == index && showCircle) ?(
+                {IsActualPlayer && (      
+                    (touchedPlayer == index && showCircle) ?(
                         <div className='statusDiv' style={{ backgroundColor: "gold" }}>
                             <img src={state} alt="state" height="30" width="30"/>
                         </div>
@@ -46,9 +55,11 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
                         <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
                             <img src={state} alt="state" height="30" width="30"/>
                         </div>
+                    )
                 )}
                 
             </div>
+        </div>
     );
 }
 

cryptide_project/src/Components/PlayerList.tsx

@@ -25,7 +25,18 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                 {
                     //@ts-ignore
                     players.map((player, index) => (
-                        player.id!=socket.id && <PersonStatus img={player.profilePicture} state={Person} key={index} name={player.pseudo + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
+                        //player.id!=socket.id && 
+                        <PersonStatus img={player.profilePicture} 
+                                                    state={Person} 
+                                                    key={index} 
+                                                    name={player.pseudo 
+                                                    + " " + 
+                                                    colorToEmoji(positionToColor(index), true)} 
+                                                    playerTouched={playerTouched} 
+                                                    setPlayerTouched={setPlayerTouched} 
+                                                    index={index} 
+                                                    showCircle={true}
+                                                    IsActualPlayer={player.id!=socket.id}/>
                     ))
                 }
             </div>

cryptide_project/src/Pages/EndGame.tsx

@@ -98,7 +98,7 @@ function EndGame() {
                                 <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}/>
+                                            <PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} IsActualPlayer={false} showCircle={false}/>
                                             <h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
                                         </div>
                                     )}