From 547ec930658bb083e5f7cacadcfd7da7f915c714 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 14 Nov 2023 14:10:18 +0100 Subject: [PATCH 1/5] =?UTF-8?q?cr=C3=A9ation=20de=20la=20page=20pour=20le?= =?UTF-8?q?=20mode=20solo,=20avec=20la=20navigation=20via=20le=20bouton=20?= =?UTF-8?q?'rejoindre'=20:bento:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cryptide_project/src/App.tsx | 3 + cryptide_project/src/Pages/Play.tsx | 2 +- cryptide_project/src/Pages/SoloGame.css | 99 +++++++++++ cryptide_project/src/Pages/SoloGame.tsx | 226 ++++++++++++++++++++++++ 4 files changed, 329 insertions(+), 1 deletion(-) create mode 100644 cryptide_project/src/Pages/SoloGame.css create mode 100644 cryptide_project/src/Pages/SoloGame.tsx diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx index 2765a15..a787606 100644 --- a/cryptide_project/src/App.tsx +++ b/cryptide_project/src/App.tsx @@ -32,6 +32,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'; /* Internationnalisation */ import messagesFr from './Translations/fr.json'; import messagesEn from './Translations/en.json'; +import SoloGame from './Pages/SoloGame'; const messages = { fr: messagesFr, @@ -77,6 +78,8 @@ function App() { } /> } /> } /> + } /> + diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index 1fa0785..08b8a33 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -48,7 +48,7 @@ function Play() { - + diff --git a/cryptide_project/src/Pages/SoloGame.css b/cryptide_project/src/Pages/SoloGame.css new file mode 100644 index 0000000..8823002 --- /dev/null +++ b/cryptide_project/src/Pages/SoloGame.css @@ -0,0 +1,99 @@ +.upperInfo{ + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + + width: 30%; + + border-radius: 0px 0px 30px 30px; + border: solid; + border-width: 2px 5px; + + background-color: white; + + font-size: 30px; + + top: 20px;; +} + +#mainDiv{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + + +.paramDiv{ + z-index: 1; + position: absolute; + top: 10px; + right: 10px; +} + +#graphDiv{ + + display: flex; + flex-direction: row; + + position: absolute; + + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +#bottom-container{ + bottom: 0; + + background-color: white; + padding:20px; + border-radius: 20px 20px 0px 0px; +} + +.playerlistDiv{ + position: absolute; + z-index: 1; + left: 10px; + top :50px; +} + +#endgamebutton{ + position: absolute; + z-index: 1; + bottom: 0; + right: 25%; +} + +.upperInfo, +#bottom-container, +.menuGame { + position: absolute; + z-index: 1; +} + +.menuGame{ + display: flex; + align-items: space-between; + justify-content: end; + flex-direction: column; + + top:30%; + right: 0; +} + +.menuGame Button { + margin: 10px; +} + +.button{ + /*background-color: #85C9C2;*/ + + border: solid 2px #85C9C2; + border-radius: 10px; + + width: 100px; + height: 60px; +} diff --git a/cryptide_project/src/Pages/SoloGame.tsx b/cryptide_project/src/Pages/SoloGame.tsx new file mode 100644 index 0000000..d1f8a09 --- /dev/null +++ b/cryptide_project/src/Pages/SoloGame.tsx @@ -0,0 +1,226 @@ +import React, { useState } from 'react'; +import Switch from "react-switch"; + +/* Style */ +import "./InGame.css" +import {useTheme} from '../Style/ThemeContext' +/* Component */ +import GraphContainer from '../Components/GraphContainer'; +import ChoiceBar from '../Components/ChoiceBar'; +import ButtonImgNav from '../Components/ButtonImgNav'; +import PersonStatus from '../Components/PersonStatus'; +import PlayerList from '../Components/PlayerList'; + +/* Icon */ +import Leave from "../res/icon/leave.png"; +import Param from "../res/icon/param.png"; +import Replay from "../res/icon/replay.png"; +import Info from "../res/icon/infoGreen.png"; +import Check from "../res/icon/checkboxGreen.png"; +import Alpha from "../res/GreekLetters/alphaW.png"; + +/* nav */ +import { Link } from 'react-router-dom'; + +/* Boostrap */ +import Button from 'react-bootstrap/Button'; +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 { FormattedMessage } from 'react-intl'; +import Color from '../model/Color'; + +//@ts-ignore +const SoloGame = ({locale, changeLocale}) => { + + const theme = useTheme(); + + const [showChoiceBar, setShowChoiceBar] = useState(false); + + const handleNodeClick = (shouldShowChoiceBar: boolean) => { + setShowChoiceBar(shouldShowChoiceBar); + }; + + /* offcanvas */ + //? faire une fonction pour close et show en fonction de l'etat du canva ? + //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ? + const [show, setShow] = useState(false); + const handleClose = () => setShow(false); + const handleShow = () => setShow(true); + + // const [showP, setShowP] = useState(false); + // const handleCloseP = () => setShowP(false); + // const handleShowP = () => setShowP(true); + + const [showS, setShowS] = useState(false); + const handleCloseS = () => setShowS(false); + const handleShowS = () => setShowS(true); + + const handleChange = () => { + if (show){ + handleClose() + } + else { + handleShow() + } + }; + + // const handleChangeP = () => { + // if (showP){ + // handleCloseP() + // } + // else { + // handleShowP() + // } + // }; + + const handleChangeS = () => { + if (showS){ + handleCloseS() + } + else { + handleShowS() + } + }; + + /* Windows open */ + //@ts-ignore + const openInNewTab = (url) => { //! avec url ==> dangereux + window.open(url); + }; + + const [SwitchEnabled, setSwitchEnabled] = useState(false) + const indices = Stub.GenerateIndice() + + return ( +
+
+ {/* texte changeable et a traduire */} +

