From f7ccdcd1e1e8aa0d7cc40790412fa497dc04f4fb Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 21 Nov 2023 16:41:41 +0100 Subject: [PATCH 1/4] changement de l'affichage des joueurs en endagame et bouton de reset :art: --- cryptide_project/src/Pages/EndGame.css | 29 +++++++++-- cryptide_project/src/Pages/EndGame.tsx | 65 +++++++++++++++++++----- cryptide_project/src/Pages/InGame.css | 8 +-- cryptide_project/src/Pages/InGame.tsx | 51 ++++++++++++------- cryptide_project/src/res/icon/reset.png | Bin 0 -> 10905 bytes 5 files changed, 115 insertions(+), 38 deletions(-) create mode 100644 cryptide_project/src/res/icon/reset.png 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 0000000000000000000000000000000000000000..b9fb0850c3d7d7b1e75cceffd3acd3057fd70eca GIT binary patch literal 10905 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 BJ-7e> literal 0 HcmV?d00001 -- 2.36.3 From 8b67e1e2d58396f78e63c6a5bac272e7ced9f6e3 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 22 Nov 2023 08:55:59 +0100 Subject: [PATCH 2/4] finission du style de la page de fin de jeu :lipstick: --- .../src/Components/ScoreBoard.tsx | 2 +- cryptide_project/src/Pages/EndGame.css | 27 +++++++-- cryptide_project/src/Pages/EndGame.tsx | 58 +++++-------------- 3 files changed, 38 insertions(+), 49 deletions(-) diff --git a/cryptide_project/src/Components/ScoreBoard.tsx b/cryptide_project/src/Components/ScoreBoard.tsx index b756e4a..d0540ab 100644 --- a/cryptide_project/src/Components/ScoreBoard.tsx +++ b/cryptide_project/src/Components/ScoreBoard.tsx @@ -28,7 +28,7 @@ function ScoreBoard({Player = null}) { //
diff --git a/cryptide_project/src/Pages/EndGame.css b/cryptide_project/src/Pages/EndGame.css index 00f1e43..9af5187 100644 --- a/cryptide_project/src/Pages/EndGame.css +++ b/cryptide_project/src/Pages/EndGame.css @@ -48,16 +48,35 @@ align-items: center; */ /* flex-direction: column; */ - width: 300px; - + /* width: 300px; */ + width: 30%; + margin-bottom: 20px; + /* margin-bottom: 10px; */ + border: solid 1px whitesmoke; border-radius: 15px; background-color: white; } -.losingPlayer{ +.losingPlayersContainer{ display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + + margin: 10px 0; + + max-width: 50%; + + overflow-y: scroll; + max-height: 200px; + /* background-color: yellow; */ +} - background-color: yellow; +.indiceDisplay{ + border: solid 2px whitesmoke; + border-radius: 10px; + margin: 0 15px 0 15px; + padding: 10px; + box-shadow: 5px 5px 5px rgb(246, 246, 246); } \ No newline at end of file diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index 5e6b768..411753a 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/cryptide_project/src/Pages/EndGame.tsx @@ -38,29 +38,6 @@ function EndGame() { } 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 (
@@ -71,32 +48,25 @@ function EndGame() {
- -

{indices[players.findIndex((p) => p.id == winner?.id)].ToString("fr")}

+ +

{indices[players.findIndex((p) => p.id == winner?.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} - - {/*
*/} +
+ {losingPlayers.map((player, index) => ( +
+ {player.id !== winner?.id && ( +
+ {}} index={index} showCircle={false}/> +
{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
+
+ )} +
+ ))} +
-- 2.36.3 From 5107eece930a6cf5ba23bc9e55e7c2cda115c976 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 22 Nov 2023 09:21:24 +0100 Subject: [PATCH 3/4] =?UTF-8?q?r=C3=A9cup=C3=A9ration=20l'interface=20avec?= =?UTF-8?q?=20selection=20de=20bot=20perdu=20:hammer:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/PlayerItemList.tsx | 32 +++++++++++++------ cryptide_project/src/Pages/Lobby.css | 2 +- cryptide_project/src/Pages/Lobby.tsx | 3 +- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/cryptide_project/src/Components/PlayerItemList.tsx b/cryptide_project/src/Components/PlayerItemList.tsx index 4b2d4e9..b9ef236 100644 --- a/cryptide_project/src/Components/PlayerItemList.tsx +++ b/cryptide_project/src/Components/PlayerItemList.tsx @@ -1,31 +1,45 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import '../Style/Global.css'; -import Bot from '../res/img/bot.png'; + +/* img */ +import BotPDP from '../res/img/bot.png'; +import PersonPDP from '../res/img/Person.png'; /* Boostrap */ import ToggleButton from 'react-bootstrap/ToggleButton'; import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'; -//@ts-ignore -function PlayerItemList({ pdp, name, id}) { - const isBot = pdp === Bot; +import Player from '../model/Player'; +import Bot from '../model/Bot'; + +interface MyPlayerItemListProps { + player : Player +} + +//@ts-ignore +const PlayerItemList:React.FC =({ player }) => { + // const isBot = pdp === Bot; + let pdp; + const isBot = player instanceof Bot; + isBot ? pdp = BotPDP : pdp = PersonPDP; + return (
player-image -

{name}

+

{player.name}

{isBot && ( - - + + Facile - + Intermédiaire - + Fort diff --git a/cryptide_project/src/Pages/Lobby.css b/cryptide_project/src/Pages/Lobby.css index 6a6f132..60dfcf0 100644 --- a/cryptide_project/src/Pages/Lobby.css +++ b/cryptide_project/src/Pages/Lobby.css @@ -27,7 +27,7 @@ .player-board{ height: 100%; - width: max-content; + width: 800px; background-color: rgb(243, 241, 235); border-radius: 20px; diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 8a191bb..bec8f50 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/cryptide_project/src/Pages/Lobby.tsx @@ -129,7 +129,8 @@ function Lobby() {
{/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/} {players.map((player, index) => ( - + // + ))}
+ )}
{isBot && ( diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index bec8f50..61193d0 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/cryptide_project/src/Pages/Lobby.tsx @@ -45,6 +45,10 @@ function Lobby() { socket.emit("lobby joined", room, new EasyBot("botId" + Math.floor(Math.random() * 1000), "Bot" + Math.floor(Math.random() * 100)).toJson()) } + // function delBot(selectedBot: Bot){ + + // } + useEffect(() => { if (first){ first=false @@ -130,7 +134,7 @@ function Lobby() { {/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/} {players.map((player, index) => ( // - + ))}