ajout du la page du leaderboard 'endgame' 🏗️

cryptide_project/src/App.tsx

@@ -10,6 +10,8 @@ import SignUp from './Pages/SignUpForm';
 import Play from './Pages/Play';
 import Lobby from './Pages/Lobby';
 
+import EndGame from './Pages/EndGame';
+
 /* Component */
 import AppNavbar from './Components/NavBar';
 
@@ -62,6 +64,8 @@ function App() {
         <Route path="/signup" element={<SignUp />} />
         <Route path="/play" element={<Play/>} />
         <Route path="/lobby" element={<Lobby/>} />
+
+        <Route path="/endgame" element={<EndGame/>} />
       </Routes>
     </BrowserRouter>
   </IntlProvider>

cryptide_project/src/Components/BigButtonNav.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './ButtonImgNav.css';
+import { FormattedMessage } from 'react-intl';
+
+//@ts-ignore
+function BigButtonNav({ dest, img}) {
+    return (
+    <Link to={dest} className="link-without-underline">
+        <button className='bigbuttonNabImg'>
+            <img src={img} alt="Button Image" height="100" width="100"/>
+        </button>
+    </Link>
+    );
+}
+
+export default BigButtonNav;

cryptide_project/src/Components/ButtonImgNav.css

@@ -15,6 +15,23 @@
     align-items: center;
 }
 
+.bigbuttonNabImg{
+    margin: 15px 0;
+    width: auto;
+    height: 100px;
+
+    background-color: #85C9C2;
+    color: #2A4541;
+    border-radius: 15px;
+    border-width: 0;
+
+    font-size:large;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
 .buttonNabImg p {
     color:white;
     margin-top: 15px;

cryptide_project/src/Components/PersonStatus.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '../Style/Global.css'
+import Person from '../res/img/Person.png'
+import leave from '../res/img/bot.png'
+
+//@ts-ignore
+function PersonStatus({img = Person, state= leave, name = "Dummy"}) {
+    return (
+        <div className='centerDivV'>
+            <img src={img} alt="player" height="100" width="100"/>
+            <h4>{name}</h4>
+            <div className='statusDiv'>
+                <img src={state} alt="state" height="30" width="30"/>
+            </div>
+        </div>
+    );
+}
+
+export default PersonStatus;

cryptide_project/src/Pages/EndGame.css

@@ -0,0 +1,34 @@
+
+.head{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.leaderboard-header{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    width: fit-content;
+
+    border-radius: 0px 0px 30px 30px;
+    border: solid #85C9C2;
+    border-width: 0 5px;
+
+    padding: 20px;
+}
+
+.bottom{
+    display: flex;
+    justify-content: space-around;
+}
+
+.winner{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}

cryptide_project/src/Pages/EndGame.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import './EndGame.css';
+import '../Style/Global.css';
+import Person from '../res/img/Person.png';
+import Leave from '../res/icon/leave.png';
+import Replay from '../res/icon/replay.png';
+
+/* Component */
+import PersonStatus from '../Components/PersonStatus';
+import ButtonImgNav from '../Components/ButtonImgNav';
+import BigButtonNav from '../Components/BigButtonNav';
+
+/* nav */
+import { Link } from 'react-router-dom';
+
+/* lang */
+import { FormattedMessage } from 'react-intl';
+
+
+function EndGame() {
+    return (
+        <div>
+            <div className="head">
+                <header className='leaderboard-header'>
+                    <h1>Dummy a gagné !</h1>
+                    <h3>Le tueur était <u>Bob</u></h3>
+                </header>
+            </div>
+            <div className='winner'>
+                <img src={Person} width='300' height='300'/>
+            </div>
+            <div className='bottom'>
+                <div className='centerDivH'>
+                    <BigButtonNav dest="/play" img={Leave}/>
+                </div>
+                <div className='centerDivH'>
+                    <PersonStatus state={Replay} name="Dummy"/>
+                    <PersonStatus state={Leave} name="bot2"/>
+                    <PersonStatus state={Leave} name="bot3"/>
+                </div>
+                <div className='centerDivH'>
+                    <BigButtonNav dest="/lobby" img={Replay}/>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default EndGame;

cryptide_project/src/Pages/Play.tsx

@@ -77,7 +77,7 @@ function Play() {
                     {/* <button className='ButtonNav'>
                         Share
                     </button> */}
-                    <ButtonImgNav dest='/' img={share}/>
+                    <ButtonImgNav dest='/endgame' img={share}/>
                 </div>
             </div>
         </div>

cryptide_project/src/Style/Global.css

@@ -1,3 +1,16 @@
+.centerDivV{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.centerDivH{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
 
 .item-horizontal-div{
     display: flex;
@@ -9,6 +22,17 @@
     margin: 10px 20px;
 }
 
+.statusDiv{
+    background-color: #A7E2DC;
+    border-radius: 15px;
+
+    height: 30px;
+    width: 75px;
+
+    display: flex;
+    justify-content: center;
+}
+
 /**Form**/
 .form-container {
     /* background-color: #D7D4C6; */