From 5107eece930a6cf5ba23bc9e55e7c2cda115c976 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 22 Nov 2023 09:21:24 +0100
Subject: [PATCH] =?UTF-8?q?r=C3=A9cup=C3=A9ration=20l'interface=20avec=20s?=
 =?UTF-8?q?election=20de=20bot=20perdu=20:hammer:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Components/PlayerItemList.tsx         | 32 +++++++++++++------
 cryptide_project/src/Pages/Lobby.css          |  2 +-
 cryptide_project/src/Pages/Lobby.tsx          |  3 +-
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/cryptide_project/src/Components/PlayerItemList.tsx b/cryptide_project/src/Components/PlayerItemList.tsx
index 4b2d4e9..b9ef236 100644
--- a/cryptide_project/src/Components/PlayerItemList.tsx
+++ b/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
-function PlayerItemList({ pdp, name, id}) {
-    const isBot = pdp === Bot;
+import Player from '../model/Player';
+import Bot from '../model/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}>
-                    <ToggleButton id={`tbg-radio-1-${id}`} value={1}>
+                <ToggleButtonGroup type='radio' name={`options-${player.id}`} defaultValue={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>
diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css
index 6a6f132..60dfcf0 100644
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/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;
 
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index 8a191bb..bec8f50 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/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}