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