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

cryptide_project/src/Components/ScoreBoard.tsx

@@ -32,11 +32,19 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
         // <div className='LeaderBoardiv'>
         <div className='LeaderBoardiv'>
             <Tabs style={{width:"100%"}}
-                defaultActiveKey="daily"
+                defaultActiveKey="perso"
                 id="ScoreBoard"
                 className="mb-3">
-                <Tab eventKey="perso" title="Vos Stats" disabled = { !Player.pseudo.startsWith("Guest_") ? false : true}>
-                <Container fluid>
+                <Tab eventKey="perso" title="Vos Stats">
+                
+                { Player.pseudo.startsWith("Guest_") ? (
+                    <div className='guestDisplay'>
+                        <h4> 
+                            <i>Veuillez vous connecter pour bénéficier des statistiques personnalisées.</i>
+                        </h4>
+                    </div>
+                ) : (
+                    <Container fluid>
                         <Row>Stats en solo :</Row>
                         <Row>
                             <Col sm={10}>Partie Jouées :</Col>
@@ -65,8 +73,9 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
                             <Col className='leftRow'>{Player !== null ? Player.onlineStats.ratio : "0"}</Col>
                         </Row>
                     </Container>
+                )}
                 </Tab>
-                <Tab eventKey="daily" title="Daily"
+                {/* <Tab eventKey="daily" title="Daily"
                     style={{display:"flex", flexDirection:'column', alignItems:'center'}}>
                     <img src={trophy}
                             height='100'
@@ -101,10 +110,10 @@ const ScoreBoard: React.FC<{ Player: User }> = ({ Player }) => {
                                 height='100'
                                 width='100'
                                 alt="Person2"/>
-                </Tab>
+                </Tab> */}
             </Tabs>
             
-                <ButtonImgNav dest='/' img={share}/>
+                {/* <ButtonImgNav dest='/' img={share}/> */}
                 </div>
         //</div>
     );

cryptide_project/src/Pages/InGame.tsx

@@ -241,7 +241,7 @@ const InGame = ({locale, changeLocale}) => {
           </div>
         }   
 
-        <div className='paramDiv'>
+        {/* <div className='paramDiv'>
           <button className='button'
             style={{ 
                 backgroundColor: theme.colors.tertiary,
@@ -250,7 +250,7 @@ const InGame = ({locale, changeLocale}) => {
             onClick={handleChangeS}>
             <img src={Param} alt="paramètres" height='40'/>
           </button>
-        </div>
+        </div> */}
 
 
 

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

cryptide_project/src/Pages/Lobby.tsx

@@ -43,6 +43,11 @@ 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() {
@@ -159,6 +164,24 @@ 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,22 +214,22 @@ 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>
-                <ul>
-                    <li><h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim</h4></li>
+                <ul> */}
+                    {/* <li><h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim</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>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" />
@@ -214,13 +237,48 @@ function Lobby() {
                     </button>
                 </center> */}
 
-                <div className='centerDivH'>
+                <div className='lobbyR' 
+                style={{flexDirection:'column',
+                        alignItems:'space-around'}}>
+                    <h3>Bienvenue dans votre lobby !</h3>
+                    <p>Attendez que tous vos amis se joignent 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>
+
                     <button className='button' onClick={StartGame}
                         style={{ 
                             backgroundColor: theme.colors.tertiary,
-                            borderColor: theme.colors.secondary
+                            borderColor: theme.colors.secondary,
+                            width: 'auto',
+                            height: 'auto'
                         }}>
-                        <img src={cible} alt="cible" height="40"/>
+                        Démarrer la partie !
                     </button>
                 </div>
             </div>

cryptide_project/src/Pages/Play.css

@@ -70,4 +70,18 @@
     border-width: 2px;
 
     font-size:larger;
+}
+
+.guestDisplay{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* flex-direction: column; */
+
+    margin: 20px;
+    padding: 15px;
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+    
+    background-color: white;
 }

cryptide_project/src/Pages/Play.tsx

@@ -184,7 +184,7 @@ function Play() {
                     <button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
                     <button onClick={launchEngimeJour} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Résoudre une énigme</button>
                     <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
-                    <button  className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
+                    {/* <button  className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button> */}
                     
                 </div>
             </div>