ajout de la selection de difficulté pour les bots + ajout du nombre de bot en fonction du nombres de joueur restant ⚡

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"
       }

cryptide_project/package.json

@@ -47,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.7"
   }
 }

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>
     )
 }

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>
 

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;

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==