récupération l'interface avec selection de bot perdu 🔨

cryptide_project/src/Components/PlayerItemList.tsx

@@ -1,31 +1,45 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import '../Style/Global.css';
-import Bot from '../res/img/bot.png';
+
+/* img */
+import BotPDP from '../res/img/bot.png';
+import PersonPDP from '../res/img/Person.png';
 
 /* Boostrap */
 import ToggleButton from 'react-bootstrap/ToggleButton';
 import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
 
-//@ts-ignore
+import Player from '../model/Player';
-function PlayerItemList({ pdp, name, id}) {
+import Bot from '../model/Bot';
-    const isBot = pdp === Bot;
+
 
+interface MyPlayerItemListProps {
+    player : Player
+}
+
+//@ts-ignore
+const PlayerItemList:React.FC<MyPlayerItemListProps> =({ player }) => {
+    // const isBot = pdp === Bot;
+    let pdp;
+    const isBot = player instanceof Bot;
+    isBot ? pdp = BotPDP :  pdp = PersonPDP;
+    
     return (
         <div className='item-horizontal-div-container'>
             <div className='item-horizontal-div'>
                 <img src={pdp} alt='player-image' height='100' width='100' />
-                <h4>{name}</h4>
+                <h4>{player.name}</h4>
             </div>
             {isBot && (
-                <ToggleButtonGroup type='radio' name={`options-${id}`} defaultValue={1}>
+                <ToggleButtonGroup type='radio' name={`options-${player.id}`} defaultValue={1}>
-                    <ToggleButton id={`tbg-radio-1-${id}`} value={1}>
+                    <ToggleButton id={`tbg-radio-1-${player.id}`} value={1}>
                         Facile
                     </ToggleButton>
-                    <ToggleButton id={`tbg-radio-2-${id}`} value={2}>
+                    <ToggleButton id={`tbg-radio-2-${player.id}`} value={2}>
                         Intermédiaire
                     </ToggleButton>
-                    <ToggleButton id={`tbg-radio-3-${id}`} value={3}>
+                    <ToggleButton id={`tbg-radio-3-${player.id}`} value={3}>
                         Fort
                     </ToggleButton>
                 </ToggleButtonGroup>

cryptide_project/src/Pages/Lobby.css

@@ -27,7 +27,7 @@
 
 .player-board{
     height: 100%;
-    width: max-content;
+    width: 800px;
     background-color: rgb(243, 241, 235);
     border-radius: 20px;
 

cryptide_project/src/Pages/Lobby.tsx

@@ -129,7 +129,8 @@ function Lobby() {
                     </div>
                     {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
                     {players.map((player, index) => (
-                        <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
+                        // <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
+                        <PlayerItemList key={player.id} player={player}/>
                     ))}
                     <div className='centerButton'>
                             <button className='button' onClick={addBot}