Dummy, à vous de jouer !

+
+
+ +
+ + {/*
+ +
*/} + +
+ +
+ +
+ + + + {/* */} + + + + + + +
+ + + + Indice + + + {/* Possède les cheveux noir ou joue au basket */} + {indices[0].ToString(locale)}
+ {indices[1].ToString(locale)}
+ {indices[2].ToString(locale)} + + + + { + //* canva pour les paramètres + } + + + param Paramètres + + + + + + + + + +
+ {showChoiceBar && } +
+
{/* tmp */} + +
+
+); +}; + + +export default SoloGame; -- 2.36.3 From cd1aff13db6dce418ac8e5b8a552b933864e9a94 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 14 Nov 2023 15:07:58 +0100 Subject: [PATCH 2/5] ajout de l'interface pour le mode solo :art: --- cryptide_project/src/App.tsx | 7 +- cryptide_project/src/Components/TurnBar.tsx | 6 +- cryptide_project/src/Pages/Play.tsx | 2 +- cryptide_project/src/Pages/SoloGame.css | 10 +- cryptide_project/src/Pages/SoloGame.tsx | 210 ++++++++++---------- 5 files changed, 126 insertions(+), 109 deletions(-) diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx index e2dafb6..14974c0 100644 --- a/cryptide_project/src/App.tsx +++ b/cryptide_project/src/App.tsx @@ -77,11 +77,10 @@ function App() { } /> } /> } /> - } /> + }/> } /> - } /> - - + }/> + diff --git a/cryptide_project/src/Components/TurnBar.tsx b/cryptide_project/src/Components/TurnBar.tsx index 155bbce..1d90aad 100644 --- a/cryptide_project/src/Components/TurnBar.tsx +++ b/cryptide_project/src/Components/TurnBar.tsx @@ -12,6 +12,6 @@ const TurnBar = () => {

