Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into lobbyFornite

cryptide_project/src/Pages/InGame.tsx

@@ -72,6 +72,7 @@ const InGame = ({locale, changeLocale}) => {
     isDaily=false
   }
 
+
   let isEasy: boolean = true
   const isEasytmp = params.get('easy');
   if (isEasytmp == "false"){

cryptide_project/src/Pages/Lobby.css

@@ -59,4 +59,39 @@
 .centerButton {
     display: flex;
     justify-content: center;
+}
+
+.lobbyR{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.lobbyR *{
+    margin: 20px 10px;
+}
+
+.valuebutton{
+    border-radius: 90px;
+    width: 50px;
+    height: 50px;
+    background-color: #fff;
+}
+
+.nbNodeDiv{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    border: solid 2px whitesmoke;
+    border-radius: 15px;
+    
+    background-color: white;
+
+    width: 70%;
+}
+
+.nbNodeDiv div {
+    display: flex;
+    justify-content: center;
 }

cryptide_project/src/Pages/Lobby.tsx

@@ -42,13 +42,16 @@ import { socket } from "../SocketConfig";
 import { random } from 'lodash';
 import SessionService from '../services/SessionService';
 
+import { useRef } from 'react';
+import Button from 'react-bootstrap/Button';
+import Overlay from 'react-bootstrap/Overlay';
+
+
 let gameStarted = false
 
 function Lobby() {
     const theme=useTheme();
     const navigate = useNavigate();
-    
-    const [enteredNumber, setEnteredNumber] = useState(20);
 
     //@ts-ignore
     const handleNumberChange = (event) => {
@@ -68,7 +71,14 @@ function Lobby() {
         socket.emit("lobby joined", room, new EasyBot("botId" + Math.floor(Math.random() * 1000), "Bot" + Math.floor(Math.random() * 100), "").toJson())
     }
 
-    
+    //* nb Node
+    const [enteredNumber, setEnteredNumber] = useState(20);
+
+    //@ts-ignore
+    const handleNumberChange = (event) => {
+        const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10)));
+        setEnteredNumber(newNumber);
+    };
 
     useEffect(() => {
         if (first){
@@ -165,6 +175,21 @@ function Lobby() {
         socket.emit('network created', JSON.stringify(networkPerson, null, 2), JSON.stringify(choosenPerson), JSON.stringify(choosenIndices), room, start);
     }
 
+    const copyGameLink = () => {
+        setShow(!show)
+        
+        const gameLink = "http://localhost:3000/lobby?room="+ room;
+        navigator.clipboard.writeText(gameLink)
+            .then(() => {
+                console.log('Lien copié avec succès !');
+            })
+            .catch((err) => {
+                console.error('Erreur lors de la copie du lien :', err);
+            });
+    };
+
+    const [show, setShow] = useState(false);
+        const target = useRef(null);
     return (
         <div className='lobby-container'>
             <div className='left-part'>
@@ -197,7 +222,7 @@ function Lobby() {
             <div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>
 
             <div className='right-part'>
-                <div className='title-param-div'>
+                {/* <div className='title-param-div'>
                     <img src={param} alt="param"/>
                     <h2>Paramètre de la partie</h2>
                 </div>
@@ -206,20 +231,83 @@ function Lobby() {
                     <li><h4>paramètre super important pour la partie</h4></li>
                     <li><h4>paramètre super important pour la partie</h4></li>
                     <li><h4>paramètre super important pour la partie</h4></li>
-                    <li><h4>Niveau des bots : Facile </h4></li> {/* mettre un dropdown ou un swiper */}
-                    <li><h4>Thèmes : basique </h4></li> {/* mettre un dropdown*/}
+                    <li><h4>Niveau des bots : Facile </h4></li>
+                    <li><h4>Thèmes : basique </h4></li> */}
                     {
                         //? mettre un timer pour chaques personne ?
                         //? indice avancé ? ==> négation, voisin du 2e degré etc.
                     }
-                </ul>
+                {/* </ul> */}
                 {/* <center >
                     <button className='buttonNabImg' onClick={StartGame}>
                         <img src={cible} alt="Button Image" height="50" width="50" />
                         <p>{"la chasse !"}</p>
                     </button>
                 </center> */}
+                <div className='lobbyR' 
+                    style={{flexDirection:'column',
+                            alignItems:'space-around'}}>
+                        <h3>Bienvenue dans votre lobby !</h3>
+                        <p>Attendez que tous vos amis rejoignent avant de lancer la partie.</p>
+                        {/* Bouton pour copier le lien */}
+                        <Button variant="primary" ref={target} onClick={copyGameLink}>
+                            Inviter des amis
+                        </Button>
+                        <Overlay target={target.current} show={show} placement="top">
+                            {({
+                            placement: _placement,
+                            arrowProps: _arrowProps,
+                            show: _show,
+                            popper: _popper,
+                            hasDoneInitialMeasure: _hasDoneInitialMeasure,
+                            ...props
+                            }) => (
+                            <div
+                                {...props}
+                                style={{
+                                position: 'absolute',
+                                backgroundColor: theme.colors.secondary,
+                                padding: '2px 10px',
+                                color: 'white',
+                                borderRadius: 3,
+                                ...props.style,
+                                }}
+                            >
+                            Lien copié
+                        </div>
+                        )}
+                    </Overlay>
+
+                <div className='nbNodeDiv'>
+                    <label htmlFor="numberInput">Sélectionner le nombre de noeud (entre 20 et 60) :</label>
+                    <div>
+                        <button className='valuebutton' onClick={() => { if (enteredNumber>20) setEnteredNumber(enteredNumber-1)}}
+                            style={{borderColor:theme.colors.secondary}}> - </button>
+                        <input
+                            // type="number"
+                            id="numberInput"
+                            disabled
+                            value={ "Nombre de noeuds : " + enteredNumber}
+                            onChange={handleNumberChange}
+                            min={20}
+                            max={60}/>
+                        <button className='valuebutton' onClick={() => { if (enteredNumber<60) setEnteredNumber(enteredNumber+1)}}
+                            style={{borderColor:theme.colors.secondary}}> + </button>
+                    </div>
+                </div>
+
 
+                    <button className='button' onClick={StartGame}
+                        style={{ 
+                            backgroundColor: theme.colors.tertiary,
+                            borderColor: theme.colors.secondary,
+                            width: 'auto',
+                            height: 'auto'
+                        }}>
+                        Démarrer la partie !
+                    </button>
+                </div>
+                {/* <div className='centerDivH'>
                 <div>
                     <label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
                     <input
@@ -241,7 +329,7 @@ function Lobby() {
                         }}>
                         <img src={cible} alt="cible" height="40"/>
                     </button>
-                </div>
+                </div> */}
             </div>
         </div>
     );

cryptide_project/src/Pages/Play.tsx

@@ -27,10 +27,7 @@ import Stub from '../model/Stub';
 
 import SessionService from '../services/SessionService';
 import { loadImageAsync } from '../ImageHelper';
-
-
 import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
-
 import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 
@@ -44,7 +41,6 @@ function Play() {
 
     const target = useRef(null);
 
-
     useEffect(() => {
         const fetchUserInformation = async () => {
             try {