From 5bbb61080a4359f2830a1ab9de14727a5d7510cc Mon Sep 17 00:00:00 2001 From: Thomas Chazot Date: Thu, 7 Dec 2023 15:44:46 +0100 Subject: [PATCH] fin du code du tuto :) <3 --- .../src/Components/GraphContainer.tsx | 77 ++++++++----------- .../src/Components/TutorialGraph.tsx | 40 +++++----- cryptide_project/src/Pages/InGame.tsx | 25 +++++- cryptide_project/src/Pages/Lobby.tsx | 4 +- 4 files changed, 74 insertions(+), 72 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 8401c1d..2d02525 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -43,6 +43,13 @@ interface MyGraphComponentProps { setImportToPdf: (imp: boolean) => void importToJSON: boolean setImportToJSON: (imp: boolean) => void + + setPutCorrectBackground : (func: () => void) => void + setPutGreyBackground : (func: () => void) => void + setPutImposssibleGrey : (func: () => void) => void + putGreyBackground : () => void + putCorrectBackground : () => void + putImposssibleGrey : () => void } let lastAskingPlayer = 0 @@ -72,7 +79,7 @@ let testPlayers: Player[] = [] -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON, setPutCorrectBackground, setPutGreyBackground, setPutImposssibleGrey, putCorrectBackground, putGreyBackground, putImposssibleGrey}) => { let cptTour: number = 0 //* Gestion du temps : @@ -121,17 +128,17 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS console.log(playerTouched) if (touchedPlayer == -1){ if (!askedWrongLocal){ - socket.emit("put correct background", socket.id) + putCorrectBackground() } } else if (touchedPlayer < players.length && touchedPlayer>=0){ if(!askedWrongLocal){ - socket.emit("put correct background", socket.id) - socket.emit("put grey background", socket.id, touchedPlayer) + putCorrectBackground() + putGreyBackground() } } else if(touchedPlayer == players.length){ - socket.emit("put imossible grey", socket.id) + putImposssibleGrey() } }, [playerTouched]) @@ -625,7 +632,8 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS askedWrongBot=true handleShowTurnBar(true) handleTurnBarTextChange("Mauvais choix, posez un carré !") - socket.emit("put grey background", socket.id, actualPlayerIndex) + touchedPlayer = actualPlayerIndex + putGreyBackgroud() } else{ socket.emit("can't put square", actualPlayerIndex, room) @@ -650,7 +658,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } else{ handleShowTurnBar(false) - socket.emit("put correct background", socket.id) + putCorrectBackground() } } }) @@ -719,32 +727,12 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } }; -/* - const putGreyBackgroud = () => { - if (stepTuto === 3){ - const tabGrey = [0, 1, 2, 3, 5, 6, 7, 8, 9] - for (const i of tabGrey){ - nodes.update({id: i, color: "#808080"}) - } - console.log("CA MARCHE") - } - }; -*/ - - - //setGreyForEveryone(() => myFunctionInsideEffect); - - socket.on("put correct background", () =>{ - if (personNetwork != null){ - for(const person of personNetwork.getPersons()){ - networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())}) - } - } - }) + setPutCorrectBackground(() => putCorrectBackground) - socket.on("put grey background", (player) =>{ + const putGreyBackgroud = () => { if (personNetwork != null){ + const player = touchedPlayer const tab = mapIndexPersons.get(player) if (tab != undefined){ if (player != actualPlayerIndex){ @@ -772,9 +760,11 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } } } - }) + }; + + setPutGreyBackground(() => putGreyBackgroud) - socket.on("put imossible grey", ()=>{ + const putGreyImpossible = () => { if (personNetwork != null && indice!=null){ const tabNodes: any = [] const tester = IndiceTesterFactory.Create(indice) @@ -795,7 +785,9 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS networkData.nodes.update({id: n.id, color: "#808080"}) } } - }) + } + + setPutImposssibleGrey(() => putGreyImpossible) socket.on("end game", (winnerIndex) =>{ if (cptEndgame % 2 == 0){ @@ -851,9 +843,6 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS socket.off("already asked") socket.off("asked wrong") socket.off("asked") - socket.off("put correct background") - socket.off("put grey background") - socket.off("put imossible grey") socket.off("who plays") navigate(`${basePath}/endgame`) @@ -915,7 +904,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS playerIndex = 0 } socket.emit("node checked", params.nodes[0], false, actualPlayerIndex, room, playerIndex) - socket.emit("put correct background", socket.id) + putCorrectBackground() touchedPlayer=-1 askedPersons.push(person) askedWrongLocal=false @@ -953,7 +942,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS console.log("CE N'EST PAS UN BOT") //@ts-ignore socket.emit("ask player", params.nodes[0], players[touchedPlayer].id, players.find((p) => p.id === socket.id, actualPlayerIndex)) - socket.emit("put correct background", socket.id) + putCorrectBackground() touchedPlayer=-1 setPlayerTouched(-1) } @@ -987,14 +976,14 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } if(!works){ socket.emit("node checked", params.nodes[0], works, playerIndex, room, actualPlayerIndex) - socket.emit("put correct background", socket.id) + putCorrectBackground() socket.emit("asked wrong", players[actualPlayerIndex]) touchedPlayer=-1 setPlayerTouched(-1) return } if (i == players.length - 1){ - socket.emit("put correct background", socket.id) + putCorrectBackground() await delay(1000) socket.emit("end game", actualPlayerIndex, room) return @@ -1004,7 +993,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } touchedPlayer=-1 setPlayerTouched(-1) - socket.emit("put correct background", socket.id) + putCorrectBackground() await delay(1000) socket.emit("end game", actualPlayerIndex, room) } @@ -1099,12 +1088,6 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS function delay(ms: number): Promise { return new Promise(resolve => setTimeout(resolve, ms)); } - - function putGreyBackgroud(index: number){ - /* - - */ - } } diff --git a/cryptide_project/src/Components/TutorialGraph.tsx b/cryptide_project/src/Components/TutorialGraph.tsx index 834cb94..f84f10e 100644 --- a/cryptide_project/src/Components/TutorialGraph.tsx +++ b/cryptide_project/src/Components/TutorialGraph.tsx @@ -53,7 +53,7 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP let initMtn = 0 const {isLoggedIn, user, manager} = useAuth(); - const {setIndiceData, setActualPlayerIndexData} = useGame(); + const {setIndiceData, setIndicesData, setActualPlayerIndexData, setWinnerData, setPlayersData, setNetworkDataData, setPersonData} = useGame(); const params = new URLSearchParams(window.location.search); const navigate = useNavigate(); @@ -69,22 +69,6 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP useEffect(() =>{ touchedPlayer=playerTouched - /* - if (touchedPlayer == -1){ - if (!askedWrongLocal){ - socket.emit("put correct background", socket.id) - } - } - else if (touchedPlayer < players.length && touchedPlayer>=0){ - if(!askedWrongLocal){ - socket.emit("put correct background", socket.id) - socket.emit("put grey background", socket.id, touchedPlayer) - } - } - else if(touchedPlayer == players.length){ - socket.emit("put imossible grey", socket.id) - } - */ }, [playerTouched]) useEffect(() => { @@ -127,9 +111,6 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP const personNetwork = JSONParser.JSONToNetwork(JSON.stringify(jsonGraph)) const indices = JSONParser.JSONToIndices(jsonIndice) - console.log(indices) - console.log(personNetwork.getPersons()) - setIndiceData(indices[0]) if (personNetwork == null){ return @@ -138,7 +119,8 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP const nodes = new DataSet(graph.nodesPerson); - + setIndicesData(indices) + setPersonData(personNetwork.getPersons()[4]) let n = graph.nodesPerson; let e = graph.edges; @@ -191,7 +173,6 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP for (const i of tabGrey){ nodes.update({id: i, color: "#808080"}) } - console.log("CA MARCHE") } }; @@ -284,6 +265,21 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP await delay(500) const node2 = nodes.get().find((n: NodePerson) => n.id === 4) nodes.update({id: node2.id, label: node2.label + positionToEmoji(1, true)}) + await delay(500) + + for(const person of personNetwork.getPersons()){ + nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())}) + } + if (user != null){ + const winner = user; + setNetworkDataData(networkData) + setActualPlayerIndexData(-1) + setLastIndex(-1) + setPlayerTouched(-1) + setWinnerData(winner) + first = true + navigate(`${basePath}/endgame`) + } } } } diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index d9c07a4..65314a4 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -99,6 +99,23 @@ const InGame = ({locale, changeLocale}) => { const [importToPdf, setImportToPdf] = useState(false) const [importToJSON, setImportToJSON] = useState(false) + const [putCorrectBackground, setPutCorrectBackground] = useState<() => void>(() => {}); + const [putGreyBackgroud, setPutGreyBackground] = useState<() => void>(() => {}); + const [putImposssibleGrey, setPutImposssibleGrey] = useState<() => void>(() => {}); + + + const setPutCorrectBackgroundData = (func: () => void) => { + setPutCorrectBackground(func) + } + + const setPutGreyBackgroundData = (func: () => void) => { + setPutGreyBackground(func) + } + + const setPutImposssibleGreyData = (func: () => void) => { + setPutImposssibleGrey(func) + } + const setImportToJSONData = (imp: boolean) => { setImportToJSON(imp) } @@ -313,7 +330,13 @@ const InGame = ({locale, changeLocale}) => { importToPdf={importToPdf} setImportToPdf={setImportToPdfData} importToJSON={importToJSON} - setImportToJSON={setImportToJSONData}/> + setImportToJSON={setImportToJSONData} + setPutCorrectBackground={setPutCorrectBackgroundData} + setPutGreyBackground={setPutGreyBackgroundData} + setPutImposssibleGrey={setPutImposssibleGreyData} + putCorrectBackground={putCorrectBackground} + putGreyBackground={putGreyBackgroud} + putImposssibleGrey={putImposssibleGrey}/> diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 64dc6c6..3070545 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/cryptide_project/src/Pages/Lobby.tsx @@ -70,7 +70,7 @@ function Lobby() { } //* nb Node - const [enteredNumber, setEnteredNumber] = useState(20); + const [enteredNumber, setEnteredNumber] = useState(25); //@ts-ignore const handleNumberChange = (event) => { @@ -213,7 +213,7 @@ function Lobby() { function StartGame(){ - const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, 10) + const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(players.length, enteredNumber) setPersonData(choosenPerson) setPersonNetworkData(networkPerson) setIndicesData(choosenIndices)