From b973704fc951a2f0fe68c3fa497572ccbe843678 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Fri, 1 Dec 2023 16:21:07 +0100
Subject: [PATCH] ajout de la section information pour rejoindre une partie
 :zap:

---
 cryptide_project/src/Pages/Play.css | 23 +++++++++++++++++++++++
 cryptide_project/src/Pages/Play.tsx | 23 +++++++++++++++++------
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/cryptide_project/src/Pages/Play.css b/cryptide_project/src/Pages/Play.css
index 07e51aa..1ebf969 100644
--- a/cryptide_project/src/Pages/Play.css
+++ b/cryptide_project/src/Pages/Play.css
@@ -70,4 +70,27 @@
     border-width: 2px;
 
     font-size:larger;
+}
+
+.returnDiv{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin:40px 15px;
+
+    border: solid 2px whitesmoke;
+    border-radius: 15px;
+    
+    background-color: white;
+}
+
+.returnDiv p {
+    margin: 15px;
+    padding: 10px;
+    border: solid 1px whitesmoke;
+    border-radius: 10px;
+
+    font-weight:500;
 }
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index 83106db..1e0fb54 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/cryptide_project/src/Pages/Play.tsx
@@ -29,7 +29,7 @@ import { loadImageAsync } from '../ImageHelper';
 import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
-
+import Info from '../res/icon/infoGreen.png';
 
 let cptNavigation = 0
 
@@ -232,10 +232,22 @@ function Play() {
 
         <div className="MainContainer">
             <div className="leftContainer">
-                {/* <button className='ButtonNav'>
-                    Param
-                </button> */}
-                {/* <ButtonImgNav dest='/signup' img={defaultImg} text="Gestion du compte"/> */}
+                {goBackRoom != -1 && 
+                    <div className='returnDiv'>
+                        <div style={{
+                            display:'flex',
+                            alignItems:'center'
+                        }}>
+                            <img src={Info} alt='info' height='50px' width='50px'/>
+                            <h1>Information</h1>
+                        </div>
+                        <p> Il semblerait que vous avez quitté une partie en cours... <br/> <i>Et si nous y retournions ?</i></p>
+                        <button onClick={goBack} className="ButtonNav" 
+                            style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>
+                            Retourner à la partie
+                        </button>
+                    </div>
+                }
             </div>
             <div className="MidContainer">
                 <div>
@@ -275,7 +287,6 @@ function Play() {
 
                     <button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
                     <button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
-                    {goBackRoom != -1 && <button onClick={goBack} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Retourner à la partie</button>}
                 </div>
             </div>
             <div className='rightContainer'>