From 9368d0d7b0c3f1016e20b5daaa5e14bdfbe16db8 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Wed, 8 Nov 2023 16:22:14 +0100
Subject: [PATCH]  ajout du la page du leaderboard 'endgame'
 :building_construction:

---
 cryptide_project/src/App.tsx                  |   4 ++
 .../src/Components/BigButtonNav.tsx           |  17 ++++++
 .../src/Components/ButtonImgNav.css           |  17 ++++++
 .../src/Components/PersonStatus.tsx           |  19 +++++++
 cryptide_project/src/Pages/EndGame.css        |  34 ++++++++++++
 cryptide_project/src/Pages/EndGame.tsx        |  49 ++++++++++++++++++
 cryptide_project/src/Pages/Play.tsx           |   2 +-
 cryptide_project/src/Style/Global.css         |  24 +++++++++
 cryptide_project/src/res/icon/leave.png       | Bin 0 -> 1534 bytes
 cryptide_project/src/res/icon/replay.png      | Bin 0 -> 1193 bytes
 10 files changed, 165 insertions(+), 1 deletion(-)
 create mode 100644 cryptide_project/src/Components/BigButtonNav.tsx
 create mode 100644 cryptide_project/src/Components/PersonStatus.tsx
 create mode 100644 cryptide_project/src/Pages/EndGame.css
 create mode 100644 cryptide_project/src/Pages/EndGame.tsx
 create mode 100644 cryptide_project/src/res/icon/leave.png
 create mode 100644 cryptide_project/src/res/icon/replay.png

diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx
index a71ebf0..dbdb456 100644
--- a/cryptide_project/src/App.tsx
+++ b/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>
diff --git a/cryptide_project/src/Components/BigButtonNav.tsx b/cryptide_project/src/Components/BigButtonNav.tsx
new file mode 100644
index 0000000..6f4af20
--- /dev/null
+++ b/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;
diff --git a/cryptide_project/src/Components/ButtonImgNav.css b/cryptide_project/src/Components/ButtonImgNav.css
index b0ece90..4f69b15 100644
--- a/cryptide_project/src/Components/ButtonImgNav.css
+++ b/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;
diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx
new file mode 100644
index 0000000..beb47c9
--- /dev/null
+++ b/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;
diff --git a/cryptide_project/src/Pages/EndGame.css b/cryptide_project/src/Pages/EndGame.css
new file mode 100644
index 0000000..b6ec2f1
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx
new file mode 100644
index 0000000..3733fa3
--- /dev/null
+++ b/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;
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx
index 4ca8821..98740c5 100644
--- a/cryptide_project/src/Pages/Play.tsx
+++ b/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>
diff --git a/cryptide_project/src/Style/Global.css b/cryptide_project/src/Style/Global.css
index aa60a8a..42bab6c 100644
--- a/cryptide_project/src/Style/Global.css
+++ b/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; */
diff --git a/cryptide_project/src/res/icon/leave.png b/cryptide_project/src/res/icon/leave.png
new file mode 100644
index 0000000000000000000000000000000000000000..89b9d35fc55206b78e92487b60662cb9914d7b92
GIT binary patch
literal 1534
zcmV<a1p)erP)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz00009a7bBm000XU
z000XU0RWnu7ytkTut`KgRCt{2omq$-MHGg=j4N(&1s4K}8WaiWiwbTqNz`b_h>XOD
zkBS@mAnHRD6~qO%C?PP$DEOf0i=t6{Fq%Y-h~k@?af_IlL^LK*lc;gbv=p2Rm*)1p
zUENh(OV<zQWoB-5cYRY`bxxf+7m|{al9G~=l9Jl3D}Wz?EO46u77&3ZJ?KnRwwVaD
z*@KQWX~Am&u*rjtOh6)0bR#5mB_N(D0r5<&05TtV9vBC9i){o}0`u@oQ3II`tS_<R
zSqGesABq;p#lQ}Y<>z+bBG)$^E0EcmFuI|f=J?*D1oA-*$4tGxTq-&s^9^{(a~<A)
zbU;=a0P>u}`;QLDxB(z)N$g6|0r}Ga5Y<LiT?70EYyqyS@c9G;b3kSQ+q&AB0v5L&
z$hd(K@^y{t|B`D<7fN(MRvG{@R^$3t3xujrq60F|0FdFD_prDIl<0scy<Y>yTFhv)
z2bBMS>)QzAl-%U%Ds)l>N|Zp5K;d=`7;33{A?Bs~`id3^^50%2uBBdar_yY`*HnR@
z5;c&H=1Mq3EoXO$eI=`@VTbu%Kl=#e0^lv+*NP7{Eur>rfwzGNWG`et!}mF10mxS0
zfZQyTTxRKE9|unIG~Y|TvPOIYaxU<%B^X(k?FE(rN8m<5OzP@&@<jtMvM$?Vz~O7c
zL39G-)`nqZV(RsHcSFxu)mv{I$Z-|-yG`1Y5}CE7ph71vIEImlJ!=WdNJzoO^MQRH
zz{o5@nFuBP?qVX(96;Gx14g4jTutOz!%#-#(9os=Kf?<k$4Kz5YzMvBqm7xs9*a=M
zEKl@a0nwSr|B~=|UN<!`QpP-hVjajFi8qz)lzR)>`6R&CmzO}6X>^7P5FT8RtE&Sw
z3wWeh2lAmtN2oN=UV5ZK7+DG1A@kfhAp+S@@*!XAvs|_j`pyiP@~M`F2IQ%diD^Y)
z@=FbL+?O&p*aCBTNI=dmvFC9|pU=N+pu=vFIl&ebwM`rh5T)DtgiK!SGl9;OWpJI&
z`W-k-+Oq|vPA;$$AV@~XYG5bu2k;Sa-GI;BXrQy6$+c+%ih>>-5St5vtiYxV4s)7@
z@?IN&nD9N`?bE(VC@MuLdLR!Q=%_0PTth*5qUJRoGW^_L0vR$;X6burr;HX#vfQqc
zZL2wOjimx(UIMwy!05P>Fy$qXS8Kx94ID+7@)F2oz^7=V12V%vHsc(^m3KgpS5Byv
z7@`F7Sq&hgge@<DEUgG*64;-x<t31#D`q$DDcFw>NnQX^dm+c>el}_$ToQu30J2>2
zZS$%cYg$6Mat`DK+4Go^RMT!90DN2l$hICME)+QjvOE`mIx_eBSrw1Fts+c01=1NE
z-8Znh#}49f1!r;E!2zA%fpm|KZo8+)-`-zglzdZ==hX@zi=-??9WT3MYCgFn*Zz>K
zpfXK+kQM@Y)BuEDXSk2=k+l7jW;_1?XV4-bi!8wCj!We|@AKqjtxh}ZJxHQ%49HrG
zK$JaJkXDpw+6}Y>NZD=As-}{)d+DVLsX8a(zq|&rQ|66cI#lYF=(P6=EdWxdiu52G
zbf)~w3jYu$^KiWcvd|KYjU|1EYc<<dXa5c%VjxIvl1UiqB<ooQ9L%i1R4!K3K#-)g
zHIlPb)fxN&c)ExGF-QjjpK4x9W#vZ=#I<H=)>-`ALQO3biUvrha-2>OvfsHBSBeS<
z61yr3M8(}s#xF$&WJogz`3`<5Iv|}S37ra}syw(aiV{etgy3F{Wp;k2(v_kGqIA2)
zC|Q9YiW-PcCjCB3g#dIFJ&?mC3{wV*`l<`piXI3OhAFePtWE~IRx5xYN3aJ0c?0`3
z-*qi&t*DUkXrtzP0wOx7&zHTtUa;@(vha;M_(~g~+y{II{4L*@a95u|qv@LOIxu|S
kOiM~iN=iyfN+K@(59@(a7&l%5@c;k-07*qoM6N<$f^e3xUH||9

literal 0
HcmV?d00001

diff --git a/cryptide_project/src/res/icon/replay.png b/cryptide_project/src/res/icon/replay.png
new file mode 100644
index 0000000000000000000000000000000000000000..abf114d49e5f7c5f99a87551a3136f22494182cb
GIT binary patch
literal 1193
zcmV;a1XlZrP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000XU
z000XU0RWnu7ytkSTS-JgRCt{2n_GxhRTRg6>Uf!q8dOju9g9+O%qyblQz}?gG%+v2
z2sTKjr8tKACJJ6t)WqwHU5p5uin7E9@q$+<)4U)`g^Gh>cw<TiFXNF7>x1F2_jhi4
zpYMEh{;*zVhPC$o?|s(V>oSldM~)mhQb9HF7BC-J2Ydy53w#4?29^QSfpI{0GLFH(
zYXN`L6?hx?9Jm5_5##}I3|K6-GKY;oGtf)(y8*x&;C94K7n2jfG$FO*cpA7X3)=;B
zke~Mjw#w;wjzrz02B1?Z37Fwq)LdXT(Bg38e)$y`S}FogrMS@`KQXV}4NL{ECRp$_
zpb2OMCITaX=f#f{oN7I=7B~Yu4yku1&@C+jc0}BCEAS;SK8CG6z(>HJA?zFkp2abG
z$%evSPj!+#EZFS`)Bz_0Y#srg!XXxf-273X#)16`U{OGn+3hMqbOiniNx%_VtSgKJ
zE*7!B!iCY-BYyi!af{x-X@hO$JSW>WxGN$7ZNLQFq6#=}u-`1dw}Sq_qZnaNEutrG
z(W6M7p`PPbu*`R|H-PiNVc<t#JFrT!yaq{tR7N)lsKh<S860D)WT1&r0}M>zG?QSV
z;TCM-e}YcH1q}iBvUG4i0IxXIUvIbtACeK=0v-bE9X(ssTjiXFfJ0=608iwmq|s{8
zHqmGZ$vv}1fG6@BFvg;d=L}h7Eg2=ilM~u%@sv(zY^)~31bFQ}i<uTai}vr9g8V`m
z5a5aYE`^u4sMF|F$y3=7;K_HqLy96%F<hhX4rNAwCvsOjdzAFLkAYCz5hoP_3UVPr
zimM~Qi&H$U1NMsSm-<|(2sjs_6V*O@)!l%|1kCj**+TjR{0A%nx<s(^k|DxG##GCp
zB&rkqBBm1@uhFN{_ryJbzbTI}I9sFhr?}OY$38{XW$+OCOrv{wTxAz6rj}_vh0khi
zs47(~Z1*Yp*)jpgq|9v#H5wa_lBD17XzFaLB%PFi>(cMH-Pl~CA>cp~g_WAN_a_-G
zh*U@e)=$6(NfmGLDQt<^^ZU+G%dCLun$7=fqdzc26Af09EvTuLs~Q5-D3291`4p=<
z{4lbEPhIu}6kgUeAI=N&rAD2h3>Mc{8L>iRM0JKbQ#y>4e8Io2OD+zl(olA8a@-C#
zq1y1>x5)^O6AU&mzBA>UFk0Rcx|gNO9-X4r&@EP@YcIMs4!kQZFWu(9Ppk4X%iws_
z8{s`iHlG2u6`3B}m-Zy-4Ef$XLpv(YWS9=!q#AW2U^b{E1J<<x6QajuW}qr&=v^ML
zaZheVDI*ceG5!&-$on!-p+e~tX@@B<-cL$cqhzG!V{xdL1N0T1xhkQ`1iHvzRM<Jf
zq_W56E6*m>=<C-pXNtmz8kT&6GQbPK2H+nHo4zkE&PizxM%zGVX=tpIDf6)ZOK?U0
zrKZ8sxGh=o6+?kHWpgT&&H>(+q-Lzm`Mw-Ea^%R7gQ9o>Lxy%=AqKRt00000NkvXX
Hu0mjfm9!d8

literal 0
HcmV?d00001