You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.3 KiB
108 lines
3.3 KiB
import React, { useEffect, useState } from 'react';
|
|
|
|
/* Context */
|
|
import { useAuth } from '../Contexts/AuthContext';
|
|
|
|
/* Style */
|
|
import './Play.css';
|
|
import { useTheme } from '../Style/ThemeContext';
|
|
|
|
/* Component */
|
|
import ButtonImgNav from "../Components/ButtonImgNav";
|
|
|
|
/* Img */
|
|
import Person from '../res/img/Person.png';
|
|
|
|
/* Icon */
|
|
import { socket } from '../SocketConfig';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import GameCreator from '../model/GameCreator';
|
|
import { useGame } from '../Contexts/GameContext';
|
|
import ScoreBoard from '../Components/ScoreBoard';
|
|
|
|
function Play() {
|
|
const theme=useTheme()
|
|
const {user} = useAuth();
|
|
|
|
const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();
|
|
|
|
|
|
const [room, setRoom] = useState(null);
|
|
const navigate = useNavigate();
|
|
|
|
function createLobby(){
|
|
socket.emit("lobby created")
|
|
}
|
|
|
|
useEffect(() => {
|
|
console.log(user)
|
|
}, [user])
|
|
|
|
function launchMastermind(){
|
|
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
|
|
setPersonData(choosenPerson)
|
|
setPersonNetworkData(networkPerson)
|
|
setIndicesData(choosenIndices)
|
|
setIndicesData(choosenIndices)
|
|
navigate('/game?solo=true');
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
const handleLobbyCreated = (newRoom: any) => {
|
|
setRoom(newRoom);
|
|
};
|
|
|
|
// Ajouter l'event listener
|
|
socket.on('lobby created', handleLobbyCreated);
|
|
|
|
// Nettoyer l'event listener lors du démontage du composant
|
|
return () => {
|
|
socket.off('lobby created', handleLobbyCreated);
|
|
};
|
|
|
|
}, []); // Aucune dépendance ici
|
|
|
|
useEffect(() => {
|
|
if (room !== null) {
|
|
const nouvelleURL = `/lobby?room=${room}`;
|
|
navigate(nouvelleURL);
|
|
}
|
|
}, [room, navigate]);
|
|
|
|
return (
|
|
|
|
<div className="MainContainer">
|
|
<div className="leftContainer">
|
|
{/* <button className='ButtonNav'>
|
|
Param
|
|
</button> */}
|
|
<ButtonImgNav dest='/signup' img={Person} text="Gestion du compte"/>
|
|
</div>
|
|
<div className="MidContainer">
|
|
<div>
|
|
<h2>
|
|
{user && user.pseudo}
|
|
</h2>
|
|
<img src={user?.profilePicture}
|
|
height='300'
|
|
width='300'
|
|
alt="Person"
|
|
/>
|
|
</div>
|
|
<div className='buttonGroupVertical'>
|
|
<button onClick={launchMastermind} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
|
|
<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>
|
|
|
|
</div>
|
|
</div>
|
|
<div className='rightContainer'>
|
|
{user && (<ScoreBoard Player={user}/>)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Play; |