From 7451857b0b2110f52700ae1a7e2e3dd4b2013d46 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 29 Nov 2023 09:47:27 +0100
Subject: [PATCH] ajout du lien d'invitation et selecteur de nombre de noeud
 dans lobby

---
 cryptide_project/src/Pages/Lobby.css | 10 +++
 cryptide_project/src/Pages/Lobby.tsx | 99 +++++++++++++++++++++++++---
 2 files changed, 101 insertions(+), 8 deletions(-)

diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css
index 60dfcf0..0428a83 100644
--- a/cryptide_project/src/Pages/Lobby.css
+++ b/cryptide_project/src/Pages/Lobby.css
@@ -59,4 +59,14 @@
 .centerButton {
     display: flex;
     justify-content: center;
+}
+
+.lobbyR{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.lobbyR *{
+    margin: 20px 10px;
 }
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index 6fcd06f..1bef7b7 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -42,6 +42,10 @@ 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
 
@@ -62,7 +66,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){
@@ -146,7 +157,7 @@ function Lobby() {
 
 
     function StartGame(){
-        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 30)
+        const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber)
         setPersonData(choosenPerson)
         setPersonNetworkData(networkPerson)
         setIndicesData(choosenIndices)
@@ -159,6 +170,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'>
@@ -191,7 +217,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>
@@ -200,21 +226,78 @@ 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>
+                    <label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
+                    <input
+                        type="number"
+                        id="numberInput"
+                        value={enteredNumber}
+                        onChange={handleNumberChange}
+                        min={20}
+                        max={60}/>
+                    <p>La valeur saisie : {enteredNumber}</p>
+                </div>
+
 
-                <div className='centerDivH'>
+
+                    <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'>
                     <button className='button' onClick={StartGame}
                         style={{ 
                             backgroundColor: theme.colors.tertiary,
@@ -222,7 +305,7 @@ function Lobby() {
                         }}>
                         <img src={cible} alt="cible" height="40"/>
                     </button>
-                </div>
+                </div> */}
             </div>
         </div>
     );