diff --git a/cryptide_project/server/server.js b/cryptide_project/server/server.js index faee172..9364c59 100644 --- a/cryptide_project/server/server.js +++ b/cryptide_project/server/server.js @@ -84,4 +84,20 @@ io.on('connection', (socket) => { io.to(room).emit("node checked", id, works, color, playerIndex) }) + socket.on("put correct background", (id) =>{ + io.to(id).emit("put correct background") + }) + + socket.on("put grey background", (id, player) =>{ + io.to(id).emit("put grey background", player) + }) + + socket.on("put imossible grey", (id) =>{ + io.to(id).emit("put imossible grey") + }) + + socket.on("end game", (winnerIndex, room) =>{ + console.log("endgame") + io.to(room).emit("end game", winnerIndex) + }) }); diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index de859f5..96b88d1 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/cryptide_project/src/Components/GraphContainer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { DataSet, Network} from "vis-network/standalone/esm/vis-network"; import EdgesCreator from "../model/EdgesCreator"; import GraphCreator from "../model/Graph/GraphCreator"; @@ -20,12 +20,15 @@ import { Navigate, useLocation, useNavigate } from "react-router-dom"; import { useGame } from "../Contexts/GameContext"; import { socket } from "../SocketConfig" import { colorToEmoji, positionToColor } from "../ColorHelper"; +import { ColorToHexa } from "../model/EnumExtender"; interface MyGraphComponentProps { onNodeClick: (shouldShowChoiceBar: boolean) => void; handleShowTurnBar: (shouldShowTurnBar: boolean) => void handleTurnBarTextChange: (newTurnBarText: string) => void + setPlayerTouched: (newPlayerTouch: number) => void; + playerTouched: number } let lastAskingPlayer = 0 @@ -34,17 +37,35 @@ let first = true let askedWrong = false let solo: boolean = true let mapIndexPersons: Map = new Map() +let touchedPlayer = -1 -const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => { - - const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame(); +const MyGraphComponent: React.FC = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched}) => { + const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setWinnerData } = useGame(); const params = new URLSearchParams(window.location.search); const solotmp = params.get('solo'); const navigate = useNavigate(); + useEffect(() =>{ + touchedPlayer=playerTouched + if (touchedPlayer == -1){ + if (!askedWrong){ + socket.emit("put correct background", socket.id) + } + } + else if (touchedPlayer < players.length && touchedPlayer>=0){ + if(!askedWrong){ + 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]) + let playerIndex: number = turnPlayerIndex let index = 0 @@ -111,6 +132,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS const networkData = { nodes: nodes, edges: graph.edges }; const network = new Network(container, networkData, initialOptions); + if (!solo){ socket.on("asked all", (id) =>{ const pers = personNetwork.getPersons().find((p) => p.getId() == id) @@ -124,9 +146,18 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS if (node!=undefined){ onNodeClick(false) playerIndex = newPlayerIndex + if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){ + const p = personNetwork.getPersons().find((p)=> p.getId() == id) + const tab = mapIndexPersons.get(askedIndex) + if (p!=undefined && tab != undefined){ + tab.push(p) + } + } + if (!node.label.includes(colorToEmoji(positionToColor(askedIndex), works))){ networkData.nodes.update({id: id, label: node.label + colorToEmoji(positionToColor(askedIndex), works)}) } + if (playerIndex === thisPlayerIndex){ handleTurnBarTextChange("À vous de jouer") handleShowTurnBar(true) @@ -144,15 +175,14 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS }) socket.on("asked wrong", () =>{ - setOnlyFalseData(true) askedWrong = true handleShowTurnBar(true) handleTurnBarTextChange("Mauvais choix, posez un carré !") + socket.emit("put grey background", socket.id, thisPlayerIndex) }) socket.on("asked", (nodeId, askingPlayer, askingPlayerIndex) => { - console.log(askingPlayerIndex) if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){ lastAskingPlayer = askingPlayer.id lastNodeId = nodeId @@ -192,6 +222,61 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS } + socket.on("put correct background", () =>{ + if (personNetwork != null){ + for(const person of personNetwork.getPersons()){ + networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())}) + } + } + }) + + socket.on("put grey background", (player) =>{ + if (personNetwork != null){ + const tab = mapIndexPersons.get(player) + if (tab != undefined){ + if (player != thisPlayerIndex){ + for(const person of personNetwork.getPersons().filter((p) => tab.includes(p))){ + networkData.nodes.update({id: person.getId(), color: "#808080"}) + } + } + else if(indice != null){ + const tester = IndiceTesterFactory.Create(indice) + for(const person of personNetwork.getPersons().filter((p) => tab.includes(p) || tester.Works(p))){ + networkData.nodes.update({id: person.getId(), color: "#808080"}) + } + } + } + } + }) + + socket.on("put imossible grey", ()=>{ + if (personNetwork != null && indice!=null){ + const tabNodes: any = [] + const tester = IndiceTesterFactory.Create(indice) + for (const pers of personNetwork.getPersons()){ + const node = nodes.get().find((n) => pers.getId() == n.id) + if (node != undefined){ + for(let i=0; i{ + setWinnerData(players[winnerIndex]) + navigate("/endgame") + }) + personNetwork.getPersons().forEach(p => { @@ -234,24 +319,59 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS playerIndex = 0 } socket.emit("node checked", params.nodes[0], false, thisPlayerIndex, room, playerIndex) + socket.emit("put correct background", socket.id) + touchedPlayer=-1 askedPersons.push(person) askedWrong = false } } } - else if (thisPlayerIndex == playerIndex){ - onNodeClick(true) + else if(touchedPlayer != - 1 && playerIndex == actualPlayerIndex && touchedPlayer p.id === socket.id, actualPlayerIndex)) + socket.emit("put correct background", socket.id) + touchedPlayer=-1 } - else{ - onNodeClick(false) + else if(playerIndex == actualPlayerIndex && touchedPlayer==players.length){ + const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) + if (person != undefined){ + const indiceTester = IndiceTesterFactory.Create(indices[actualPlayerIndex]) + let nextPlayerIndex = actualPlayerIndex + 1 + if (nextPlayerIndex == players.length){ + nextPlayerIndex = 0 + } + + let playerIndex = actualPlayerIndex + 1 + if (indiceTester.Works(person)){ + socket.emit("node checked", params.nodes[0], true, actualPlayerIndex, room, nextPlayerIndex) + while(playerIndex != actualPlayerIndex){ + if (playerIndex == players.length){ + playerIndex = 0 + } + const tester = IndiceTesterFactory.Create(indices[playerIndex]) + const works = tester.Works(person) + await delay(500); + socket.emit("asked all 1by1", person.getId(), players[playerIndex].id) + socket.emit("node checked", params.nodes[0], works, playerIndex, room, nextPlayerIndex) + if(!works){ + socket.emit("put correct background", socket.id) + touchedPlayer=-1 + return + } + playerIndex ++ + } + touchedPlayer=-1 + socket.emit("put correct background", socket.id) + await delay(1000) + socket.emit("end game", thisPlayerIndex, room) + } + } } - } + } else{ const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée if (person != undefined){ let index =0 let works = true - let promises: Promise[] = [] for (const i of indices){ const tester = IndiceTesterFactory.Create(i) const test = tester.Works(person) @@ -278,6 +398,7 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS else{ // Renvoyer un false pour cacher la choice bar onNodeClick(false) + setPlayerTouched(-1) } }); }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu @@ -291,6 +412,12 @@ 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/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx index 7afcca2..5a3ab8f 100644 --- a/cryptide_project/src/Components/PersonStatus.tsx +++ b/cryptide_project/src/Components/PersonStatus.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; /* Style */ import '../Style/Global.css' @@ -7,17 +7,40 @@ import { useTheme } from '../Style/ThemeContext'; /* Ressources */ import Person from '../res/img/Person.png' import leave from '../res/img/bot.png' +interface PlayerStatusProps { + img: any + state: any + name: string + index: number + setPlayerTouched: (newPlayerTouch: number) => void; + playerTouched: number + } + let touchedPlayer = -1 //@ts-ignore -function PersonStatus({img = Person, state= Person, name = "Dummy"}) { +const PersonStatus: React.FC = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched}) => { const theme=useTheme(); + + const [touchedPlayer, setTouchedPlayer] = useState(-2) + useEffect(() =>{ + setTouchedPlayer(playerTouched) + console.log(touchedPlayer) + }, [playerTouched]) return ( -
- player -

{name}

-
- state -
+
setPlayerTouched(index)}> + player +
{name}
+ {(touchedPlayer == index) ?( +
+ state +
+ ): + ( +
+ state +
+ ) } +
); } diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx index 5dcfb25..6d01a0f 100644 --- a/cryptide_project/src/Components/PlayerList.tsx +++ b/cryptide_project/src/Components/PlayerList.tsx @@ -1,19 +1,66 @@ import React from 'react'; import { colorToEmoji, positionToColor } from '../ColorHelper'; +import Player from '../model/Player'; +import { useTheme } from '../Style/ThemeContext'; import PersonStatus from './PersonStatus'; +import Person from '../res/img/Person.png' +import { socket } from '../SocketConfig'; + //@ts-ignore -function PlayerList({ players }) { + +interface PlayerListProps { + players: Player[]; + playerTouched: number + setPlayerTouched: (newPlayerTouch: number) => void; + } + +const PlayerList: React.FC = ({ players, playerTouched, setPlayerTouched}) => { + const theme = useTheme(); + return ( -
- { - //@ts-ignore - players.map((player, index) => ( - - )) +
+
+ { + //@ts-ignore + players.map((player, index) => ( + player.id!=socket.id && + )) + } +
+
+ {(playerTouched == players.length) + ?( + + ): + ( + + ) } +
+ ); } diff --git a/cryptide_project/src/Contexts/GameContext.tsx b/cryptide_project/src/Contexts/GameContext.tsx index 380d7d3..bfc46ef 100644 --- a/cryptide_project/src/Contexts/GameContext.tsx +++ b/cryptide_project/src/Contexts/GameContext.tsx @@ -16,6 +16,7 @@ interface GameContextProps { turnPlayerIndex: number; room: string; onlyFalse: boolean + winner: Player | null setIndicesData: (newIndices: Indice[]) => void; setIndiceData: (newIndice: Indice) => void; setPersonData: (newPerson: Person) => void; @@ -27,6 +28,7 @@ interface GameContextProps { setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void; setRoomData: (newRoom: string) => void; setOnlyFalseData: (newOnlyFalse: boolean) => void + setWinnerData: (winner: Player) => void } const GameContext = createContext(undefined); @@ -47,6 +49,7 @@ export const GameProvider: React.FC = ({ children }) => { const [turnPlayerIndex, setTurnPlayerIndex] = useState(-1) const [room, setRoom] = useState("") const [onlyFalse, setOnlyFalse] = useState(false) + const [winner, setWinner] = useState(null) const setIndicesData = (newIndices: Indice[]) => { @@ -94,8 +97,12 @@ export const GameProvider: React.FC = ({ children }) => { setOnlyFalse(newOnlyFalse) } + const setWinnerData = (winner: Player) =>{ + setWinner(winner) + } + return ( - + {children} ); diff --git a/cryptide_project/src/Pages/EndGame.tsx b/cryptide_project/src/Pages/EndGame.tsx index 5984075..dea7588 100644 --- a/cryptide_project/src/Pages/EndGame.tsx +++ b/cryptide_project/src/Pages/EndGame.tsx @@ -21,17 +21,20 @@ import { Link } from 'react-router-dom'; /* lang */ import { FormattedMessage } from 'react-intl'; +import { useGame } from '../Contexts/GameContext'; function EndGame() { + const {winner, person} =useGame() + console.log(winner) const theme = useTheme(); return (
-

Dummy a gagné !

-

Le tueur était Bob

+

{winner?.name} a gagné !

+

Le tueur était {person?.getName()}

@@ -42,9 +45,12 @@ function EndGame() {
- - - + {/* + + + + */} +
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index db37efe..73bccaf 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/cryptide_project/src/Pages/InGame.tsx @@ -43,10 +43,15 @@ const InGame = ({locale, changeLocale}) => { const [showChoiceBar, setShowChoiceBar] = useState(false); const [showTurnBar, setShowTurnBar] = useState(false); const [turnBarText, setTurnBarText] = useState(""); + const [playerTouched, setPlayerTouched] = useState(-2) const handleNodeClick = (shouldShowChoiceBar: boolean) => { setShowChoiceBar(shouldShowChoiceBar); }; + + const handleSetPlayerTouched = (newPlayerTouched: number) => { + setPlayerTouched(newPlayerTouched); + }; const handleShowTurnBar = (shouldShowTurnBar: boolean) => { @@ -114,18 +119,7 @@ const InGame = ({locale, changeLocale}) => {
{showTurnBar && }
- -
- -
- +
@@ -172,6 +166,7 @@ const InGame = ({locale, changeLocale}) => {
+{/* @@ -179,15 +174,14 @@ const InGame = ({locale, changeLocale}) => {

Il y a {players.length} joueurs

- {/* affichage d'une liste responsive dynamic */} - {/*
- - - -
*/} - +
+ */} +
+ +
+ { - let label = p.getName() + "\n" + p.getAge() + "\n" + let label = p.getName() + "\n" + p.getAge() + "🎂" + "\n" for (let i = 0; i { if (person.getFriends().length == nbEdges){ return diff --git a/cryptide_project/src/model/IndiceTester/NbEdgesIndiceTester.ts b/cryptide_project/src/model/IndiceTester/NbEdgesIndiceTester.ts index 8276c57..6956d48 100644 --- a/cryptide_project/src/model/IndiceTester/NbEdgesIndiceTester.ts +++ b/cryptide_project/src/model/IndiceTester/NbEdgesIndiceTester.ts @@ -12,7 +12,7 @@ class NbEdgesIndiceTester implements IndiceTester{ } Works(person: Person): boolean { - return person.getFriends().length >= this.nbEdgesIndice.getNbEdges() + return person.getFriends().length == this.nbEdgesIndice.getNbEdges() } } diff --git a/cryptide_project/src/model/Stub.ts b/cryptide_project/src/model/Stub.ts index eb32c76..2da86a4 100644 --- a/cryptide_project/src/model/Stub.ts +++ b/cryptide_project/src/model/Stub.ts @@ -11,16 +11,17 @@ import Sport from "./Sport" class Stub{ static GenerateIndice(): Indice[]{ - let indice = new NbEdgesIndice(1, 3) - let indice1 = new NbEdgesIndice(2, 4) - let ageIndice = new AgeIndice(3, 0, 14) - let ageIndice1 = new AgeIndice(4, 15, 19) - let ageIndice2 = new AgeIndice(5, 20, 29) - let ageIndice3 = new AgeIndice(6, 30, 100000) + let indice = new NbEdgesIndice(1, 2) + let indice1 = new NbEdgesIndice(2, 3) + let indice2 = new NbEdgesIndice(3, 4) + let ageIndice = new AgeIndice(4, 0, 14) + let ageIndice1 = new AgeIndice(5, 15, 19) + let ageIndice2 = new AgeIndice(6, 20, 29) + let ageIndice3 = new AgeIndice(7, 30, 100000) - let indices: Indice[] = [indice, indice1, ageIndice, ageIndice1, ageIndice2, ageIndice3] + let indices: Indice[] = [indice, indice1, indice2, ageIndice, ageIndice1, ageIndice2, ageIndice3] - let test = 7 + let test = 8 for (let i: Color=0; i<5; i++){ for (let j: Color=0; j<5; j++){ if (j==i){