From 03f86728b140246b960f46061b1516641e4d1b85 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Mon, 13 Nov 2023 16:24:40 +0100
Subject: [PATCH 1/4] =?UTF-8?q?ajout=20de=20la=20selection=20de=20difficul?=
 =?UTF-8?q?t=C3=A9=20pour=20les=20bots=20+=20ajout=20du=20nombre=20de=20bo?=
 =?UTF-8?q?t=20en=20fonction=20du=20nombres=20de=20joueur=20restant=20:zap?=
 =?UTF-8?q?:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cryptide_project/package-lock.json            | 28 +++++++++++++++--
 cryptide_project/package.json                 |  3 ++
 .../src/Components/PlayerItemList.tsx         | 30 ++++++++++++++++---
 cryptide_project/src/Pages/Lobby.tsx          | 23 ++++++++++++--
 cryptide_project/src/Style/Global.css         |  6 ++++
 cryptide_project/yarn.lock                    | 12 +++++++-
 6 files changed, 91 insertions(+), 11 deletions(-)

diff --git a/cryptide_project/package-lock.json b/cryptide_project/package-lock.json
index c6baca5..ba9eec6 100644
--- a/cryptide_project/package-lock.json
+++ b/cryptide_project/package-lock.json
@@ -29,6 +29,9 @@
         "typescript": "^5.2.2",
         "vis-network": "^9.1.9",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/uuid": "^9.0.7"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4517,6 +4520,12 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.5.tgz",
       "integrity": "sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA=="
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz",
+      "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==",
+      "dev": true
+    },
     "node_modules/@types/warning": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.2.tgz",
@@ -15603,6 +15612,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -16925,9 +16942,14 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "peer": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/cryptide_project/package.json b/cryptide_project/package.json
index 68e86c1..142b8f2 100644
--- a/cryptide_project/package.json
+++ b/cryptide_project/package.json
@@ -47,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.7"
   }
 }
diff --git a/cryptide_project/src/Components/PlayerItemList.tsx b/cryptide_project/src/Components/PlayerItemList.tsx
index 984455c..4b2d4e9 100644
--- a/cryptide_project/src/Components/PlayerItemList.tsx
+++ b/cryptide_project/src/Components/PlayerItemList.tsx
@@ -1,13 +1,35 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import '../Style/Global.css';
+import Bot from '../res/img/bot.png';
+
+/* Boostrap */
+import ToggleButton from 'react-bootstrap/ToggleButton';
+import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
 
 //@ts-ignore
