bientot fini le serveur

pull/73/head
Thomas Chazot 1 year ago
parent 52f95952d4
commit 796665db4c

@ -48,15 +48,23 @@ io.on('connection', (socket) => {
}) })
socket.on("lobby created", () =>{ socket.on("lobby created", () =>{
io.to(socket.id).emit("lobby created", 134) io.to(socket.id).emit("lobby created", Math.floor(Math.random() * 10000))
}) })
socket.on("already asked", (nodeId, askingPlayer, askedPlayer) =>{ socket.on("already asked", (nodeId, askingPlayer, askedPlayer) =>{
io.to(askingPlayer.id).emit("already asked", nodeId, askedPlayer) io.to(askingPlayer.id).emit("already asked", nodeId, askedPlayer)
}) })
socket.on("ask player", (nodeId, playerId, askingPlayer) =>{ socket.on("ask player", (nodeId, playerId, askingPlayer, askingPlayerIndex) =>{
io.to(playerId).emit("asked", nodeId, askingPlayer) io.to(playerId).emit("asked", nodeId, askingPlayer, askingPlayerIndex)
})
socket.on("asked all 1by1", (id, playerId) =>{
io.to(playerId).emit("asked all", id)
})
socket.on("asked wrong", (askingPlayer) =>{
io.to(askingPlayer.id).emit("asked wrong")
}) })
socket.on("disconnect", () =>{ socket.on("disconnect", () =>{

@ -13,11 +13,11 @@ const ChoiceBar = () => {
function askPlayer(playerId: string){ function askPlayer(playerId: string){
if (nodeId !== null){ if (nodeId !== null){
socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id)) socket.emit("ask player", nodeId, playerId, players.find((p) => p.id === socket.id, actualPlayerIndex))
} }
} }
function askEveryone(){ async function askEveryone(){
if (nodeId !== null){ if (nodeId !== null){
const person = personNetwork?.getPersons().find((p) => p.getId() == nodeId) const person = personNetwork?.getPersons().find((p) => p.getId() == nodeId)
if (person != undefined){ if (person != undefined){
@ -36,6 +36,8 @@ const ChoiceBar = () => {
} }
const tester = IndiceTesterFactory.Create(indices[playerIndex]) const tester = IndiceTesterFactory.Create(indices[playerIndex])
const works = tester.Works(person) const works = tester.Works(person)
await delay(500);
socket.emit("asked all 1by1", person.getId(), players[playerIndex].id)
socket.emit("node checked", nodeId, works, positionToColor(playerIndex), room, nextPlayerIndex) socket.emit("node checked", nodeId, works, positionToColor(playerIndex), room, nextPlayerIndex)
if(!works){ if(!works){
return return
@ -47,11 +49,15 @@ const ChoiceBar = () => {
} }
} }
function delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
return ( return (
<div className="choice-bar-container"> <div className="choice-bar-container">
<h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3> <h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3>
<div> <div>
<button className="choice-bar-button" onClick={() => askEveryone()} style={{ backgroundColor: theme.colors.primary }}>Tout le monde</button> <button className="choice-bar-button" onClick={async () => await askEveryone()} style={{ backgroundColor: theme.colors.primary }}>Tout le monde</button>
{players.map((player, index) => ( {players.map((player, index) => (
player.id !== socket.id && player.id !== socket.id &&
<button key={index} className="choice-bar-button" onClick={() => askPlayer(player.id)} style={{ backgroundColor: theme.colors.primary }}> <button key={index} className="choice-bar-button" onClick={() => askPlayer(player.id)} style={{ backgroundColor: theme.colors.primary }}>

@ -25,15 +25,17 @@ import { colorToEmoji, positionToColor } from "../ColorHelper";
interface MyGraphComponentProps { interface MyGraphComponentProps {
onNodeClick: (shouldShowChoiceBar: boolean) => void; onNodeClick: (shouldShowChoiceBar: boolean) => void;
handleShowTurnBar: (shouldShowTurnBar: boolean) => void handleShowTurnBar: (shouldShowTurnBar: boolean) => void
handleTurnBarTextChange: (newTurnBarText: string) => void
} }
let lastAskingPlayer = 0 let lastAskingPlayer = 0
let lastNodeId = -1 let lastNodeId = -1
let first = true let first = true
let askedWrong = false
const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar}) => { const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => {
const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex } = useGame(); const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame();
let playerIndex: number = turnPlayerIndex let playerIndex: number = turnPlayerIndex
let index = 0 let index = 0
@ -50,7 +52,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
first = false first = false
setActualPlayerIndexData(index) setActualPlayerIndexData(index)
if (playerIndex == thisPlayerIndex){ if (playerIndex == thisPlayerIndex){
handleTurnBarTextChange("À vous de jouer")
handleShowTurnBar(true) handleShowTurnBar(true)
} }
indices.forEach(i => { indices.forEach(i => {
console.log(i.ToString("en")) console.log(i.ToString("en"))
@ -96,21 +100,27 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
const networkData = { nodes: nodes, edges: graph.edges }; const networkData = { nodes: nodes, edges: graph.edges };
const network = new Network(container, networkData, initialOptions); 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) => { socket.on("node checked",(id, works, color, newPlayerIndex) => {
const node = nodes.get().find((n) => id == n.id) const node = nodes.get().find((n) => id == n.id)
if (node!=undefined){ if (node!=undefined){
onNodeClick(false) onNodeClick(false)
playerIndex = newPlayerIndex playerIndex = newPlayerIndex
if (!node.label.includes(colorToEmoji(color, works))){
networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)}) networkData.nodes.update({id: id, label: node.label + colorToEmoji(color, works)})
console.log(playerIndex + " => " + thisPlayerIndex) }
if (playerIndex === thisPlayerIndex){ if (playerIndex === thisPlayerIndex){
handleTurnBarTextChange("À vous de jouer")
handleShowTurnBar(true) handleShowTurnBar(true)
} }
else{ else{
handleShowTurnBar(false) handleShowTurnBar(false)
console.log("je passe bien ici ?????")
} }
} }
lastAskingPlayer = 0 lastAskingPlayer = 0
@ -121,8 +131,16 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
console.log("player: " + askedPlayer + " already asked on node " + nodeId) 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) => { socket.on("asked", (nodeId, askingPlayer, askingPlayerIndex) => {
console.log(askingPlayerIndex)
if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){ if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){
lastAskingPlayer = askingPlayer.id lastAskingPlayer = askingPlayer.id
lastNodeId = nodeId lastNodeId = nodeId
@ -137,6 +155,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
const node = nodes.get().find((n) => nodeId == n.id) const node = nodes.get().find((n) => nodeId == n.id)
if (node != undefined && indice != null){ if (node != undefined && indice != null){
var tester = IndiceTesterFactory.Create(indice) var tester = IndiceTesterFactory.Create(indice)
let maybe = thisPlayerIndex
playerIndex = playerIndex + 1 playerIndex = playerIndex + 1
if(playerIndex == players.length){ if(playerIndex == players.length){
playerIndex = 0 playerIndex = 0
@ -145,7 +164,12 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex) socket.emit("node checked", nodeId, true, positionToColor(thisPlayerIndex), room, playerIndex)
} }
else{ else{
socket.emit("node checked", nodeId, false, positionToColor(thisPlayerIndex), room, playerIndex) 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)
} }
} }
} }
@ -185,9 +209,26 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
if(params.nodes.length > 0){ if(params.nodes.length > 0){
setNodeIdData(params.nodes[0]) setNodeIdData(params.nodes[0])
// Renvoyer un true pour afficher la choice bar // Renvoyer un true pour afficher la choice bar
if (thisPlayerIndex == playerIndex){ 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
}
socket.emit("node checked", params.nodes[0], false, positionToColor(thisPlayerIndex), room, playerIndex)
askedPersons.push(person)
askedWrong = false
}
}
}
else if (thisPlayerIndex == playerIndex){
onNodeClick(true) onNodeClick(true)
} }
else{ else{

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { colorToEmoji, positionToColor } from '../ColorHelper';
import PersonStatus from './PersonStatus'; import PersonStatus from './PersonStatus';
//@ts-ignore //@ts-ignore
@ -9,7 +10,7 @@ function PlayerList({ players }) {
{ {
//@ts-ignore //@ts-ignore
players.map((player, index) => ( players.map((player, index) => (
<PersonStatus key={index} state={player.state} name={player.name} /> <PersonStatus key={index} state={player.state} name={player.name + " " + colorToEmoji(positionToColor(index), true)} />
)) ))
} }
</div> </div>

@ -1,7 +1,11 @@
import React from "react"; import React from "react";
import { useTheme } from "../Style/ThemeContext"; import { useTheme } from "../Style/ThemeContext";
const TurnBar = () => { interface TurnBarProps{
text: string
}
const TurnBar: React.FC<TurnBarProps> = ({text})=> {
const theme = useTheme(); const theme = useTheme();
return ( return (
<div className='upperInfo' <div className='upperInfo'
@ -9,7 +13,7 @@ const TurnBar = () => {
borderColor: theme.colors.secondary borderColor: theme.colors.secondary
}}> }}>
{/* texte changeable et a traduire */} {/* texte changeable et a traduire */}
<p>Dummy, à vous de jouer !</p> <p>{text}</p>
</div> </div>
); );
}; };

@ -15,6 +15,7 @@ interface GameContextProps {
actualPlayerIndex: number; actualPlayerIndex: number;
turnPlayerIndex: number; turnPlayerIndex: number;
room: string; room: string;
onlyFalse: boolean
setIndicesData: (newIndices: Indice[]) => void; setIndicesData: (newIndices: Indice[]) => void;
setIndiceData: (newIndice: Indice) => void; setIndiceData: (newIndice: Indice) => void;
setPersonData: (newPerson: Person) => void; setPersonData: (newPerson: Person) => void;
@ -25,6 +26,7 @@ interface GameContextProps {
setActualPlayerIndexData: (newActualPlayerIndex: number) => void; setActualPlayerIndexData: (newActualPlayerIndex: number) => void;
setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void; setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void;
setRoomData: (newRoom: string) => void; setRoomData: (newRoom: string) => void;
setOnlyFalseData: (newOnlyFalse: boolean) => void
} }
const GameContext = createContext<GameContextProps | undefined>(undefined); const GameContext = createContext<GameContextProps | undefined>(undefined);
@ -44,6 +46,7 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
const [actualPlayerIndex, setActualPlayerIndex] = useState<number>(-1) const [actualPlayerIndex, setActualPlayerIndex] = useState<number>(-1)
const [turnPlayerIndex, setTurnPlayerIndex] = useState<number>(-1) const [turnPlayerIndex, setTurnPlayerIndex] = useState<number>(-1)
const [room, setRoom] = useState<string>("") const [room, setRoom] = useState<string>("")
const [onlyFalse, setOnlyFalse] = useState<boolean>(false)
const setIndicesData = (newIndices: Indice[]) => { const setIndicesData = (newIndices: Indice[]) => {
@ -87,8 +90,12 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
setRoom(newRoom) setRoom(newRoom)
} }
const setOnlyFalseData = (newOnlyFalse: boolean) =>{
setOnlyFalse(newOnlyFalse)
}
return ( return (
<GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData }}> <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData }}>
{children} {children}
</GameContext.Provider> </GameContext.Provider>
); );

@ -42,7 +42,7 @@ const InGame = ({locale, changeLocale}) => {
const [showChoiceBar, setShowChoiceBar] = useState(false); const [showChoiceBar, setShowChoiceBar] = useState(false);
const [showTurnBar, setShowTurnBar] = useState(false); const [showTurnBar, setShowTurnBar] = useState(false);
const [turnBarText, setTurnBarText] = useState("");
const handleNodeClick = (shouldShowChoiceBar: boolean) => { const handleNodeClick = (shouldShowChoiceBar: boolean) => {
setShowChoiceBar(shouldShowChoiceBar); setShowChoiceBar(shouldShowChoiceBar);
@ -50,10 +50,13 @@ const InGame = ({locale, changeLocale}) => {
const handleShowTurnBar = (shouldShowTurnBar: boolean) => { const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
console.log("je passe bien ici avec : " + shouldShowTurnBar)
setShowTurnBar(shouldShowTurnBar); setShowTurnBar(shouldShowTurnBar);
}; };
const handleTurnBarTextChange = (newTurnBarText: string) =>{
setTurnBarText(newTurnBarText)
}
/* offcanvas */ /* offcanvas */
//? faire une fonction pour close et show en fonction de l'etat du canva ? //? 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 ? //? comment faire pour eviter la recopie de tout le code a chaque canvas boostrap ?
@ -109,9 +112,9 @@ const InGame = ({locale, changeLocale}) => {
return ( return (
<div id="mainDiv"> <div id="mainDiv">
{showTurnBar && <TurnBar/>} {showTurnBar && <TurnBar text={turnBarText}/>}
<div id='graphDiv'> <div id='graphDiv'>
<GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} /> <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} />
</div> </div>
<div className='playerlistDiv'> <div className='playerlistDiv'>

Loading…
Cancel
Save