From a23d1b5477bf4bb2a73f1adb8399dfa10ccf2d36 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Fri, 10 Nov 2023 15:53:10 +0100
Subject: [PATCH] =?UTF-8?q?affichage=20des=20joueurs=20retravaill=C3=A9=20?=
 =?UTF-8?q?lors=20d'une=20partie=20:=20affichage=20depuis=20une=20liste=20?=
 =?UTF-8?q?en=20back=20end,=20limit=C3=A9=20a=20deux=20colonnes.=20:zap:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Components/PlayerList.tsx             | 20 +++++++++++
 cryptide_project/src/Pages/InGame.css         |  7 +++-
 cryptide_project/src/Pages/InGame.tsx         | 35 ++++++++++++++++---
 3 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 cryptide_project/src/Components/PlayerList.tsx

diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx
new file mode 100644
index 0000000..19d29c4
--- /dev/null
+++ b/cryptide_project/src/Components/PlayerList.tsx
@@ -0,0 +1,20 @@
+
+import React from 'react';
+import PersonStatus from './PersonStatus';
+
+//@ts-ignore
+function PlayerList({ players }) {
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+            {
+                //@ts-ignore
+                players.map((player, index) => (
+                    <PersonStatus key={index} state={player.state} name={player.name} />
+                ))
+            }
+        </div>
+
+    );
+}   
+
+export default PlayerList;
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css
index 019a26d..690147a 100644
--- a/cryptide_project/src/Pages/InGame.css
+++ b/cryptide_project/src/Pages/InGame.css
@@ -96,4 +96,9 @@
 
     width: 100px;
     height: 60px;
-}
\ No newline at end of file
+}
+
+/* #playerCanvasBody{
+    columns: 2 auto;
+    grid-row: 2;
+} */
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index a14b67d..389f709 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@@ -9,6 +9,7 @@ import GraphContainer from '../Components/GraphContainer';
 import ChoiceBar from '../Components/ChoiceBar';
 import ButtonImgNav from '../Components/ButtonImgNav';
 import PersonStatus from '../Components/PersonStatus';
+import PlayerList from '../Components/PlayerList';
 
 /* Icon */
 import Leave from "../res/icon/leave.png";
@@ -33,6 +34,29 @@ import { FormattedMessage } from 'react-intl';
 
 //@ts-ignore
 const InGame = ({locale, changeLocale}) => {
+
+  const players = [
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    // Ajouter d'autres joueurs au besoin
+  ];
+
+
+
+
     const [showChoiceBar, setShowChoiceBar] = useState(false);
   
     const handleNodeClick = (shouldShowChoiceBar: boolean) => {
@@ -140,10 +164,13 @@ const InGame = ({locale, changeLocale}) => {
             <h3>Il y a 3 joueurs</h3>
           </Offcanvas.Header>
           <Offcanvas.Body>
-            {/* affichage d'une liste responsive dynamic */}
-            <PersonStatus state={Replay} name="Dummy"/>
-            <PersonStatus state={Replay} name="Boat"/>
-            <PersonStatus state={Replay} name="Bot-tom"/>
+              {/* affichage d'une liste responsive dynamic */}
+            {/* <div className='playerCanvasBody'>
+              <PersonStatus state={Replay} name="Dummy"/>
+              <PersonStatus state={Replay} name="Boat"/>
+              <PersonStatus state={Replay} name="Bot-tom"/>
+            </div> */}
+            <PlayerList players={players} />
           </Offcanvas.Body>
         </Offcanvas>