Dummy, à vous de jouer !

); - }; - - export default TurnBar; \ No newline at end of file +}; + +export default TurnBar; \ No newline at end of file diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index b6ead60..2eab011 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -82,7 +82,7 @@ function Play() { - + diff --git a/cryptide_project/src/Pages/SoloGame.css b/cryptide_project/src/Pages/SoloGame.css index 8823002..4f2769b 100644 --- a/cryptide_project/src/Pages/SoloGame.css +++ b/cryptide_project/src/Pages/SoloGame.css @@ -53,11 +53,19 @@ border-radius: 20px 20px 0px 0px; } -.playerlistDiv{ +.nbLaps{ position: absolute; z-index: 1; left: 10px; top :50px; + + margin: 10px 20px; + padding: 20px; + border-radius: 15px; + border: solid 2px; + + font-size: 30px; + color: #fff; } #endgamebutton{ diff --git a/cryptide_project/src/Pages/SoloGame.tsx b/cryptide_project/src/Pages/SoloGame.tsx index d1f8a09..3b2cced 100644 --- a/cryptide_project/src/Pages/SoloGame.tsx +++ b/cryptide_project/src/Pages/SoloGame.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import Switch from "react-switch"; /* Style */ -import "./InGame.css" +import "./SoloGame.css" import {useTheme} from '../Style/ThemeContext' /* Component */ import GraphContainer from '../Components/GraphContainer'; @@ -32,6 +32,8 @@ import { HiLanguage } from 'react-icons/hi2'; import { Nav, NavDropdown } from 'react-bootstrap'; import { FormattedMessage } from 'react-intl'; import Color from '../model/Color'; +import TurnBar from '../Components/TurnBar'; +import { useGame } from '../Contexts/GameContext'; //@ts-ignore const SoloGame = ({locale, changeLocale}) => { @@ -39,11 +41,17 @@ const SoloGame = ({locale, changeLocale}) => { const theme = useTheme(); const [showChoiceBar, setShowChoiceBar] = useState(false); + const [showTurnBar, setShowTurnBar] = useState(false); + const handleNodeClick = (shouldShowChoiceBar: boolean) => { setShowChoiceBar(shouldShowChoiceBar); }; + const handleShowTurnBar = (shouldShowTurnBar: boolean) => { + setShowTurnBar(shouldShowTurnBar); + }; + /* offcanvas */ //? faire une fonction pour close et show en fonction de l'etat du canva ? //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ? @@ -61,7 +69,7 @@ const SoloGame = ({locale, changeLocale}) => { const handleChange = () => { if (show){ - handleClose() + handleClose() } else { handleShow() @@ -94,132 +102,134 @@ const SoloGame = ({locale, changeLocale}) => { const [SwitchEnabled, setSwitchEnabled] = useState(false) const indices = Stub.GenerateIndice() + const { indice, players } = useGame(); + return (
-
- {/* texte changeable et a traduire */} -

Dummy, à vous de jouer !

-
+
- + +
+ +
+ Tour : 5
- {/*
- -
*/} - -
- -
+
-
- - - - {/* */} - - - + + {/* - - - -
+ */} - + + + + + + + + {/* + + Joueurs +

Il y a {players.length} joueurs

+ + + + + */} + + - Indice + Indice {/* Possède les cheveux noir ou joue au basket */} - {indices[0].ToString(locale)}
- {indices[1].ToString(locale)}
- {indices[2].ToString(locale)} + {indice?.ToString(locale)} - + - { - //* canva pour les paramètres - } - - - param Paramètres - - - - - - - - - -
- {showChoiceBar && } -
-
{/* tmp */} - -
- -); + + param Paramètres + + + + + + + + +
+ {showChoiceBar && } +
+ {/* +
{/* tmp + +
+ */} + + ); }; -- 2.36.3 From 73b049f34824e9616efc691b06a5c99bbb2956ed Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Tue, 14 Nov 2023 15:51:24 +0100 Subject: [PATCH 3/5] :poop: --- .../src/Components/GraphContainer.tsx | 196 ++++++++++-------- cryptide_project/src/Components/TurnBar.tsx | 5 +- cryptide_project/src/Pages/InGame.tsx | 4 +- cryptide_project/src/Pages/SoloGame.tsx | 4 +- 4 files changed, 116 insertions(+), 93 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index b2f5f3a..4131382 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -24,14 +24,15 @@ import { colorToEmoji, positionToColor } from "../ColorHelper"; interface MyGraphComponentProps { onNodeClick: (shouldShowChoiceBar: boolean) => void; - handleShowTurnBar: (shouldShowTurnBar: boolean) => void + handleShowTurnBar: (shouldShowTurnBar: boolean) => void; + FromSolo: boolean; } let lastAskingPlayer = 0 let lastNodeId = -1 let first = true -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, FromSolo}) => { const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex } = useGame(); @@ -96,108 +97,129 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS const networkData = { nodes: nodes, edges: graph.edges }; const network = new Network(container, networkData, initialOptions); - - - socket.on("node checked",(id, works, color, newPlayerIndex) => { - const node = nodes.get().find((n) => id == n.id) - if (node!=undefined){ - onNodeClick(false) - playerIndex = newPlayerIndex - networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)}) - if (playerIndex === thisPlayerIndex){ - handleShowTurnBar(true) - } - else{ - handleShowTurnBar(false) - console.log("je passe bien ici ?????") - } - } - lastAskingPlayer = 0 - lastNodeId = -1 - }) - - socket.on("already asked", (nodeId, askedPlayer) =>{ - console.log("player: " + askedPlayer + " already asked on node " + nodeId) - }) - - - socket.on("asked", (nodeId, askingPlayer) => { - if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){ - lastAskingPlayer = askingPlayer.id - lastNodeId = nodeId - const pers = personNetwork.getPersons().find((p) => p.getId() == nodeId) - if (pers!=undefined){ - if (askedPersons.includes(pers)){ - socket.emit("already asked", nodeId, askingPlayer, socket.id) - return + if(FromSolo){ + + //* lsti = Generate indice (paramNbIndice) //une couleur par indice + /* + Onclick : + nbcoup = 0; + pour chaque indice i : + jeton = IsNodeInIndice(node,i) + lstJ.add(jeton) + if jeton == X : + rep = false + if(rep) : + endgame() + break + afficheJeton(jeton) + */ + + + } + else { + socket.on("node checked",(id, works, color, newPlayerIndex) => { + const node = nodes.get().find((n) => id == n.id) + if (node!=undefined){ + onNodeClick(false) + playerIndex = newPlayerIndex + networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)}) + if (playerIndex === thisPlayerIndex){ + handleShowTurnBar(true) + } + else{ + handleShowTurnBar(false) + console.log("je passe bien ici ?????") + } } - else{ - askedPersons.push(pers) - const node = nodes.get().find((n) => nodeId == n.id) - if (node != undefined && indice != null){ - var tester = IndiceTesterFactory.Create(indice) - playerIndex = playerIndex + 1 - if(playerIndex == players.length){ - playerIndex = 0 - } - if (tester.Works(pers)){ - socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex) + lastAskingPlayer = 0 + lastNodeId = -1 + }) + + socket.on("already asked", (nodeId, askedPlayer) =>{ + console.log("player: " + askedPlayer + " already asked on node " + nodeId) + }) + + + socket.on("asked", (nodeId, askingPlayer) => { + if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){ + lastAskingPlayer = askingPlayer.id + lastNodeId = nodeId + const pers = personNetwork.getPersons().find((p) => p.getId() == nodeId) + if (pers!=undefined){ + if (askedPersons.includes(pers)){ + socket.emit("already asked", nodeId, askingPlayer, socket.id) + return } else{ - socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, playerIndex) - } + askedPersons.push(pers) + const node = nodes.get().find((n) => nodeId == n.id) + if (node != undefined && indice != null){ + var tester = IndiceTesterFactory.Create(indice) + playerIndex = playerIndex + 1 + if(playerIndex == players.length){ + playerIndex = 0 + } + if (tester.Works(pers)){ + socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex) + } + else{ + socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, playerIndex) + } + } + } } - } + } } - } - }) + ) - - personNetwork.getPersons().forEach(p => { - let a = 0 - for (let i of indices){ - let tester = IndiceTesterFactory.Create(i) - if (tester.Works(p)){ - a++ + + personNetwork.getPersons().forEach(p => { + let a = 0 + for (let i of indices){ + let tester = IndiceTesterFactory.Create(i) + if (tester.Works(p)){ + a++ + } + } + if (a==indices.length){ + //networkData.nodes.update({id: p.getId(), label: p.getName() + "\n🔵"}) + console.log(p) } - } - if (a==indices.length){ - //networkData.nodes.update({id: p.getId(), label: p.getName() + "\n🔵"}) - console.log(p) - } + + }); - }); - - // Gérer le changement entre la physique et le déplacement manuel - network.on("dragging", (params) => { - if (params.nodes.length > 0) { - // Un nœud a été cliqué - initialOptions.physics.enabled = false; - network.setOptions(initialOptions); - } - }); + // Gérer le changement entre la physique et le déplacement manuel + network.on("dragging", (params) => { + if (params.nodes.length > 0) { + // Un nœud a été cliqué + initialOptions.physics.enabled = false; + network.setOptions(initialOptions); + } + }); - network.on("click", (params) => { - - if(params.nodes.length > 0){ - setNodeIdData(params.nodes[0]) + network.on("click", (params) => { + + if(params.nodes.length > 0){ + setNodeIdData(params.nodes[0]) - // Renvoyer un true pour afficher la choice bar - if (thisPlayerIndex == playerIndex){ - onNodeClick(true) + // Renvoyer un true pour afficher la choice bar + if (thisPlayerIndex == playerIndex){ + onNodeClick(true) + } + else{ + onNodeClick(false) + } } else{ + // Renvoyer un false pour cacher la choice bar onNodeClick(false) } - } - else{ - // Renvoyer un false pour cacher la choice bar - onNodeClick(false) - } - }); + }); + } //notfromsolo + }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu return ( diff --git a/cryptide_project/src/Components/TurnBar.tsx b/cryptide_project/src/Components/TurnBar.tsx index 1d90aad..5a4827c 100644 --- a/cryptide_project/src/Components/TurnBar.tsx +++ b/cryptide_project/src/Components/TurnBar.tsx @@ -1,7 +1,8 @@ import React from "react"; import { useTheme } from "../Style/ThemeContext"; -const TurnBar = () => { +//@ts-ignore +const TurnBar = ({text}) => { const theme = useTheme(); return (
{ borderColor: theme.colors.secondary }}> {/* texte changeable et a traduire */} -

Dummy, à vous de jouer !

+

{text}

); }; diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 61567f6..72cecd0 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -108,9 +108,9 @@ const InGame = ({locale, changeLocale}) => { return (
- {showTurnBar && } + {showTurnBar && }
- +
diff --git a/cryptide_project/src/Pages/SoloGame.tsx b/cryptide_project/src/Pages/SoloGame.tsx index 3b2cced..1162ad9 100644 --- a/cryptide_project/src/Pages/SoloGame.tsx +++ b/cryptide_project/src/Pages/SoloGame.tsx @@ -107,9 +107,9 @@ const SoloGame = ({locale, changeLocale}) => { return (
- +
- +
Date: Wed, 15 Nov 2023 08:12:21 +0100 Subject: [PATCH 4/5] mastermind fini --- .../src/Components/GraphContainer.tsx | 224 ++++++++++-------- cryptide_project/src/Pages/Lobby.tsx | 2 +- cryptide_project/src/Pages/Play.tsx | 23 +- 3 files changed, 142 insertions(+), 107 deletions(-) diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 3bc315a..0aa002c 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -32,11 +32,17 @@ let lastAskingPlayer = 0 let lastNodeId = -1 let first = true let askedWrong = false +let solo: boolean = true + const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => { const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame(); + const params = new URLSearchParams(window.location.search); + const solotmp = params.get('solo'); + + let playerIndex: number = turnPlayerIndex let index = 0 for (let i=0; i = ({onNodeClick, handleS if (first){ first = false - setActualPlayerIndexData(index) - if (playerIndex == thisPlayerIndex){ - handleTurnBarTextChange("À vous de jouer") - handleShowTurnBar(true) - + if (solotmp == "false"){ + solo=false + } + if (!solo){ + setActualPlayerIndexData(index) + if (playerIndex == thisPlayerIndex){ + handleTurnBarTextChange("À vous de jouer") + handleShowTurnBar(true) + } } - indices.forEach(i => { - console.log(i.ToString("en")) - }); } useEffect(() => { @@ -72,7 +79,6 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS console.error("Container not found"); return; } - // Charger les données dans le graph const nodes = new DataSet(graph.nodesPerson); @@ -99,84 +105,86 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS const networkData = { nodes: nodes, edges: graph.edges }; const network = new Network(container, networkData, initialOptions); - - socket.on("asked all", (id) =>{ - const pers = personNetwork.getPersons().find((p) => p.getId() == id) - if (pers!=undefined){ - askedPersons.push(pers) - } - }) - - socket.on("node checked",(id, works, color, newPlayerIndex) => { - const node = nodes.get().find((n) => id == n.id) - if (node!=undefined){ - onNodeClick(false) - playerIndex = newPlayerIndex - if (!node.label.includes(colorToEmoji(color, works))){ - networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)}) - } - if (playerIndex === thisPlayerIndex){ - handleTurnBarTextChange("À vous de jouer") - handleShowTurnBar(true) - } - else{ - handleShowTurnBar(false) - } - } - lastAskingPlayer = 0 - lastNodeId = -1 - }) - - socket.on("already asked", (nodeId, askedPlayer) =>{ - console.log("player: " + askedPlayer + " already asked on node " + nodeId) - }) - - socket.on("asked wrong", () =>{ - setOnlyFalseData(true) - askedWrong = true - handleShowTurnBar(true) - handleTurnBarTextChange("Mauvais choix, posez un carré !") - }) - - - socket.on("asked", (nodeId, askingPlayer, askingPlayerIndex) => { - console.log(askingPlayerIndex) - if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){ - lastAskingPlayer = askingPlayer.id - lastNodeId = nodeId - const pers = personNetwork.getPersons().find((p) => p.getId() == nodeId) + if (!solo){ + socket.on("asked all", (id) =>{ + const pers = personNetwork.getPersons().find((p) => p.getId() == id) if (pers!=undefined){ - if (askedPersons.includes(pers)){ - socket.emit("already asked", nodeId, askingPlayer, socket.id) - return + askedPersons.push(pers) + } + }) + + socket.on("node checked",(id, works, color, newPlayerIndex) => { + const node = nodes.get().find((n) => id == n.id) + if (node!=undefined){ + onNodeClick(false) + playerIndex = newPlayerIndex + if (!node.label.includes(colorToEmoji(color, works))){ + networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)}) + } + if (playerIndex === thisPlayerIndex){ + handleTurnBarTextChange("À vous de jouer") + handleShowTurnBar(true) } else{ - askedPersons.push(pers) - const node = nodes.get().find((n) => nodeId == n.id) - if (node != undefined && indice != null){ - var tester = IndiceTesterFactory.Create(indice) - let maybe = thisPlayerIndex - playerIndex = playerIndex + 1 - if(playerIndex == players.length){ - playerIndex = 0 - } - if (tester.Works(pers)){ - socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex) - } - else{ - maybe = maybe - 1 - if(maybe == 0){ - maybe = players.length - 1 + handleShowTurnBar(false) + } + } + lastAskingPlayer = 0 + lastNodeId = -1 + }) + + socket.on("already asked", (nodeId, askedPlayer) =>{ + console.log("player: " + askedPlayer + " already asked on node " + nodeId) + }) + + socket.on("asked wrong", () =>{ + setOnlyFalseData(true) + askedWrong = true + handleShowTurnBar(true) + handleTurnBarTextChange("Mauvais choix, posez un carré !") + }) + + + socket.on("asked", (nodeId, askingPlayer, askingPlayerIndex) => { + console.log(askingPlayerIndex) + if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){ + lastAskingPlayer = askingPlayer.id + lastNodeId = nodeId + const pers = personNetwork.getPersons().find((p) => p.getId() == nodeId) + if (pers!=undefined){ + if (askedPersons.includes(pers)){ + socket.emit("already asked", nodeId, askingPlayer, socket.id) + return + } + else{ + askedPersons.push(pers) + const node = nodes.get().find((n) => nodeId == n.id) + if (node != undefined && indice != null){ + var tester = IndiceTesterFactory.Create(indice) + let maybe = thisPlayerIndex + playerIndex = playerIndex + 1 + if(playerIndex == players.length){ + playerIndex = 0 + } + if (tester.Works(pers)){ + socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex) + } + else{ + maybe = maybe - 1 + if(maybe == 0){ + maybe = players.length - 1 + } + socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, maybe) + socket.emit("asked wrong", askingPlayer, room) } - socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, maybe) - socket.emit("asked wrong", askingPlayer, room) } - } - } + } + } } - } - - }) + + }) + } + @@ -209,32 +217,44 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS if(params.nodes.length > 0){ setNodeIdData(params.nodes[0]) - // Renvoyer un true pour afficher la choice bar - if (askedWrong){ - console.log(askedWrong) - const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) - if (person !== undefined && indice !== null){ - const tester = IndiceTesterFactory.Create(indice) - if (!tester.Works(person) && !askedPersons.includes(person)){ - console.log(playerIndex) - playerIndex = thisPlayerIndex + 1 - if(playerIndex == players.length){ - playerIndex = 0 + if (!solo){ + if (askedWrong){ + const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) + if (person !== undefined && indice !== null){ + const tester = IndiceTesterFactory.Create(indice) + if (!tester.Works(person) && !askedPersons.includes(person)){ + playerIndex = thisPlayerIndex + 1 + if(playerIndex == players.length){ + playerIndex = 0 + } + socket.emit("node checked", params.nodes[0], false, positionToColor(thisPlayerIndex), room, playerIndex) + askedPersons.push(person) + askedWrong = false } - socket.emit("node checked", params.nodes[0], false, positionToColor(thisPlayerIndex), room, playerIndex) - askedPersons.push(person) - askedWrong = false } } - - } - else if (thisPlayerIndex == playerIndex){ - onNodeClick(true) + else if (thisPlayerIndex == playerIndex){ + onNodeClick(true) + } + else{ + onNodeClick(false) + } } else{ - onNodeClick(false) + const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée + if (person != undefined){ + indices.forEach(async (i, index) =>{ + const tester = IndiceTesterFactory.Create(i) + const test = tester.Works(person) + const node = nodes.get().find((n) => params.nodes[0] == n.id) + if (node!=undefined){ + networkData.nodes.update({id: params.nodes[0], label: node.label + colorToEmoji(positionToColor(index), test)}) + } + }) + } } } + // Renvoyer un true pour afficher la choice bar else{ // Renvoyer un false pour cacher la choice bar onNodeClick(false) @@ -247,6 +267,10 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS
); + + function delay(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); + } } diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 6b69e1d..a6d6930 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/cryptide_project/src/Pages/Lobby.tsx @@ -72,7 +72,7 @@ function Lobby() { setPersonNetworkData(network) setIndicesData(choosenIndices) first = true - navigate('/game'); + navigate('/game?solo=false'); }); socket.on("new player", (tab) =>{ diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index be516d1..13d3f62 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -19,11 +19,16 @@ import param from '../res/icon/param.png'; import share from '../res/icon/share.png'; import { socket } from '../SocketConfig'; import { useNavigate } from 'react-router-dom'; +import GameCreator from '../model/GameCreator'; +import { useGame } from '../Contexts/GameContext'; function Play() { const theme=useTheme() + const { setIndicesData, setPersonData, setPersonNetworkData } = useGame(); + + const [room, setRoom] = useState(null); const navigate = useNavigate(); @@ -31,6 +36,15 @@ function Play() { socket.emit("lobby created") } + function launchMastermind(){ + const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(5, 30) + setPersonData(choosenPerson) + setPersonNetworkData(networkPerson) + setIndicesData(choosenIndices) + setIndicesData(choosenIndices) + navigate('/game?solo=true'); + } + useEffect(() => { @@ -78,13 +92,10 @@ function Play() { />
- - - + - - - + +
-- 2.36.3 From cc0b1d40072ef0b69f34aefd2061762bef7a52b0 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 15 Nov 2023 11:02:09 +0100 Subject: [PATCH 5/5] mise en place du mode Mastermind quasi fonctionnel ! :bento: --- .../src/Components/ColoredIndices.tsx | 24 ++++ .../src/Components/GraphContainer.tsx | 28 +++-- cryptide_project/src/Pages/InGame.css | 16 +++ cryptide_project/src/Pages/InGame.tsx | 108 +++++++++++------- cryptide_project/src/Pages/SoloGame.tsx | 2 +- cryptide_project/src/SocketConfig.ts | 2 +- package-lock.json | 6 + 7 files changed, 133 insertions(+), 53 deletions(-) create mode 100644 cryptide_project/src/Components/ColoredIndices.tsx create mode 100644 package-lock.json diff --git a/cryptide_project/src/Components/ColoredIndices.tsx b/cryptide_project/src/Components/ColoredIndices.tsx new file mode 100644 index 0000000..e8f8c4a --- /dev/null +++ b/cryptide_project/src/Components/ColoredIndices.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import '../Style/Global.css'; +import { FormattedMessage } from 'react-intl'; + +import { useTheme } from '../Style/ThemeContext'; + +//@ts-ignore +function ColoredIndices({ letter, color}) { + + const theme = useTheme(); + + // const mystyle = { + // backgroundColor: "#0064E0", + // }; + + return ( +
+ Indice Letter +
+ ); +} + +export default ColoredIndices; diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index 3efda13..797c788 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -26,21 +26,22 @@ interface MyGraphComponentProps { onNodeClick: (shouldShowChoiceBar: boolean) => void; handleShowTurnBar: (shouldShowTurnBar: boolean) => void handleTurnBarTextChange: (newTurnBarText: string) => void + changecptTour: (newcptTour : number) => void + solo : boolean } let lastAskingPlayer = 0 let lastNodeId = -1 let first = true let askedWrong = false -let solo: boolean = true +let cptTour: number = 0 - -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, changecptTour, solo}) => { const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame(); const params = new URLSearchParams(window.location.search); - const solotmp = params.get('solo'); + let playerIndex: number = turnPlayerIndex @@ -53,12 +54,9 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } let thisPlayerIndex = index - + if (first){ first = false - if (solotmp == "false"){ - solo=false - } if (!solo){ setActualPlayerIndexData(index) if (playerIndex == thisPlayerIndex){ @@ -213,7 +211,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } }); - network.on("click", (params) => { + network.on("click", async (params) => { if(params.nodes.length > 0){ setNodeIdData(params.nodes[0]) @@ -240,17 +238,23 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS onNodeClick(false) } } - else{ + else{ // si solo -> Mastermind const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée if (person != undefined){ - indices.forEach(async (i, index) =>{ + let index = 0; + // indices.forEach(async (i, index) =>{ + for(const i of indices){ const tester = IndiceTesterFactory.Create(i) const test = tester.Works(person) const node = nodes.get().find((n) => params.nodes[0] == n.id) if (node!=undefined){ networkData.nodes.update({id: params.nodes[0], label: node.label + colorToEmoji(positionToColor(index), test)}) + await delay(500); } - }) + index ++; + } + cptTour ++; // On Incrémente le nombre de tour du joueur + changecptTour(cptTour); // On le transmet a la page précédente avec la fonction } } } diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css index 9e12155..600710e 100644 --- a/cryptide_project/src/Pages/InGame.css +++ b/cryptide_project/src/Pages/InGame.css @@ -60,6 +60,22 @@ top :50px; } +.nbLaps{ /*nombre de tour*/ + position: absolute; + z-index: 1; + left: 10px; + top :50px; + + margin: 10px 20px; + padding: 20px; + border-radius: 15px; + border: solid 2px; + + font-size: 30px; + color: #fff; +} + + #endgamebutton{ position: absolute; z-index: 1; diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index db37efe..8a90482 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -10,6 +10,7 @@ import ChoiceBar from '../Components/ChoiceBar'; import ButtonImgNav from '../Components/ButtonImgNav'; import PersonStatus from '../Components/PersonStatus'; import PlayerList from '../Components/PlayerList'; +import TurnBar from '../Components/TurnBar'; /* Icon */ import Leave from "../res/icon/leave.png"; @@ -32,45 +33,62 @@ import { HiLanguage } from 'react-icons/hi2'; import { Nav, NavDropdown } from 'react-bootstrap'; import { FormattedMessage } from 'react-intl'; import Color from '../model/Color'; -import TurnBar from '../Components/TurnBar'; import { useGame } from '../Contexts/GameContext'; //@ts-ignore const InGame = ({locale, changeLocale}) => { - + const theme = useTheme(); - - const [showChoiceBar, setShowChoiceBar] = useState(false); - const [showTurnBar, setShowTurnBar] = useState(false); - const [turnBarText, setTurnBarText] = useState(""); - const handleNodeClick = (shouldShowChoiceBar: boolean) => { - setShowChoiceBar(shouldShowChoiceBar); - }; + const params = new URLSearchParams(window.location.search); + + //* Gestion solo + let IsSolo: boolean = true + const solotmp = params.get('solo'); + if (solotmp == "false"){ + IsSolo=false + } - const handleShowTurnBar = (shouldShowTurnBar: boolean) => { - setShowTurnBar(shouldShowTurnBar); - }; - - const handleTurnBarTextChange = (newTurnBarText: string) =>{ - setTurnBarText(newTurnBarText) - } - - /* offcanvas */ - //? faire une fonction pour close et show en fonction de l'etat du canva ? - //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ? - const [show, setShow] = useState(false); - const handleClose = () => setShow(false); - const handleShow = () => setShow(true); - - const [showP, setShowP] = useState(false); - const handleCloseP = () => setShowP(false); - const handleShowP = () => setShowP(true); + + const [showChoiceBar, setShowChoiceBar] = useState(false); + const [showTurnBar, setShowTurnBar] = useState(false); + const [turnBarText, setTurnBarText] = useState(""); + + const handleNodeClick = (shouldShowChoiceBar: boolean) => { + setShowChoiceBar(shouldShowChoiceBar); + }; + + + const handleShowTurnBar = (shouldShowTurnBar: boolean) => { + setShowTurnBar(shouldShowTurnBar); + }; - const [showS, setShowS] = useState(false); - const handleCloseS = () => setShowS(false); - const handleShowS = () => setShowS(true); + const handleTurnBarTextChange = (newTurnBarText: string) =>{ + setTurnBarText(newTurnBarText) + } + + /* offcanvas */ + //? faire une fonction pour close et show en fonction de l'etat du canva ? + //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ? + const [show, setShow] = useState(false); + const handleClose = () => setShow(false); + const handleShow = () => setShow(true); + + const [showP, setShowP] = useState(false); + const handleCloseP = () => setShowP(false); + const handleShowP = () => setShowP(true); + + const [showS, setShowS] = useState(false); + const handleCloseS = () => setShowS(false); + const handleShowS = () => setShowS(true); + + const [cptTour, setcptTour] = useState(0); + + //@ts-ignore + const changecptTour = (newcptTour) => { + setcptTour(newcptTour); + }; const handleChange = () => { if (show){ @@ -114,19 +132,31 @@ const InGame = ({locale, changeLocale}) => {
{showTurnBar && }
- +
-
- -
+ }}> + Tour : {cptTour} +
+ ) : ( +
+ +
+ ) + } +