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'>
-            <div className='centerDivV' onClick={() => onTouch()}>
+            {/* <div className='centerDivV' style={{border:buffer, borderRadius: '50%', padding:'1px'}}> */}
-                <img src={img} alt="player" height="60" width="60"/>
+                <div className='centerDivV' style={circleStyle} onClick={() => handleClick()}>
-                <h5>{name}</h5>      
+                    <div className='centerDivV' style={circleStyleInt}>
-
+                        <img src={img} alt="player" height="40" width="40" style={{ ...imageStyle, objectFit: 'cover' }}/>
-                {IsActualPlayer && (      
-                    (touchedPlayer == index && showCircle) ?(
-                        <div className='statusDiv' style={{ backgroundColor: "gold" }}>
-                            <img src={state} alt="state" height="30" width="30"/>
                     </div>
-                    ): showCircle &&
+            {/* </div> */}
-                    (
-                        <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
-                            <img src={state} alt="state" height="30" width="30"/>
             </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,7 +29,7 @@ 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) => (
@@ -56,6 +56,7 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                 alignItems:"center",
                 margin: 10
                 }}>
+                
                     {(playerTouched == players.length) 
                         ?(
                             <button style={{ 
@@ -65,7 +66,7 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
                             border: "solid 1px",
                             textAlign: "center",
                             padding: "10px"}}
-                    onClick={() => askEveryone()}>Ask everyone</button>
+                            onClick={() => askEveryone()}>Guess !</button>
                         ):
                         (
                             <button style={{ 

cryptide_project/src/Pages/InGame.css

@@ -72,8 +72,8 @@
 .playerlistDiv{
     position: absolute;
     z-index: 1;
-    left: 10px;
+    left: 30px;
-    top :50px;
+    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;