From ad2c1746f0cadee21bf7e330447c071f8ede874f Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 28 Nov 2023 14:07:26 +0100 Subject: [PATCH 1/5] =?UTF-8?q?ajout=20du=20selecteur=20de=20difficult?= =?UTF-8?q?=C3=A9=20de=20enigme=20du=20jour=20:zap:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cryptide_project/src/Pages/Play.tsx | 99 +++++++++++++++++++++++++---- 1 file changed, 86 insertions(+), 13 deletions(-) diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index 03c5ddf..ecb1995 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; /* Context */ import { useAuth } from '../Contexts/AuthContext'; @@ -28,6 +28,13 @@ import Stub from '../model/Stub'; import SessionService from '../services/SessionService'; import { loadImageAsync } from '../ImageHelper'; + +import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'; + +import Button from 'react-bootstrap/Button'; +import ButtonGroup from 'react-bootstrap/ButtonGroup'; + + function Play() { let first = true @@ -35,6 +42,9 @@ function Play() { const {isLoggedIn, login, user, setUserData, manager } = useAuth(); const {setDailyEnigmeData} = useGame() + const target = useRef(null); + + useEffect(() => { const fetchUserInformation = async () => { try { @@ -124,17 +134,11 @@ function Play() { function launchEngimeJour(){ - const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30) - setPersonData(choosenPerson) - setPersonNetworkData(networkPerson) - setIndicesData(choosenIndices) - setIndicesData(choosenIndices) - if (first){ - first = false - const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice()) - setDailyEnigmeData(map) - } - navigate('/game?solo=true&daily=true'); + //* overlay + + if (!showOverlay)setShowOverlay(true) + else setShowOverlay(true) + } @@ -160,6 +164,53 @@ function Play() { } }, [room, navigate]); + + + const [showOverlay, setShowOverlay] = useState(false); + const [selectedDifficulty, setSelectedDifficulty] = useState(null); + + //@ts-ignore + const handleDifficultyChange = (value) => { + setSelectedDifficulty(value); + }; + + const handleStartEasyGame = () => { + + //* Mode facile + //todo différencier les deux + const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30) + setPersonData(choosenPerson) + setPersonNetworkData(networkPerson) + setIndicesData(choosenIndices) + setIndicesData(choosenIndices) + if (first){ + first = false + const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice()) + setDailyEnigmeData(map) + } + navigate('/game?solo=true&daily=true'); + setShowOverlay(false); + }; + + const handleStartHardGame = () => { + //* Mode difficile + + //todo différencier les deux + const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30) + setPersonData(choosenPerson) + setPersonNetworkData(networkPerson) + setIndicesData(choosenIndices) + setIndicesData(choosenIndices) + if (first){ + first = false + const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice()) + setDailyEnigmeData(map) + } + navigate('/game?solo=true&daily=true'); + setShowOverlay(false); + }; + + return (
@@ -182,7 +233,29 @@ function Play() {
- + + + + + {({ placement, arrowProps, show: _show, popper, ...props }) => ( +
+ + + + + +
+ )} + + + -- 2.36.3 From eebc45b9d496bcd9a7d08f05ba2cf110125bbc79 Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Tue, 28 Nov 2023 14:23:39 +0100 Subject: [PATCH 2/5] Enigme facile et difficile --- .../src/Components/GraphContainer.tsx | 40 +++++++++++++------ cryptide_project/src/Pages/InGame.tsx | 8 +++- cryptide_project/src/Pages/Play.tsx | 10 ++--- 3 files changed, 37 insertions(+), 21 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 945b4e3..44c8aa5 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -23,6 +23,7 @@ interface MyGraphComponentProps { addToHistory: (message : string) => void solo : boolean isDaily : boolean + isEasy: boolean setNetwork: (network: Network) => void showLast: boolean } @@ -42,9 +43,10 @@ let lastNodes: NodePerson[] = [] let cptEndgame = 0 let firstEnigme = true let endgame= false +let firstHistory = true -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, addToHistory, showLast, setNetwork}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork}) => { let cptTour: number = 0 //* Gestion du temps : @@ -283,16 +285,26 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS setNetwork(network) if (isDaily){ - dailyEnigme.forEach((pairs, index) => { - pairs.forEach((pair) => { - const i = indices.findIndex((indice) => pair.first.getId() === indice.getId()) - const node = networkData.nodes.get().find((n) => index == n.id) - if (node != undefined){ - networkData.nodes.update({id: node.id, label: node.label + positionToEmoji(i, pair.second)}) - const test = networkData.nodes.get().find((n) => index == n.id) - } - }) - }); + if (!isEasy){ + dailyEnigme.forEach((pairs, index) => { + pairs.forEach((pair) => { + const i = indices.findIndex((indice) => pair.first.getId() === indice.getId()) + const node = networkData.nodes.get().find((n) => index == n.id) + if (node != undefined){ + networkData.nodes.update({id: node.id, label: node.label + positionToEmoji(i, pair.second)}) + } + }) + }); + } + else{ + if (firstHistory){ + firstHistory=false + indices.forEach((indice, index) => { + addToHistory("Indice " + positionToEmoji(index, true) + " : " + indice.ToString("fr")) + }) + } + + } } socket.on("reset graph", () => { @@ -429,7 +441,9 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS else { if (firstLap){ firstLap=false - addToHistory("<----- [Tour " + 1 +"/"+networkData.nodes.length + "] ----->"); + if (!isDaily){ + addToHistory("<----- [Tour " + 1 +"/"+networkData.nodes.length + "] ----->"); + } } } @@ -501,7 +515,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS askedWrong=false askedWrongBot=false endgame = true - + firstHistory=true try{ if(isLoggedIn){ if(!solo){ diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index e3feff6..a93af7a 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -69,6 +69,11 @@ const InGame = ({locale, changeLocale}) => { isDaily=false } + let isEasy: boolean = true + const isEasytmp = params.get('easy'); + if (isEasytmp == "false"){ + isEasy=false + } //* Historique const [history, setHistory] = useState([]); const [showLast, setShowLast] = useState(false) @@ -220,6 +225,7 @@ const InGame = ({locale, changeLocale}) => { addToHistory={addToHistory} solo={IsSolo} isDaily={isDaily} + isEasy={isEasy} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} setNetwork={setNetworkData} @@ -236,7 +242,7 @@ const InGame = ({locale, changeLocale}) => {
} - {!isDaily && + {(!isDaily || (isDaily && isEasy)) &&
{history.map((item, index) => (
{item}
diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index ecb1995..4b2cc93 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -183,12 +183,8 @@ function Play() { setPersonNetworkData(networkPerson) setIndicesData(choosenIndices) setIndicesData(choosenIndices) - if (first){ - first = false - const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice()) - setDailyEnigmeData(map) - } - navigate('/game?solo=true&daily=true'); + + navigate('/game?solo=true&daily=true&easy=true'); setShowOverlay(false); }; @@ -206,7 +202,7 @@ function Play() { const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice()) setDailyEnigmeData(map) } - navigate('/game?solo=true&daily=true'); + navigate('/game?solo=true&daily=true&easy=false'); setShowOverlay(false); }; -- 2.36.3 From 0e88befa3e8e2d18cd98bca334cf5b15c72c1c6f Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 28 Nov 2023 15:07:41 +0100 Subject: [PATCH 3/5] gestion des la liste de player :zap: --- .../src/Components/PersonStatus.tsx | 43 ++++++++++++------- .../src/Components/PlayerList.tsx | 15 ++++++- cryptide_project/src/Pages/EndGame.tsx | 2 +- 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx index a66429d..c2902c8 100644 --- a/cryptide_project/src/Components/PersonStatus.tsx +++ b/cryptide_project/src/Components/PersonStatus.tsx @@ -17,11 +17,12 @@ interface PlayerStatusProps { setPlayerTouched: (newPlayerTouch: number) => void; playerTouched: number showCircle: boolean + IsActualPlayer : boolean } let touchedPlayer = -1 //@ts-ignore -const PersonStatus: React.FC = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle}) => { +const PersonStatus: React.FC = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, IsActualPlayer}) => { const theme=useTheme(); const {players} = useGame() if (players[index] instanceof Bot){ @@ -32,22 +33,32 @@ const PersonStatus: React.FC = ({img = Person, state= Person, useEffect(() =>{ setTouchedPlayer(playerTouched) }, [playerTouched]) + + let isCurrentPlayer = true + let buffer = '' + if (isCurrentPlayer){ + buffer = 'solid 1px green' + } return ( -
setPlayerTouched(index)}> - player -
{name}
- - {(touchedPlayer == index && showCircle) ?( -
- state -
- ): showCircle && - ( -
- state -
- ) } - +
+
setPlayerTouched(index)}> + player +
{name}
+ + {IsActualPlayer && ( + (touchedPlayer == index && showCircle) ?( +
+ state +
+ ): showCircle && + ( +
+ state +
+ ) + )} + +
); } diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx index 3dc36d7..7018e3b 100644 --- a/cryptide_project/src/Components/PlayerList.tsx +++ b/cryptide_project/src/Components/PlayerList.tsx @@ -14,7 +14,7 @@ interface PlayerListProps { players: Player[]; playerTouched: number setPlayerTouched: (newPlayerTouch: number) => void; - } +} const PlayerList: React.FC = ({ players, playerTouched, setPlayerTouched}) => { const theme = useTheme(); @@ -25,7 +25,18 @@ const PlayerList: React.FC = ({ players, playerTouched, setPlay { //@ts-ignore players.map((player, index) => ( - player.id!=socket.id && + //player.id!=socket.id && + )) }
diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index e695e8d..5d89576 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/cryptide_project/src/Pages/EndGame.tsx @@ -98,7 +98,7 @@ function EndGame() {
{player.id !== winner?.id && (
- {}} index={index} showCircle={false}/> + {}} index={index} IsActualPlayer={false} showCircle={false}/>
{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
)} -- 2.36.3 From 213d8097f015cc2be3698704bd6c663dd74736f1 Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Tue, 28 Nov 2023 15:51:43 +0100 Subject: [PATCH 4/5] =?UTF-8?q?joueur=20choisi=20affich=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/GraphContainer.tsx | 10 ++++++- .../src/Components/PersonStatus.tsx | 30 ++++++++++++++----- .../src/Components/PlayerList.tsx | 5 ++-- cryptide_project/src/Pages/EndGame.tsx | 2 +- cryptide_project/src/Pages/InGame.tsx | 11 +++++-- 5 files changed, 44 insertions(+), 14 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 44c8aa5..4aa7d07 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -26,6 +26,7 @@ interface MyGraphComponentProps { isEasy: boolean setNetwork: (network: Network) => void showLast: boolean + setPlayerIndex: (playerIndex: number) => void } let lastAskingPlayer = 0 @@ -42,11 +43,12 @@ let cptHistory = 0 let lastNodes: NodePerson[] = [] let cptEndgame = 0 let firstEnigme = true +let firstIndex = true let endgame= false let firstHistory = true -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setPlayerIndex}) => { let cptTour: number = 0 //* Gestion du temps : @@ -116,6 +118,11 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS }, [showLast]) let playerIndex: number = turnPlayerIndex + + if (firstIndex){ + firstIndex=false + setPlayerIndex(playerIndex) + } let index = 0 for (let i=0; i = ({onNodeClick, handleS if (node!=undefined){ onNodeClick(false) playerIndex = newPlayerIndex + setPlayerIndex(playerIndex) if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){ const p = personNetwork.getPersons().find((p)=> p.getId() == id) const tab = mapIndexPersons.get(askedIndex) diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx index c2902c8..8658aa2 100644 --- a/cryptide_project/src/Components/PersonStatus.tsx +++ b/cryptide_project/src/Components/PersonStatus.tsx @@ -17,31 +17,45 @@ interface PlayerStatusProps { setPlayerTouched: (newPlayerTouch: number) => void; playerTouched: number showCircle: boolean - IsActualPlayer : boolean + playerIndex: number } let touchedPlayer = -1 //@ts-ignore -const PersonStatus: React.FC = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, IsActualPlayer}) => { +const PersonStatus: React.FC = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, playerIndex}) => { const theme=useTheme(); - const {players} = useGame() + const {players, actualPlayerIndex} = useGame() if (players[index] instanceof Bot){ img = BotImg } + const [buffer, setBuffer] = useState("") + const [touchedPlayer, setTouchedPlayer] = useState(-2) useEffect(() =>{ setTouchedPlayer(playerTouched) }, [playerTouched]) - let isCurrentPlayer = true - let buffer = '' - if (isCurrentPlayer){ - buffer = 'solid 1px green' + let IsActualPlayer = index != actualPlayerIndex + + useEffect(() => { + if (playerIndex===index){ + setBuffer('solid 1px green') + } + else{ + setBuffer('') + } + }, [playerIndex]) + + function onTouch(){ + if (IsActualPlayer){ + setPlayerTouched(index) + } } + return (
-
setPlayerTouched(index)}> +
onTouch()}> player
{name}
diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx index 7018e3b..52e6f2d 100644 --- a/cryptide_project/src/Components/PlayerList.tsx +++ b/cryptide_project/src/Components/PlayerList.tsx @@ -14,9 +14,10 @@ interface PlayerListProps { players: Player[]; playerTouched: number setPlayerTouched: (newPlayerTouch: number) => void; + playerIndex: number } -const PlayerList: React.FC = ({ players, playerTouched, setPlayerTouched}) => { +const PlayerList: React.FC = ({ players, playerTouched, setPlayerTouched, playerIndex}) => { const theme = useTheme(); return ( @@ -36,7 +37,7 @@ const PlayerList: React.FC = ({ players, playerTouched, setPlay setPlayerTouched={setPlayerTouched} index={index} showCircle={true} - IsActualPlayer={player.id!=socket.id}/> + playerIndex={playerIndex}/> )) }
diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index 5d89576..1c24b76 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/cryptide_project/src/Pages/EndGame.tsx @@ -98,7 +98,7 @@ function EndGame() {
{player.id !== winner?.id && (
- {}} index={index} IsActualPlayer={false} showCircle={false}/> + {}} index={index} playerIndex={-2} showCircle={false}/>
{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}
)} diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index a93af7a..7d1c015 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -102,6 +102,8 @@ const InGame = ({locale, changeLocale}) => { const [showTurnBar, setShowTurnBar] = useState(false); const [turnBarText, setTurnBarText] = useState(""); const [playerTouched, setPlayerTouched] = useState(-2) + const [playerIndex, setPlayerIndex] = useState(-2) + const [network, setNetwork] = useState(null) @@ -126,6 +128,10 @@ const InGame = ({locale, changeLocale}) => { setTurnBarText(newTurnBarText) } + const setPlayerIndexData = (playerIndex: number) => { + setPlayerIndex(playerIndex) + } + const generateTEX = () => { if (network != null && personNetwork != null && person != null){ const tex = generateLatexCode(personNetwork, person, indices, network) @@ -229,7 +235,8 @@ const InGame = ({locale, changeLocale}) => { setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} setNetwork={setNetworkData} - showLast={showLast}/> + showLast={showLast} + setPlayerIndex={setPlayerIndexData}/>
@@ -358,7 +365,7 @@ const InGame = ({locale, changeLocale}) => { { !IsSolo &&
- +
} -- 2.36.3 From fca70dd9816433873050a4285b4f74c588ae0efa Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 28 Nov 2023 16:50:26 +0100 Subject: [PATCH 5/5] =?UTF-8?q?ajout=20de=20la=20selection=20de=20noeud=20?= =?UTF-8?q?du=20graphe=20par=20entr=C3=A9=20utilisateur=20:bento:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cryptide_project/src/Pages/Lobby.tsx | 23 +++++++++++++++++++++-- package.json | 1 + 2 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 package.json diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 6fcd06f..e77b8cd 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/cryptide_project/src/Pages/Lobby.tsx @@ -42,13 +42,19 @@ import { socket } from "../SocketConfig"; import { random } from 'lodash'; import SessionService from '../services/SessionService'; - let gameStarted = false function Lobby() { const theme=useTheme(); const navigate = useNavigate(); + const [enteredNumber, setEnteredNumber] = useState(20); + + //@ts-ignore + const handleNumberChange = (event) => { + const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10))); + setEnteredNumber(newNumber); + }; const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame(); @@ -146,7 +152,7 @@ function Lobby() { function StartGame(){ - const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 30) + const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber) setPersonData(choosenPerson) setPersonNetworkData(networkPerson) setIndicesData(choosenIndices) @@ -214,6 +220,19 @@ function Lobby() { */} +
+ + +

La valeur saisie : {enteredNumber}

+
+ +