ajout du nouvelle affichage de joueur pendant la partie, ainsi que la gestion de cette derniere. de plus, gestion des noms trop grand pour celle ci 💥

cryptide_project/src/Components/PersonStatus.tsx

@@ -7,8 +7,14 @@ import { useTheme } from '../Style/ThemeContext';
 /* Ressources */
 import Person from '../res/img/Person.png'
 import BotImg from '../res/img/bot.png'
-import { useGame } from '../Contexts/GameContext';
+
+/* Model */
 import Bot from '../model/Bot';
+
+/* Context */
+import { useGame } from '../Contexts/GameContext';
+import { positionToColor } from '../ColorHelper';
+
 interface PlayerStatusProps {
     img: any
     state: any
@@ -19,8 +25,9 @@ interface PlayerStatusProps {
     showCircle: boolean
     playerIndex: number
     askedWrong: boolean
-  }
-  let touchedPlayer = -1
+}
+
+let touchedPlayer = -1
 
 //@ts-ignore
 const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, playerIndex, askedWrong}) => {
@@ -41,7 +48,7 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
 
     useEffect(() => {
         if (playerIndex===index){
-            setBuffer('solid 1px green')
+            setBuffer('solid 3px green')
         }
         else{
             setBuffer('')
@@ -52,31 +59,79 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
         if (IsActualPlayer && !askedWrong){
             setPlayerTouched(index)
             setTouchedPlayer(index)
+            //setIsClicked(!isClicked);
         }
     }
+
+    //* Code pour le cercle
+
+    //const [isClicked, setIsClicked] = useState(false); // État du bouton, par défaut false
+    const handleClick = () => {
+        onTouch();
+    };
+    const circleStyle: React.CSSProperties = {
+        backgroundColor: touchedPlayer == index && showCircle ? 'gold' : positionToColor(index), // Changement de la couleur en fonction de la condition
+        borderRadius: '50%',
+        width: '80px',
+        height: '80px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+        objectFit: 'cover'
+    };
+
+    const circleStyleInt: React.CSSProperties = {
+
+        backgroundColor:'white',
+        borderRadius: '50%',
+        width: '70px',
+        height: '70px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+        objectFit: 'cover'
+    }
+    
+    const imageStyle: React.CSSProperties = {
+        borderRadius: '50%', 
+        width: '60px',
+        height: '60px',
+        objectFit: 'cover', // image est ajustée pour couvrir le cercle
+        position: 'relative',
+    };
     
     return (
-        <div style={{border:buffer}}>
-            <div className='centerDivV' onClick={() => onTouch()}>
-                <img src={img} alt="player" height="60" width="60"/>
-                <h5>{name}</h5>      
-
-                {IsActualPlayer && (      
-                    (touchedPlayer == index && showCircle) ?(
-                        <div className='statusDiv' style={{ backgroundColor: "gold" }}>
-                            <img src={state} alt="state" height="30" width="30"/>
-                        </div>
-                    ): showCircle &&
-                    (
-                        <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
-                            <img src={state} alt="state" height="30" width="30"/>
-                        </div>
-                    )
-                )}
-                
+        <div className='centerDivV'>
+            {/* <div className='centerDivV' style={{border:buffer, borderRadius: '50%', padding:'1px'}}> */}
+                <div className='centerDivV' style={circleStyle} onClick={() => handleClick()}>
+                    <div className='centerDivV' style={circleStyleInt}>
+                        <img src={img} alt="player" height="40" width="40" style={{ ...imageStyle, objectFit: 'cover' }}/>
+                    </div>
+            {/* </div> */}
+            </div>
+            <div className='playerNameDisplay' style={{border:buffer}}>
+                <h5>{actualPlayerIndex !== index ? (name.substring(0, name.length - 2).length > 7 ? name.substring(0, name.length - 2).substring(0, 7) + '...' : name) : 'vous'}</h5>
             </div>
         </div>
     );
 }
 
 export default PersonStatus;
+
+
+
+
+// {IsActualPlayer && (      
+//     (touchedPlayer == index && showCircle) ?(
+//         <div className='statusDiv' style={{ backgroundColor: "gold" }}>
+//             <img src={state} alt="state" height="30" width="30"/>
+//         </div>
+//     ): showCircle &&
+//     (
+//         <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
+//             <img src={state} alt="state" height="30" width="30"/>
+//         </div>
+//     )
+// )}

cryptide_project/src/Components/PlayerList.tsx

@@ -29,23 +29,23 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
 
     return (
         <div>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
                 {
                     //@ts-ignore
                     players.map((player, index) => (
                         //player.id!=socket.id && 
                         <PersonStatus img={player.profilePicture} 
-                                                    state={Person} 
-                                                    key={index} 
-                                                    name={player.pseudo 
-                                                    + " " + 
-                                                    positionToEmoji(index, true)} 
-                                                    playerTouched={playerTouched} 
-                                                    setPlayerTouched={setPlayerTouched} 
-                                                    index={index} 
-                                                    showCircle={true}
-                                                    playerIndex={playerIndex}
-                                                    askedWrong={askedWrong}/>
+                                    state={Person} 
+                                    key={index} 
+                                    name={player.pseudo 
+                                    + " " + 
+                                    positionToEmoji(index, true)} 
+                                    playerTouched={playerTouched} 
+                                    setPlayerTouched={setPlayerTouched} 
+                                    index={index} 
+                                    showCircle={true}
+                                    playerIndex={playerIndex}
+                                    askedWrong={askedWrong}/>
                     ))
                 }
             </div>
@@ -56,28 +56,29 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                 alignItems:"center",
                 margin: 10
                 }}>
-                {(playerTouched == players.length) 
-                ?(
-                    <button style={{ 
-                    backgroundColor: "gold",
-                    borderColor: theme.colors.secondary,
-                    borderRadius: "10px",
-                    border: "solid 1px",
-                    textAlign: "center",
-                    padding: "10px"}}
-                    onClick={() => askEveryone()}>Ask everyone</button>
-                ):
-                (
-                    <button style={{ 
-                        backgroundColor: theme.colors.primary,
-                        borderColor: theme.colors.secondary,
-                        borderRadius: "10px",
-                        border: "solid 1px",
-                        textAlign: "center",
-                        padding: "10px"}}
-                    onClick={() => askEveryone()}>Ask everyone</button>
-                )
-            }
+                
+                    {(playerTouched == players.length) 
+                        ?(
+                            <button style={{ 
+                            backgroundColor: "gold",
+                            borderColor: theme.colors.secondary,
+                            borderRadius: "10px",
+                            border: "solid 1px",
+                            textAlign: "center",
+                            padding: "10px"}}
+                            onClick={() => askEveryone()}>Guess !</button>
+                        ):
+                        (
+                            <button style={{ 
+                                backgroundColor: theme.colors.primary,
+                                borderColor: theme.colors.secondary,
+                                borderRadius: "10px",
+                                border: "solid 1px",
+                                textAlign: "center",
+                                padding: "10px"}}
+                            onClick={() => askEveryone()}>Ask everyone</button>
+                        )
+                    }
             </div>
         </div>
         

cryptide_project/src/Pages/InGame.css

@@ -72,8 +72,8 @@
 .playerlistDiv{
     position: absolute;
     z-index: 1;
-    left: 10px;
-    top :50px;
+    left: 30px;
+    top : 30px;
 }
 
 .nbLaps{ /*nombre de tour*/

cryptide_project/src/Style/Global.css

@@ -59,6 +59,16 @@
     justify-content: center;
 }
 
+.playerNameDisplay{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color:#fff;
+    border: solid 3px #0064E0;
+    border-radius: 15px;
+    width: 100%;
+}
+
 /**Form**/
 .form-container {
     /* background-color: #D7D4C6; */
@@ -74,6 +84,8 @@ form{
     columns: 2 auto;
 }
 
+
+
 /* LeaderBoard */
 .LeaderBoardiv{  
     border: solid;