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() { } /> } /> } /> + + } /> 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 ( + + + + ); +} + +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 ( +
+ player +

{name}

+
+ state +
+
+ ); +} + +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 ( +
+
+
+

Dummy a gagné !

+

Le tueur était Bob

+
+
+
+ +
+
+
+ +
+
+ + + +
+
+ +
+
+
+ ); +} + +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() { {/* */} - + 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 0000000..89b9d35 Binary files /dev/null and b/cryptide_project/src/res/icon/leave.png differ diff --git a/cryptide_project/src/res/icon/replay.png b/cryptide_project/src/res/icon/replay.png new file mode 100644 index 0000000..abf114d Binary files /dev/null and b/cryptide_project/src/res/icon/replay.png differ