pull/87/head
Pierre Ferreira 1 year ago
commit 1152ea7942

@ -29,6 +29,7 @@ interface MyGraphComponentProps {
setNetwork: (network: Network) => void
showLast: boolean
setNetworkEnigme: (networkEnigme: Map<number, Pair<Indice, boolean>[]>) => void
setPlayerIndex: (playerIndex: number) => void
}
let lastAskingPlayer = 0
@ -45,10 +46,12 @@ let cptHistory = 0
let lastNodes: NodePerson[] = []
let cptEndgame = 0
let firstEnigme = true
let firstIndex = true
let endgame= false
let firstHistory = true
const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme}) => {
const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex}) => {
let cptTour: number = 0
//* Gestion du temps :
@ -118,6 +121,11 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
}, [showLast])
let playerIndex: number = turnPlayerIndex
if (firstIndex){
firstIndex=false
setPlayerIndex(playerIndex)
}
let index = 0
for (let i=0; i<players.length; i++){
if(players[i].id == socket.id){
@ -292,15 +300,14 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
setNetwork(network)
if (isDaily){
if(!isEasy){
// setNetworkEnigme(dailyEnigme)
setNetworkEnigme(dailyEnigme)
if (!isEasy){
dailyEnigme.forEach((pairs, index) => {
pairs.forEach((pair) => {
const i = indices.findIndex((indice) => pair.first.getId() === indice.getId())
const node = networkData.nodes.get().find((n) => index == n.id)
if (node != undefined){
networkData.nodes.update({id: node.id, label: node.label + positionToEmoji(i, pair.second)})
// const test = networkData.nodes.get().find((n) => index == n.id)
}
})
});
@ -312,8 +319,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
addToHistory("Indice " + positionToEmoji(index, true) + " : " + indice.ToString("fr"))
})
}
}
}
}
socket.on("reset graph", () => {
console.log("reset graph")
@ -348,6 +356,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
if (node!=undefined){
onNodeClick(false)
playerIndex = newPlayerIndex
setPlayerIndex(playerIndex)
if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){
const p = personNetwork.getPersons().find((p)=> p.getId() == id)
const tab = mapIndexPersons.get(askedIndex)
@ -524,7 +533,6 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
askedWrongBot=false
endgame = true
firstHistory=true
try{
if(isLoggedIn){
if(!solo){

@ -17,37 +17,62 @@ interface PlayerStatusProps {
setPlayerTouched: (newPlayerTouch: number) => void;
playerTouched: number
showCircle: boolean
playerIndex: number
}
let touchedPlayer = -1
//@ts-ignore
const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle}) => {
const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched, showCircle, playerIndex}) => {
const theme=useTheme();
const {players} = useGame()
const {players, actualPlayerIndex} = useGame()
if (players[index] instanceof Bot){
img = BotImg
}
const [buffer, setBuffer] = useState("")
const [touchedPlayer, setTouchedPlayer] = useState(-2)
useEffect(() =>{
setTouchedPlayer(playerTouched)
}, [playerTouched])
let IsActualPlayer = index != actualPlayerIndex
useEffect(() => {
if (playerIndex===index){
setBuffer('solid 1px green')
}
else{
setBuffer('')
}
}, [playerIndex])
function onTouch(){
if (IsActualPlayer){
setPlayerTouched(index)
}
}
return (
<div className='centerDivV' onClick={() => setPlayerTouched(index)}>
<img src={img} alt="player" height="60" width="60"/>
<h5>{name}</h5>
{(touchedPlayer == index && showCircle) ?(
<div className='statusDiv' style={{ backgroundColor: "gold" }}>
<img src={state} alt="state" height="30" width="30"/>
</div>
): showCircle &&
(
<div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
<img src={state} alt="state" height="30" width="30"/>
</div>
) }
<div style={{border:buffer}}>
<div className='centerDivV' onClick={() => onTouch()}>
<img src={img} alt="player" height="60" width="60"/>
<h5>{name}</h5>
{IsActualPlayer && (
(touchedPlayer == index && showCircle) ?(
<div className='statusDiv' style={{ backgroundColor: "gold" }}>
<img src={state} alt="state" height="30" width="30"/>
</div>
): showCircle &&
(
<div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
<img src={state} alt="state" height="30" width="30"/>
</div>
)
)}
</div>
</div>
);
}

@ -14,9 +14,10 @@ interface PlayerListProps {
players: Player[];
playerTouched: number
setPlayerTouched: (newPlayerTouch: number) => void;
}
playerIndex: number
}
const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched}) => {
const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched, playerIndex}) => {
const theme = useTheme();
return (
@ -25,7 +26,18 @@ const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlay
{
//@ts-ignore
players.map((player, index) => (
player.id!=socket.id && <PersonStatus img={player.profilePicture} state={Person} key={index} name={player.pseudo + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index} showCircle={true}/>
//player.id!=socket.id &&
<PersonStatus img={player.profilePicture}
state={Person}
key={index}
name={player.pseudo
+ " " +
colorToEmoji(positionToColor(index), true)}
playerTouched={playerTouched}
setPlayerTouched={setPlayerTouched}
index={index}
showCircle={true}
playerIndex={playerIndex}/>
))
}
</div>

@ -98,7 +98,7 @@ function EndGame() {
<div className="playerContainer" key={index}>
{player.id !== winner?.id && (
<div>
<PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} showCircle={false}/>
<PersonStatus img={Person} state={Person} key={index} name={player.pseudo} playerTouched={1} setPlayerTouched={() => {}} index={index} playerIndex={-2} showCircle={false}/>
<h6 className='indiceDisplay'>{indices[players.findIndex((p) => p.id == player?.id)].ToString("fr")}</h6>
</div>
)}

@ -72,12 +72,12 @@ const InGame = ({locale, changeLocale}) => {
isDaily=false
}
let isEasy: boolean = true
const isEasytmp = params.get('easy');
if (isEasytmp == "false"){
isEasy=false
}
//* Historique
const [history, setHistory] = useState<string[]>([]);
const [showLast, setShowLast] = useState(false)
@ -106,6 +106,8 @@ const InGame = ({locale, changeLocale}) => {
const [showTurnBar, setShowTurnBar] = useState(false);
const [turnBarText, setTurnBarText] = useState("");
const [playerTouched, setPlayerTouched] = useState(-2)
const [playerIndex, setPlayerIndex] = useState(-2)
const [network, setNetwork] = useState<Network | null>(null)
const [networkEnigme, setNetworkEnigme] = useState<Map<number, Pair<Indice, boolean>[]> | null>(null)
@ -135,6 +137,10 @@ const InGame = ({locale, changeLocale}) => {
setTurnBarText(newTurnBarText)
}
const setPlayerIndexData = (playerIndex: number) => {
setPlayerIndex(playerIndex)
}
const generateTEX = async () => {
if (network != null && personNetwork != null && person != null){
@ -269,7 +275,8 @@ const InGame = ({locale, changeLocale}) => {
playerTouched={playerTouched}
setNetwork={setNetworkData}
setNetworkEnigme={setNetworkEnigmeData}
showLast={showLast}/>
showLast={showLast}
setPlayerIndex={setPlayerIndexData}/>
</div>
@ -398,7 +405,7 @@ const InGame = ({locale, changeLocale}) => {
{ !IsSolo &&
<div className='playerlistDiv'>
<PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} />
<PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex}/>
</div>
}

@ -53,6 +53,11 @@ function Lobby() {
const theme=useTheme();
const navigate = useNavigate();
//@ts-ignore
const handleNumberChange = (event) => {
const newNumber = Math.max(20, Math.min(60, parseInt(event.target.value, 10)));
setEnteredNumber(newNumber);
};
const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame();
@ -303,6 +308,20 @@ function Lobby() {
</button>
</div>
{/* <div className='centerDivH'>
<div>
<label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
<input
type="number"
id="numberInput"
value={enteredNumber}
onChange={handleNumberChange}
min={20}
max={60}/>
<p>La valeur saisie : {enteredNumber}</p>
</div>
<div className='centerDivH'>
<button className='button' onClick={StartGame}
style={{
backgroundColor: theme.colors.tertiary,

@ -135,17 +135,6 @@ function Play() {
if (!showOverlay)setShowOverlay(true)
else setShowOverlay(true)
// const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
// setPersonData(choosenPerson)
// setPersonNetworkData(networkPerson)
// setIndicesData(choosenIndices)
// setIndicesData(choosenIndices)
// if (first){
// first = false
// const map = EnigmeDuJourCreator.createEnigme(networkPerson, choosenIndices, choosenPerson, Stub.GenerateIndice())
// setDailyEnigmeData(map)
// }
// navigate('/game?solo=true&daily=true');
}
@ -172,6 +161,7 @@ function Play() {
}, [room, navigate]);
const [showOverlay, setShowOverlay] = useState(false);
const [selectedDifficulty, setSelectedDifficulty] = useState(null);
@ -183,11 +173,13 @@ function Play() {
const handleStartEasyGame = () => {
//* Mode facile
//todo différencier les deux
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
setPersonData(choosenPerson)
setPersonNetworkData(networkPerson)
setIndicesData(choosenIndices)
setIndicesData(choosenIndices)
navigate('/game?solo=true&daily=true&easy=true');
setShowOverlay(false);
};
@ -211,7 +203,6 @@ function Play() {
};
return (
<div className="MainContainer">
@ -234,6 +225,8 @@ function Play() {
</div>
<div className='buttonGroupVertical'>
<button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
<button ref={target} onClick={launchEngimeJour} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Résoudre une énigme</button>
<Overlay show={showOverlay} target={target.current} placement="bottom" rootClose={true} rootCloseEvent='click'>
{({ placement, arrowProps, show: _show, popper, ...props }) => (
@ -255,7 +248,6 @@ function Play() {
</Overlay>
<button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
<button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>

Loading…
Cancel
Save