-function PlayerItemList({ pdp, name}) {
+function PlayerItemList({ pdp, name, id}) {
+    const isBot = pdp === Bot;
+
     return (
-        <div className='item-horizontal-div'>
-            <img src={pdp} alt='player-image' height="100" width="100"/>
-            <h4>{name}</h4>
+        <div className='item-horizontal-div-container'>
+            <div className='item-horizontal-div'>
+                <img src={pdp} alt='player-image' height='100' width='100' />
+                <h4>{name}</h4>
+            </div>
+            {isBot && (
+                <ToggleButtonGroup type='radio' name={`options-${id}`} defaultValue={1}>
+                    <ToggleButton id={`tbg-radio-1-${id}`} value={1}>
+                        Facile
+                    </ToggleButton>
+                    <ToggleButton id={`tbg-radio-2-${id}`} value={2}>
+                        Intermédiaire
+                    </ToggleButton>
+                    <ToggleButton id={`tbg-radio-3-${id}`} value={3}>
+                        Fort
+                    </ToggleButton>
+                </ToggleButtonGroup>
+            )}
         </div>
     )
 }
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index cf30190..aea8d22 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -1,4 +1,9 @@
 import React from 'react';
+import { useState } from 'react';
+
+// import { useId } from 'react';
+// import { v4 as uuidv4 } from 'uuid';
+
 
 /* Style */
 import './Lobby.css';
@@ -16,14 +21,26 @@ import PlayerItemList from '../Components/PlayerItemList'
 
 function Lobby() {
     const theme=useTheme();
+
+    const players = [
+        { pdp: Person, name: "Dummy (vous)", id: 1 },
+        { pdp: Person, name: "Dummy2)", id: 1 },
+        //{ pdp: Bot, name: "Boat", id: 2 },
+        // { pdp: Bot, name: "Bot-tom", id: 3 },
+    ];
+
+    while (players.length < 3) {
+        players.push({ pdp: Bot, name: "BotAdded", id: players.length + 1 });
+    }
+
     return (
         <div className='lobby-container'>
             <div className='left-part'>
                 <div className='player-board'>
                     {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
-                    <PlayerItemList pdp={Person} name="Dummy (vous)"/>
-                    <PlayerItemList pdp={Bot} name="Boat"/>
-                    <PlayerItemList pdp={Bot} name="Bot-tom"/>
+                    {players.map((player) => (
+                        <PlayerItemList key={player.id} pdp={player.pdp} name={player.name} id={player.id} />
+                    ))}
                 </div>
             </div>
 
diff --git a/cryptide_project/src/Style/Global.css b/cryptide_project/src/Style/Global.css
index 1a0f41f..4dd7ae2 100644
--- a/cryptide_project/src/Style/Global.css
+++ b/cryptide_project/src/Style/Global.css
@@ -12,6 +12,12 @@
     align-items: center;
 }
 
+.item-horizontal-div-container{
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+}
+
 .item-horizontal-div{
     display: flex;
     flex-direction: row;
diff --git a/cryptide_project/yarn.lock b/cryptide_project/yarn.lock
index 1caadf8..e89b3a7 100644
--- a/cryptide_project/yarn.lock
+++ b/cryptide_project/yarn.lock
@@ -2393,6 +2393,11 @@
   resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.5.tgz"
   integrity sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==
 
+"@types/uuid@^9.0.7":
+  version "9.0.7"
+  resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz"
+  integrity sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==
+
 "@types/warning@^3.0.0":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@types/warning/-/warning-3.0.2.tgz"
@@ -9634,7 +9639,12 @@ utils-merge@1.0.1:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
-"uuid@^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", uuid@^8.3.2:
+"uuid@^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0":
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
+uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==

From 202c304abde3229ebc23e6125e8eb7e74e6bc4cf Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Tue, 14 Nov 2023 09:59:12 +0100
Subject: [PATCH 2/4] ajout des drapeaux dans pour les langages :package:

---
 cryptide_project/package-lock.json         | 12 ++++++++++++
 cryptide_project/package.json              |  1 +
 cryptide_project/src/Components/NavBar.tsx | 18 +++++++++++++++++-
 cryptide_project/yarn.lock                 |  7 ++++++-
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/cryptide_project/package-lock.json b/cryptide_project/package-lock.json
index ba9eec6..bb63537 100644
--- a/cryptide_project/package-lock.json
+++ b/cryptide_project/package-lock.json
@@ -20,6 +20,7 @@
         "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-bootstrap": "^2.9.1",
+        "react-country-flag": "^3.1.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.11.0",
         "react-intl": "^6.5.2",
@@ -14548,6 +14549,17 @@
         }
       }
     },
+    "node_modules/react-country-flag": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
+      "integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/cryptide_project/package.json b/cryptide_project/package.json
index 142b8f2..73a098b 100644
--- a/cryptide_project/package.json
+++ b/cryptide_project/package.json
@@ -14,6 +14,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-intl": "^6.5.2",
diff --git a/cryptide_project/src/Components/NavBar.tsx b/cryptide_project/src/Components/NavBar.tsx
index 98fff75..ac0716d 100644
--- a/cryptide_project/src/Components/NavBar.tsx
+++ b/cryptide_project/src/Components/NavBar.tsx
@@ -12,9 +12,11 @@ import { BsFillPersonPlusFill } from 'react-icons/bs';
 import { HiLanguage } from 'react-icons/hi2';
 
 /* Components */
-import './NavBar.css';
+import ReactCountryFlag from "react-country-flag"
+
 
 /* Style */
+import './NavBar.css';
 import { useTheme } from '../Style/ThemeContext';
 
 // @ts-ignore
@@ -55,9 +57,23 @@ function AppNavbar({changeLocale}) {
                     title={<span><HiLanguage /></span>}
                     className="navbar-title" id="basic-nav-dropdown">
                         <NavDropdown.Item onClick={() => changeLocale('fr')}> 
+                            <ReactCountryFlag countryCode="FR"
+                                                svg
+                                                style={{
+                                                    width: '30px',
+                                                    height: '20px',
+                                                    margin: 'auto 10px 3px auto',
+                                                }}/>        
                             <FormattedMessage id="languageSelector.french"/> 
                         </NavDropdown.Item>
                         <NavDropdown.Item onClick={() => changeLocale('en')}> 
+                            <ReactCountryFlag countryCode="GB" 
+                                                svg
+                                                style={{
+                                                    width: '30px',
+                                                    height: '20px',
+                                                    margin: 'auto 10px 3px auto',
+                                                }}/>
                             <FormattedMessage id="languageSelector.english"/> 
                         </NavDropdown.Item>
                     </NavDropdown>
diff --git a/cryptide_project/yarn.lock b/cryptide_project/yarn.lock
index e89b3a7..da6e76a 100644
--- a/cryptide_project/yarn.lock
+++ b/cryptide_project/yarn.lock
@@ -8105,6 +8105,11 @@ react-bootstrap@^2.9.1:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
+react-country-flag@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz"
+  integrity sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
@@ -8291,7 +8296,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@*, "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=0.14.0, react@>=15.0.0, react@>=16.14.0, react@>=16.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0:
+react@*, "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=0.14.0, react@>=15.0.0, react@>=16, react@>=16.14.0, react@>=16.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==

From 87cdd9a4f0063e4d4bbdc5e9a25c642606012b7e Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Tue, 14 Nov 2023 14:22:15 +0100
Subject: [PATCH 3/4] =?UTF-8?q?ajout=20du=20code=20de=20la=20room=20affich?=
 =?UTF-8?q?=C3=A9=20dans=20le=20lobby,=20il=20peut=20etre=20cach=C3=A9=20o?=
 =?UTF-8?q?u=20montr=C3=A9=20en=20un=20simple=20clique.=20:zap:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cryptide_project/src/Pages/Lobby.css | 13 +++++++++++++
 cryptide_project/src/Pages/Lobby.tsx | 11 +++++++++++
 2 files changed, 24 insertions(+)

diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css
index 5aed52c..546a806 100644
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/cryptide_project/src/Pages/Lobby.css
@@ -41,4 +41,17 @@
     margin: 20px;
 }
 
+.codeDiv{
+    display: flex;
+    align-items: end;
+    justify-content: end;
+    margin: auto 20px;
+}
 
+.codeDiv p{
+    font-style: italic;
+    font-weight: bold;
+    color: gray;
+    font-size: 20px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index aea8d22..9e40a5a 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -21,6 +21,8 @@ import PlayerItemList from '../Components/PlayerItemList'
 
 function Lobby() {
     const theme=useTheme();
+    
+    const [codeShowed, setCodeShowed] = useState(true);
 
     const players = [
         { pdp: Person, name: "Dummy (vous)", id: 1 },
@@ -37,6 +39,15 @@ function Lobby() {
         <div className='lobby-container'>
             <div className='left-part'>
                 <div className='player-board'>
+                    <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
+                        {
+                            codeShowed ? (
+                                <p>Room : 63194</p>
+                            ) : (
+                                <p>Room : ******</p>
+                            )
+                        }
+                    </div>
                     {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
                     {players.map((player) => (
                         <PlayerItemList key={player.id} pdp={player.pdp} name={player.name} id={player.id} />

From da98290bf51d9bb1ade97eba88babc2f2b055753 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Tue, 14 Nov 2023 14:36:39 +0100
Subject: [PATCH 4/4] merge avec master :package:

---
 cryptide_project/package-lock.json   | 24 ------------------------
 cryptide_project/src/Pages/Lobby.tsx | 14 +++++++-------
 cryptide_project/src/Pages/Play.tsx  |  8 ++++----
 3 files changed, 11 insertions(+), 35 deletions(-)

diff --git a/cryptide_project/package-lock.json b/cryptide_project/package-lock.json
index 32027e4..14a8bc0 100644
--- a/cryptide_project/package-lock.json
+++ b/cryptide_project/package-lock.json
@@ -28,33 +28,9 @@
         "react-intl": "^6.5.2",
         "react-router-dom": "^6.18.0",
         "react-scripts": "5.0.1",
-<<<<<<< HEAD
-<<<<<<< HEAD
         "react-switch": "^7.0.0",
-=======
-=======
->>>>>>> 7e44c5e (ajout de dépendances pour un switch et stub dans les params de jeu :package:)
-<<<<<<< HEAD
         "socket.io": "^4.7.2",
         "socket.io-client": "^4.7.2",
-=======
-        "react-switch": "^7.0.0",
-<<<<<<< HEAD
->>>>>>> 3d3d620 (ajout de dépendances pour un switch et stub dans les params de jeu :package:)
-<<<<<<< HEAD
->>>>>>> 65f2cb6 (ajout de dépendances pour un switch et stub dans les params de jeu :package:)
-=======
-=======
-        "socket.io": "^4.7.2",
-        "socket.io-client": "^4.7.2",
->>>>>>> 2ba7efc (Début du serveur)
-<<<<<<< HEAD
->>>>>>> 6399f16 (Début du serveur)
-=======
-=======
-        "react-switch": "^7.0.0",
->>>>>>> 3d3d620 (ajout de dépendances pour un switch et stub dans les params de jeu :package:)
->>>>>>> 7e44c5e (ajout de dépendances pour un switch et stub dans les params de jeu :package:)
         "typescript": "^5.2.2",
         "vis-network": "^9.1.9",
         "web-vitals": "^2.1.4"
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index f9eefc6..d6b97da 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -31,15 +31,15 @@ function Lobby() {
     
     const [codeShowed, setCodeShowed] = useState(true);
 
-    const players = [
+    const playerslst = [
         { pdp: Person, name: "Dummy (vous)", id: 1 },
         { pdp: Person, name: "Dummy2)", id: 1 },
         //{ pdp: Bot, name: "Boat", id: 2 },
         // { pdp: Bot, name: "Bot-tom", id: 3 },
     ];
 
-    while (players.length < 3) {
-        players.push({ pdp: Bot, name: "BotAdded", id: players.length + 1 });
+    while (playerslst.length < 3) {
+        playerslst.push({ pdp: Bot, name: "BotAdded", id: playerslst.length + 1 });
     }
 
     const navigate = useNavigate();
@@ -112,16 +112,16 @@ function Lobby() {
                     <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
                         {
                             codeShowed ? (
-                                <p>Room : 63194</p>
+                                <p>Room : {room}</p>
                             ) : (
                                 <p>Room : ******</p>
                             )
                         }
                     </div>
                     {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
-                    <PlayerItemList pdp={Person} name="Dummy (vous)"/>
-                    <PlayerItemList pdp={Bot} name="Boat"/>
-                    <PlayerItemList pdp={Bot} name="Bot-tom"/>
+                    {players.map((player, index) => (
+                        <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
+                    ))}
                 </div>
             </div>
 
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index be516d1..b6ead60 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -48,12 +48,12 @@ function Play() {
         
       }, []);  // Aucune dépendance ici
 
-      useEffect(() => {
+    useEffect(() => {
         if (room !== null) {
-          const nouvelleURL = `/lobby?room=${room}`;
-          navigate(nouvelleURL);
+            const nouvelleURL = `/lobby?room=${room}`;
+        navigate(nouvelleURL);
         }
-      }, [room, navigate]);
+    }, [room, navigate]);