cryptide_project/package-lock.json

@@ -22,41 +22,21 @@
         "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",
         "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"
+      },
+      "devDependencies": {
+        "@types/uuid": "^9.0.7"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4563,6 +4543,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",
@@ -14693,6 +14679,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",
@@ -15828,6 +15825,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",
@@ -17150,9 +17155,14 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
+      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "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

@@ -16,6 +16,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",
@@ -54,5 +55,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.7"
   }
 }

cryptide_project/src/Components/NavBar.tsx

@@ -15,9 +15,11 @@ import { HiLanguage } from 'react-icons/hi2';
 import logo from '../res/img/logo2_preview_rev_1.png';
 
 /* 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>

cryptide_project/src/Components/PlayerItemList.tsx

@@ -1,14 +1,36 @@
 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-container'>
             <div className='item-horizontal-div'>
-            <img src={pdp} alt='player-image' height="100" width="100"/>
+                <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.css

@@ -40,4 +40,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;
+}

cryptide_project/src/Pages/Lobby.tsx

@@ -28,6 +28,20 @@ import Player from '../model/Player';
 
 function Lobby() {
     const theme=useTheme();
+    
+    const [codeShowed, setCodeShowed] = useState(true);
+
+    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 (playerslst.length < 3) {
+        playerslst.push({ pdp: Bot, name: "BotAdded", id: playerslst.length + 1 });
+    }
+
     const navigate = useNavigate();
 
 
@@ -95,10 +109,19 @@ function Lobby() {
         <div className='lobby-container'>
             <div className='left-part'>
                 <div className='player-board'>
+                    <div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
+                        {
+                            codeShowed ? (
+                                <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 (?)*/}
                     {players.map((player, index) => (
-                        <PlayerItemList key={player.id} pdp={PersonImg} name={player.name}/>
+                        <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
                     ))}
-                    {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
                 </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;