diff --git a/cryptide_project/package-lock.json b/cryptide_project/package-lock.json index d690428..f553b60 100644 --- a/cryptide_project/package-lock.json +++ b/cryptide_project/package-lock.json @@ -32,7 +32,12 @@ "socket.io-client": "^4.7.2", ======= "react-switch": "^7.0.0", +<<<<<<< HEAD >>>>>>> 3d3d620 (ajout de dépendances pour un switch et stub dans les params de jeu :package:) +======= + "socket.io": "^4.7.2", + "socket.io-client": "^4.7.2", +>>>>>>> 2ba7efc (Début du serveur) "typescript": "^5.2.2", "vis-network": "^9.1.9", "web-vitals": "^2.1.4" diff --git a/cryptide_project/package.json b/cryptide_project/package.json index 3778c98..670484a 100644 --- a/cryptide_project/package.json +++ b/cryptide_project/package.json @@ -24,6 +24,8 @@ "socket.io": "^4.7.2", "socket.io-client": "^4.7.2", "react-switch": "^7.0.0", + "socket.io": "^4.7.2", + "socket.io-client": "^4.7.2", "typescript": "^5.2.2", "vis-network": "^9.1.9", "web-vitals": "^2.1.4" diff --git a/cryptide_project/src/App.tsx b/cryptide_project/src/App.tsx index 815207c..cb11ed2 100644 --- a/cryptide_project/src/App.tsx +++ b/cryptide_project/src/App.tsx @@ -66,18 +66,20 @@ function App() { {/*@ts-ignore*/} - - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - + + + {hasNavbarVisible && } + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + diff --git a/cryptide_project/src/ColorHelper.ts b/cryptide_project/src/ColorHelper.ts new file mode 100644 index 0000000..6e10218 --- /dev/null +++ b/cryptide_project/src/ColorHelper.ts @@ -0,0 +1,56 @@ +import Player from "./model/Player"; +import { socket } from "./SocketConfig"; + +function positionToColor(pos: number): string{ + switch (pos) { + case 0: + return "blue"; + case 1: + return "green"; + case 2: + return "yellow"; + case 3: + return "purple"; + case 4: + return "red"; + default: + return "brown"; + } +} + +function colorToEmoji(color: string, works: boolean): string{ + if (works){ + switch (color) { + case "blue": + return "🔵"; + case "green": + return "🟢"; + case "yellow": + return "🟡"; + case "purple": + return "🟣"; + case "red": + return "🔴"; + default: + return "🟤"; + } + } + else{ + switch (color) { + case "blue": + return "🟦"; + case "green": + return "🟩"; + case "yellow": + return "🟨"; + case "purple": + return "🟪"; + case "red": + return "🟥"; + default: + return "🟫"; + } + } +} + +export {colorToEmoji, positionToColor} diff --git a/cryptide_project/src/Components/ChoiceBar.tsx b/cryptide_project/src/Components/ChoiceBar.tsx index a9c2f95..96f40f4 100644 --- a/cryptide_project/src/Components/ChoiceBar.tsx +++ b/cryptide_project/src/Components/ChoiceBar.tsx @@ -3,23 +3,60 @@ import { useGame } from '../Contexts/GameContext'; import { socket } from '../SocketConfig'; import './ChoiceBar.css'; import { useTheme } from '../Style/ThemeContext'; +import IndiceTesterFactory from '../model/Factory/IndiceTesterFactory'; +import { positionToColor } from '../ColorHelper'; const ChoiceBar = () => { - const { players, nodeId } = useGame(); + const { players, nodeId, actualPlayerIndex, personNetwork, indices, room } = useGame(); + const theme = useTheme(); + function askPlayer(playerId: string){ if (nodeId !== null){ + console.log("CLICK") socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id)) } } + function askEveryone(){ + if (nodeId !== null){ + const person = personNetwork?.getPersons().find((p) => p.getId() == nodeId) + if (person != undefined){ + const indiceTester = IndiceTesterFactory.Create(indices[actualPlayerIndex]) + let playerIndex = actualPlayerIndex + 1 + if (indiceTester.Works(person)){ + socket.emit("node checked", nodeId, true, positionToColor(actualPlayerIndex), room, actualPlayerIndex + 1) + while(playerIndex != actualPlayerIndex){ + const tester = IndiceTesterFactory.Create(indices[playerIndex]) + const works = tester.Works(person) + socket.emit("node checked", nodeId, works, positionToColor(playerIndex), room, actualPlayerIndex + 1) + if (!works){ + break + } + playerIndex ++ + if (playerIndex == players.length){ + playerIndex = 0 + } + } + } + else{ + console.log("Ne marche pas") + console.log(person) + } + } + console.log("CLICK") + //socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id)) + } + } + return (

Quel joueur voulez-vous interroger ?

+ {players.map((player, index) => ( player.id !== socket.id && - ))} diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index b688ba5..96bafbd 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -19,20 +19,34 @@ import Indice from "../model/Indices/Indice"; import { useLocation } from "react-router-dom"; import { useGame } from "../Contexts/GameContext"; import { socket } from "../SocketConfig" +import { colorToEmoji, positionToColor } from "../ColorHelper"; interface MyGraphComponentProps { onNodeClick: (shouldShowChoiceBar: boolean) => void; + handleShowTurnBar: (shouldShowTurnBar: boolean) => void } let lastAskingPlayer = 0 +let lastNodeId = -1 let first = true -const MyGraphComponent: React.FC = ({onNodeClick}) => { +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar}) => { const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex } = useGame(); let playerIndex: number = actualPlayerIndex + let index = 0 + for (let i=0; i = ({onNodeClick}) => { socket.on("node checked",(id, works, color, newPlayerIndex) => { const node = nodes.get().find((n) => id == n.id) if (node!=undefined){ - setActualPlayerIndexData(newPlayerIndex) + onNodeClick(false) playerIndex = newPlayerIndex networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)}) + if (playerIndex == thisPlayerIndex){ + handleShowTurnBar(true) + } + else{ + handleShowTurnBar(false) + } } lastAskingPlayer = 0 + lastNodeId = -1 }) socket.on("already asked", (nodeId, askedPlayer) =>{ @@ -100,8 +121,9 @@ const MyGraphComponent: React.FC = ({onNodeClick}) => { socket.on("asked", (nodeId, askingPlayer) => { - if (askingPlayer.id !== lastAskingPlayer){ + 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)){ @@ -117,12 +139,11 @@ const MyGraphComponent: React.FC = ({onNodeClick}) => { if(playerIndex == players.length){ playerIndex = 0 } - console.log(playerIndex) if (tester.Works(pers)){ - socket.emit("node checked", nodeId, true, positionToColor(), room, playerIndex) + socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex) } else{ - socket.emit("node checked", nodeId, false, positionToColor(), room, playerIndex) + socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, playerIndex) } } } @@ -164,14 +185,7 @@ const MyGraphComponent: React.FC = ({onNodeClick}) => { setNodeIdData(params.nodes[0]) // Renvoyer un true pour afficher la choice bar - let index = 0 - for (let i=0; i = ({onNodeClick}) => {
); - - function positionToColor(): string{ - let index = 0 - for (let i=0; i diff --git a/cryptide_project/src/Components/TurnBar.tsx b/cryptide_project/src/Components/TurnBar.tsx new file mode 100644 index 0000000..155bbce --- /dev/null +++ b/cryptide_project/src/Components/TurnBar.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { useTheme } from "../Style/ThemeContext"; + +const TurnBar = () => { + const theme = useTheme(); + return ( +
+ {/* texte changeable et a traduire */} +

Dummy, à vous de jouer !

+
+ ); + }; + + export default TurnBar; \ No newline at end of file diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 38946bc..5cf7ba3 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -32,38 +32,26 @@ 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 players = [ - { state: Replay, name: 'Dummy' }, - { state: Replay, name: 'Boat' }, - { state: Replay, name: 'Bot-tom' }, - { state: Replay, name: 'Dummy' }, - { state: Replay, name: 'Boat' }, - { state: Replay, name: 'Bot-tom' }, - { state: Replay, name: 'Dummy' }, - { state: Replay, name: 'Boat' }, - { state: Replay, name: 'Bot-tom' }, - { state: Replay, name: 'Dummy' }, - { state: Replay, name: 'Boat' }, - { state: Replay, name: 'Bot-tom' }, - { state: Replay, name: 'Dummy' }, - { state: Replay, name: 'Boat' }, - { state: Replay, name: 'Bot-tom' } - // Ajouter d'autres joueurs au besoin - ]; - - 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 ? @@ -114,18 +102,14 @@ const InGame = ({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 !

-
+ {showTurnBar && }
- +
@@ -211,9 +195,7 @@ const InGame = ({locale, changeLocale}) => { {/* Possède les cheveux noir ou joue au basket */} - {indices[0].ToString(locale)}
- {indices[1].ToString(locale)}
- {indices[2].ToString(locale)} + {indice?.ToString(locale)}
@@ -248,13 +230,14 @@ const InGame = ({locale, changeLocale}) => { -
{showChoiceBar && }
-
{/* tmp */} + {/* +
{/* tmp
+ */}
); }; diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 12c389a..6941be6 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/cryptide_project/src/Pages/Lobby.tsx @@ -3,7 +3,8 @@ import './Lobby.css'; import { useTheme } from '../Style/ThemeContext'; /* res */ -import PersonImg from '../res/img/Person.png'; +import PlayerItemList from '../Components/PlayerItemList' +import PersonImgImg from '../res/img/Person.png'; import Bot from '../res/img/bot.png'; import param from '../res/icon/param.png'; import cible from '../res/icon/cible.png'; @@ -24,11 +25,10 @@ import { random } from 'lodash'; import Player from '../model/Player'; -import PlayerItemList from '../Components/PlayerItemList' function Lobby() { + const theme=useTheme(); const navigate = useNavigate(); - const theme = useTheme() const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setRoomData } = useGame(); diff --git a/cryptide_project/src/Pages/Play.tsx b/cryptide_project/src/Pages/Play.tsx index ce8beb9..be516d1 100644 --- a/cryptide_project/src/Pages/Play.tsx +++ b/cryptide_project/src/Pages/Play.tsx @@ -22,7 +22,7 @@ import { useNavigate } from 'react-router-dom'; function Play() { -<<<<<<< HEAD + const theme=useTheme() const [room, setRoom] = useState(null); const navigate = useNavigate(); @@ -57,9 +57,6 @@ function Play() { -======= - const theme=useTheme() ->>>>>>> faf141d (ajout d'un theme global pour toutes les couleurs primaire, secondaire et quelque texte principaux :lipstick:) return (
@@ -81,19 +78,10 @@ function Play() { />
-<<<<<<< HEAD - - - -======= - - - - ->>>>>>> faf141d (ajout d'un theme global pour toutes les couleurs primaire, secondaire et quelque texte principaux :lipstick:) + diff --git a/cryptide_project/src/Translations/en.json b/cryptide_project/src/Translations/en.json index dd6bacd..96cbb54 100644 --- a/cryptide_project/src/Translations/en.json +++ b/cryptide_project/src/Translations/en.json @@ -42,7 +42,7 @@ "and": "and", "or": "or", - "or_sport": "or", + "or_sport": "and/or", "age_indice_start": "The suspect is between", diff --git a/cryptide_project/src/Translations/fr.json b/cryptide_project/src/Translations/fr.json index 6d3d1e3..e46c3e1 100644 --- a/cryptide_project/src/Translations/fr.json +++ b/cryptide_project/src/Translations/fr.json @@ -42,7 +42,7 @@ "and": "et", "or": "ou", - "or_sport": "ou du", + "or_sport": "et/ou du", "age_indice_start": "Le suspect a entre", "age_indice_more_start": "Le suspect a ou a plus de", diff --git a/cryptide_project/yarn.lock b/cryptide_project/yarn.lock index c6da65f..d81b81f 100644 --- a/cryptide_project/yarn.lock +++ b/cryptide_project/yarn.lock @@ -1262,6 +1262,7 @@ "integrity" "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==" "resolved" "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz" "version" "2.2.0" +<<<<<<< HEAD "@egjs/hammerjs@^2.0.0": "integrity" "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==" @@ -1269,11 +1270,13 @@ "version" "2.0.17" dependencies: "@types/hammerjs" "^2.0.36" +======= +>>>>>>> 2ba7efc (Début du serveur) "@egjs/hammerjs@^2.0.0": - version "2.0.17" - resolved "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz" - integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A== + "integrity" "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==" + "resolved" "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz" + "version" "2.0.17" dependencies: "@types/hammerjs" "^2.0.36" @@ -2014,6 +2017,7 @@ "dom-accessibility-api" "^0.5.9" "lz-string" "^1.5.0" "pretty-format" "^27.0.2" +<<<<<<< HEAD "@testing-library/dom@>=7.21.4": "integrity" "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==" @@ -2028,20 +2032,22 @@ "dom-accessibility-api" "^0.5.9" "lz-string" "^1.5.0" "pretty-format" "^27.0.2" +======= +>>>>>>> 2ba7efc (Début du serveur) "@testing-library/dom@>=7.21.4": - version "9.3.3" - resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz" - integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw== + "integrity" "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==" + "resolved" "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz" + "version" "9.3.3" dependencies: "@babel/code-frame" "^7.10.4" "@babel/runtime" "^7.12.5" "@types/aria-query" "^5.0.1" - aria-query "5.1.3" - chalk "^4.1.0" - dom-accessibility-api "^0.5.9" - lz-string "^1.5.0" - pretty-format "^27.0.2" + "aria-query" "5.1.3" + "chalk" "^4.1.0" + "dom-accessibility-api" "^0.5.9" + "lz-string" "^1.5.0" + "pretty-format" "^27.0.2" "@testing-library/jest-dom@^5.17.0": "integrity" "sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==" @@ -8085,7 +8091,11 @@ "react-is" "^16.3.2" "warning" "^4.0.0" +<<<<<<< HEAD "prop-types@^15.6.2", "prop-types@^15.8.1": +======= +"prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@^15.8.1": +>>>>>>> 2ba7efc (Début du serveur) "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==" "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" "version" "15.8.1" @@ -8223,7 +8233,11 @@ "strip-ansi" "^6.0.1" "text-table" "^0.2.0" +<<<<<<< HEAD "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0", "react-dom@>=16.8": +======= +"react-dom@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.14.0", "react-dom@>=16.6.0", "react-dom@>=16.8": +>>>>>>> 2ba7efc (Début du serveur) "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz" "version" "18.2.0" @@ -8362,6 +8376,16 @@ optionalDependencies: "fsevents" "^2.3.2" +<<<<<<< HEAD +======= +"react-switch@^7.0.0": + "integrity" "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==" + "resolved" "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz" + "version" "7.0.0" + dependencies: + "prop-types" "^15.7.2" + +>>>>>>> 2ba7efc (Début du serveur) "react-transition-group@^4.4.5": "integrity" "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==" "resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz" @@ -8372,7 +8396,11 @@ "loose-envify" "^1.4.0" "prop-types" "^15.6.2" +<<<<<<< HEAD "react@*", "react@^16.6.0 || 17 || 18", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.3", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0": +======= +"react@*", "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.3", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0": +>>>>>>> 2ba7efc (Début du serveur) "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==" "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz" "version" "18.2.0"