diff --git a/cryptide_project/src/Pages/EndGame.css b/cryptide_project/src/Pages/EndGame.css
index 0d69be8..00f1e43 100644
--- a/cryptide_project/src/Pages/EndGame.css
+++ b/cryptide_project/src/Pages/EndGame.css
@@ -33,10 +33,31 @@
align-items: center;
}
-.playerContainer {
+.playersContainer {
display: flex;
flex-direction: column;
align-items: center;
- padding-left: "5px";
- }
-
\ No newline at end of file
+ /* padding-left: "5px"; */
+
+ width: 100px;
+ background-color: red;
+}
+
+.playerContainer{
+ /* display: flex;
+ align-items: center; */
+ /* flex-direction: column; */
+
+ width: 300px;
+
+ border: solid 1px whitesmoke;
+ border-radius: 15px;
+
+ background-color: white;
+}
+
+.losingPlayer{
+ display: flex;
+
+ background-color: yellow;
+}
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx
index cf3d932..5e6b768 100644
--- a/cryptide_project/src/Pages/EndGame.tsx
+++ b/cryptide_project/src/Pages/EndGame.tsx
@@ -28,7 +28,40 @@ function EndGame() {
const {winner, person, players, indices} =useGame()
console.log(winner)
+
+ let losingPlayers;
+
+ if (winner != null) {
+ losingPlayers = players.filter(player => player.id !== winner.id);
+ } else {
+ losingPlayers = players;
+ }
+
const theme = useTheme();
+
+
+ const playersRows = [];
+ for (let i = 0; i < losingPlayers.length; i += 3) {
+ const rowPlayers = losingPlayers.slice(i, i + 3);
+ playersRows.push(
+
+ {rowPlayers.map((player, index) => (
+
+ {player.id !== winner?.id && (
+
+
{}} index={index} showCircle={false}/>
+
+ {indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
+
+
+ )}
+
+ ))}
+
+ );
+ }
+
+
return (
@@ -45,21 +78,25 @@ function EndGame() {
-
- {
- players.map((player, index) => (
-
- {player.id!=winner?.id &&
- <>
-
{}} index={index} showCircle={false}/>
- {indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
- >
- }
-
- ))
- }
+ {/* */}
+ {/* {
+ losingPlayers.map((player, index) => (
+
+ {player.id!=winner?.id &&
+ <>
+
+
{}} index={index} showCircle={false}/>
+ {indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
+
+ >
+ }
+
+ ))
+ } */}
+
+ {playersRows}
-
+ {/*
*/}
diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css
index 29133ea..81b99e3 100644
--- a/cryptide_project/src/Pages/InGame.css
+++ b/cryptide_project/src/Pages/InGame.css
@@ -40,10 +40,12 @@
}
.resetDiv{
- z-index: 1;
- position: absolute;
- top: 190px;
right: 10px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
}
#graphDiv{
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index f918923..69e0549 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@@ -20,6 +20,7 @@ import Info from "../res/icon/infoGreen.png";
import Check from "../res/icon/checkboxGreen.png";
import Alpha from "../res/GreekLetters/alphaW.png";
import MGlass from "../res/icon/magnifying-glass.png";
+import Reset from "../res/icon/reset.png";
import Oeye from "../res/icon/eye.png";
import Ceye from "../res/icon/hidden.png";
@@ -33,7 +34,7 @@ import Offcanvas from 'react-bootstrap/Offcanvas';
/* Model */
import Stub from '../model/Stub';
import { HiLanguage } from 'react-icons/hi2';
-import { Nav, NavDropdown } from 'react-bootstrap';
+import { Nav, NavDropdown, Spinner } from 'react-bootstrap';
import { FormattedMessage } from 'react-intl';
import Color from '../model/Color';
import { useGame } from '../Contexts/GameContext';
@@ -67,12 +68,8 @@ const InGame = ({locale, changeLocale}) => {
};
const setShowLastData = () =>{
- if (showLast){
- setShowLast(false)
- }
- else{
- setShowLast(true)
- }
+ setLastVisible(!showLast);
+ setShowLast(!showLast);
}
useEffect(() => {
@@ -105,7 +102,11 @@ const InGame = ({locale, changeLocale}) => {
}
const resetGraph = () => {
+ setisLoading(true);
socket.emit("reset graph", socket.id)
+ setTimeout(() => {
+ setisLoading(false);
+ }, 2000);
}
/* offcanvas */
@@ -126,6 +127,8 @@ const InGame = ({locale, changeLocale}) => {
const [cptTour, setcptTour] = useState(0);
const [LastVisible, setLastVisible] = useState(false);
+
+ const [isLoading, setisLoading] = useState(false);
//@ts-ignore
@@ -220,18 +223,32 @@ const InGame = ({locale, changeLocale}) => {
-
-
-
+
+
+
+
+
+
+
{/*
//? redirection impossible apparament (securité des navigateur
*/}
diff --git a/cryptide_project/src/res/icon/reset.png b/cryptide_project/src/res/icon/reset.png
new file mode 100644
index 0000000..b9fb085
Binary files /dev/null and b/cryptide_project/src/res/icon/reset.png differ