Merge branch 'master' of https://codefirst.iut.uca.fr/git/Crypteam/Cryptid into histostyle
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Pierre Ferreira
1 year ago
commit
4213e7f7f4
@ -0,0 +1,306 @@
|
|||||||
|
import React, { useEffect, useRef, 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 */
|
||||||
|
/* Icon */
|
||||||
|
import { socket } from '../SocketConfig';
|
||||||
|
import { NavigationType, useNavigate, useNavigationType } from 'react-router-dom';
|
||||||
|
import GameCreator from '../model/GameCreator';
|
||||||
|
import { useGame } from '../Contexts/GameContext';
|
||||||
|
import ScoreBoard from '../Components/ScoreBoard';
|
||||||
|
|
||||||
|
import defaultImg from "../res/img/Person.png"
|
||||||
|
|
||||||
|
/* Types */
|
||||||
|
import User from '../model/User';
|
||||||
|
import EnigmeDuJourCreator from '../model/EnigmeDuJourCreator';
|
||||||
|
import Stub from '../model/Stub';
|
||||||
|
|
||||||
|
import SessionService from '../services/SessionService';
|
||||||
|
import { loadImageAsync } from '../ImageHelper';
|
||||||
|
import { Overlay, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
|
||||||
|
import Button from 'react-bootstrap/Button';
|
||||||
|
import ButtonGroup from 'react-bootstrap/ButtonGroup';
|
||||||
|
import Lobbies from './Lobbies';
|
||||||
|
|
||||||
|
|
||||||
|
let cptNavigation = 0
|
||||||
|
|
||||||
|
|
||||||
|
function NewPlay() {
|
||||||
|
let first = true
|
||||||
|
|
||||||
|
const theme=useTheme()
|
||||||
|
const {isLoggedIn, login, user, setUserData, manager } = useAuth();
|
||||||
|
const {setDailyEnigmeData} = useGame()
|
||||||
|
|
||||||
|
const target = useRef(null);
|
||||||
|
|
||||||
|
const navigationType = useNavigationType()
|
||||||
|
cptNavigation++
|
||||||
|
if (cptNavigation % 2 == 0){
|
||||||
|
if (navigationType.toString() == "POP"){
|
||||||
|
socket.emit("player quit")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUserInformation = async () => {
|
||||||
|
try {
|
||||||
|
const sessionData = await SessionService.getSession();
|
||||||
|
|
||||||
|
// Vérifie si il y a une session
|
||||||
|
if (sessionData.user) {
|
||||||
|
// Il y a une session on récupère les infos du joueur
|
||||||
|
const updatedPlayer: User = new User(socket.id, sessionData.user.pseudo, sessionData.user.profilePicture, {
|
||||||
|
nbGames: sessionData.user.soloStats.nbGames,
|
||||||
|
bestScore: sessionData.user.soloStats.bestScore,
|
||||||
|
avgNbTry: sessionData.user.soloStats.avgNbTry,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nbGames: sessionData.user.onlineStats.nbGames,
|
||||||
|
nbWins: sessionData.user.onlineStats.nbWins,
|
||||||
|
ratio: sessionData.user.onlineStats.ratio,
|
||||||
|
})
|
||||||
|
login();
|
||||||
|
setUserData(updatedPlayer);
|
||||||
|
} else {
|
||||||
|
// Pas de session on génère un guest random
|
||||||
|
const guestPlayer: User = new User(socket.id, 'Guest_' + Math.floor(Math.random() * 1000000), '',
|
||||||
|
{
|
||||||
|
nbGames: 0,
|
||||||
|
bestScore: 0,
|
||||||
|
avgNbTry: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
nbGames: 0,
|
||||||
|
nbWins: 0,
|
||||||
|
ratio: 0,
|
||||||
|
})
|
||||||
|
setUserData(guestPlayer);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchUserInformation();
|
||||||
|
}, [isLoggedIn]);
|
||||||
|
|
||||||
|
|
||||||
|
const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
if (user == null){
|
||||||
|
manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
|
||||||
|
if (user!=null){
|
||||||
|
if (loggedIn){
|
||||||
|
login()
|
||||||
|
setUserData(user)
|
||||||
|
socket.emit("join back game", user)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
loadImageAsync(defaultImg).then((blob) => {
|
||||||
|
user.profilePicture=blob
|
||||||
|
setUserData(user)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
socket.emit("join back game", user)
|
||||||
|
}
|
||||||
|
}, [isLoggedIn]);
|
||||||
|
|
||||||
|
const [goBackRoom, setGoBackRoom] = useState(-1)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
socket.on("join back game", (room) => {
|
||||||
|
setGoBackRoom(room)
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
const [room, setRoom] = useState(null);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
function createLobby(){
|
||||||
|
socket.emit("lobby created")
|
||||||
|
}
|
||||||
|
|
||||||
|
function launchMastermind(){
|
||||||
|
const [networkPerson, choosenPerson, choosenIndices] = GameCreator.CreateGame(3, 30)
|
||||||
|
setPersonData(choosenPerson)
|
||||||
|
setPersonNetworkData(networkPerson)
|
||||||
|
setIndicesData(choosenIndices)
|
||||||
|
setIndicesData(choosenIndices)
|
||||||
|
navigate('/game?solo=true&daily=false');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function launchEngimeJour(){
|
||||||
|
//* overlay
|
||||||
|
|
||||||
|
if (!showOverlay)setShowOverlay(true)
|
||||||
|
else setShowOverlay(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]);
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
navigate("/lobby?room=" + goBackRoom)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const [showOverlay, setShowOverlay] = useState(false);
|
||||||
|
const [selectedDifficulty, setSelectedDifficulty] = useState(null);
|
||||||
|
|
||||||
|
//@ts-ignore
|
||||||
|
const handleDifficultyChange = (value) => {
|
||||||
|
setSelectedDifficulty(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleStartHardGame = () => {
|
||||||
|
//* Mode difficile
|
||||||
|
|
||||||
|
//todo différencier les deux
|
||||||
|
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&easy=false');
|
||||||
|
setShowOverlay(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// if (goBackRoom != -1){
|
||||||
|
// var returnVisibility = "visible"
|
||||||
|
// }
|
||||||
|
// else{
|
||||||
|
// var returnVisibility = "hidden"
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const returnVisibility: Visibility = goBackRoom !== -1 ? "visible" : "hidden";
|
||||||
|
|
||||||
|
const returnVisibility: any= goBackRoom !== -1 ? "visible" : "hidden" ;
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className="MainContainer">
|
||||||
|
<div className="NewleftContainer">
|
||||||
|
|
||||||
|
{/* Menu de boutons */}
|
||||||
|
|
||||||
|
<div className='NewbuttonGroupVertical'>
|
||||||
|
<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 }) => (
|
||||||
|
<div
|
||||||
|
{...props}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.colors.secondary,
|
||||||
|
padding: '2px 10px',
|
||||||
|
borderRadius: 3,
|
||||||
|
...props.style,
|
||||||
|
}}>
|
||||||
|
|
||||||
|
<ButtonGroup aria-label="difficulty">
|
||||||
|
<Button onClick={handleStartEasyGame}>Facile</Button>
|
||||||
|
<Button onClick={handleStartHardGame}>Difficile</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Overlay>
|
||||||
|
|
||||||
|
<button onClick={createLobby} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
|
||||||
|
<button onClick= {() => navigate("/join")} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
|
||||||
|
{/* {goBackRoom != -1 && <button onClick={goBack} className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}>Retourner à la partie</button>} */}
|
||||||
|
<button onClick={goBack} className="ButtonNavRejoin" style={{ visibility:returnVisibility}}>Retourner à la partie</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lobbies */}
|
||||||
|
<div style={{border:'solid 1px lightgray', borderRadius:'15px', marginTop:'20px'}}>
|
||||||
|
<Lobbies/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className='NewrightContainer'>
|
||||||
|
<div style={{ border:'solid 2px lightgray', borderRadius:'15px', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column', padding:'20px', margin:'20px 0px'}}>
|
||||||
|
<h2>
|
||||||
|
{user && user.pseudo}
|
||||||
|
</h2>
|
||||||
|
<img src={user?.profilePicture}
|
||||||
|
height='150'
|
||||||
|
width='150'
|
||||||
|
alt="Person"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{user && (<ScoreBoard Player={user}/>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NewPlay;
|
||||||
@ -1,107 +0,0 @@
|
|||||||
.upperInfo{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
width: 30%;
|
|
||||||
|
|
||||||
border-radius: 0px 0px 30px 30px;
|
|
||||||
border: solid;
|
|
||||||
border-width: 2px 5px;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
font-size: 30px;
|
|
||||||
|
|
||||||
top: 20px;;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mainDiv{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.paramDiv{
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#graphDiv{
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bottom-container{
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
padding:20px;
|
|
||||||
border-radius: 20px 20px 0px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nbLaps{
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
left: 10px;
|
|
||||||
top :50px;
|
|
||||||
|
|
||||||
margin: 10px 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 15px;
|
|
||||||
border: solid 2px;
|
|
||||||
|
|
||||||
font-size: 30px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#endgamebutton{
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
bottom: 0;
|
|
||||||
right: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upperInfo,
|
|
||||||
#bottom-container,
|
|
||||||
.menuGame {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuGame{
|
|
||||||
display: flex;
|
|
||||||
align-items: space-between;
|
|
||||||
justify-content: end;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
top:30%;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuGame Button {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button{
|
|
||||||
/*background-color: #85C9C2;*/
|
|
||||||
|
|
||||||
border: solid 2px #85C9C2;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
width: 100px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
@ -1,236 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import Switch from "react-switch";
|
|
||||||
|
|
||||||
/* Style */
|
|
||||||
import "./SoloGame.css"
|
|
||||||
import {useTheme} from '../Style/ThemeContext'
|
|
||||||
/* Component */
|
|
||||||
import GraphContainer from '../Components/GraphContainer';
|
|
||||||
import ChoiceBar from '../Components/ChoiceBar';
|
|
||||||
import ButtonImgNav from '../Components/ButtonImgNav';
|
|
||||||
import PersonStatus from '../Components/PersonStatus';
|
|
||||||
import PlayerList from '../Components/PlayerList';
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
import Leave from "../res/icon/leave.png";
|
|
||||||
import Param from "../res/icon/param.png";
|
|
||||||
import Replay from "../res/icon/replay.png";
|
|
||||||
import Info from "../res/icon/infoGreen.png";
|
|
||||||
import Check from "../res/icon/checkboxGreen.png";
|
|
||||||
import Alpha from "../res/GreekLetters/alphaW.png";
|
|
||||||
|
|
||||||
/* nav */
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
/* Boostrap */
|
|
||||||
import Button from 'react-bootstrap/Button';
|
|
||||||
import Offcanvas from 'react-bootstrap/Offcanvas';
|
|
||||||
|
|
||||||
/* Model */
|
|
||||||
import Stub from '../model/Stub';
|
|
||||||
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 SoloGame = ({locale, changeLocale}) => {
|
|
||||||
|
|
||||||
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 ?
|
|
||||||
const [show, setShow] = useState(false);
|
|
||||||
const handleClose = () => setShow(false);
|
|
||||||
const handleShow = () => setShow(true);
|
|
||||||
|
|
||||||
// const [showP, setShowP] = useState(false);
|
|
||||||
// const handleCloseP = () => setShowP(false);
|
|
||||||
// const handleShowP = () => setShowP(true);
|
|
||||||
|
|
||||||
const [showS, setShowS] = useState(false);
|
|
||||||
const handleCloseS = () => setShowS(false);
|
|
||||||
const handleShowS = () => setShowS(true);
|
|
||||||
|
|
||||||
const handleChange = () => {
|
|
||||||
if (show){
|
|
||||||
handleClose()
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
handleShow()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// const handleChangeP = () => {
|
|
||||||
// if (showP){
|
|
||||||
// handleCloseP()
|
|
||||||
// }
|
|
||||||
// else {
|
|
||||||
// handleShowP()
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
|
|
||||||
const handleChangeS = () => {
|
|
||||||
if (showS){
|
|
||||||
handleCloseS()
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
handleShowS()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/* Windows open */
|
|
||||||
//@ts-ignore
|
|
||||||
const openInNewTab = (url) => { //! avec url ==> dangereux
|
|
||||||
window.open(url);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [SwitchEnabled, setSwitchEnabled] = useState(false)
|
|
||||||
const indices = Stub.GenerateIndice()
|
|
||||||
const { indice, players } = useGame();
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div id="mainDiv">
|
|
||||||
<TurnBar text="je suis dans la page solo"/>
|
|
||||||
<div id='graphDiv'>
|
|
||||||
{/* <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} FromSolo={true}/> */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='nbLaps' style={{
|
|
||||||
backgroundColor: theme.colors.primary,
|
|
||||||
borderColor: theme.colors.secondary
|
|
||||||
}}>
|
|
||||||
Tour : 5
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='paramDiv'>
|
|
||||||
<button className='button'
|
|
||||||
style={{
|
|
||||||
backgroundColor: theme.colors.primary,
|
|
||||||
borderColor: theme.colors.secondary
|
|
||||||
}}
|
|
||||||
onClick={handleChangeS}>
|
|
||||||
<img src={Param} alt="paramètres" height='40'/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='menuGame'>
|
|
||||||
<Link to='/info' target='_blank'>
|
|
||||||
<button className='button'
|
|
||||||
style={{
|
|
||||||
backgroundColor: theme.colors.primary,
|
|
||||||
borderColor: theme.colors.secondary
|
|
||||||
}}>
|
|
||||||
<img src={Info} alt="info" height="40"/>
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
{/* <button className='button' onClick={() => openInNewTab('http://localhost:3000/play')}> //! avec url =={'>'} dangereux
|
|
||||||
<img src={Check} alt="check" height="40"/>
|
|
||||||
</button> */}
|
|
||||||
|
|
||||||
<Link to='/info' target='_blank'>
|
|
||||||
<button className='button'
|
|
||||||
style={{
|
|
||||||
backgroundColor: theme.colors.primary,
|
|
||||||
borderColor: theme.colors.secondary
|
|
||||||
}}>
|
|
||||||
<img src={Check} alt="check" height="40"/>
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<button className='button' onClick={handleChange}
|
|
||||||
style={{
|
|
||||||
backgroundColor: theme.colors.primary,
|
|
||||||
borderColor: theme.colors.secondary
|
|
||||||
}}>
|
|
||||||
<img src={Alpha} alt="indice" height="40"/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* <Offcanvas show={showP}
|
|
||||||
onHide={handleCloseP}>
|
|
||||||
<Offcanvas.Header closeButton>
|
|
||||||
<Offcanvas.Title>Joueurs</Offcanvas.Title>
|
|
||||||
<h3>Il y a {players.length} joueurs</h3>
|
|
||||||
</Offcanvas.Header>
|
|
||||||
<Offcanvas.Body>
|
|
||||||
<PlayerList players={players} />
|
|
||||||
</Offcanvas.Body>
|
|
||||||
</Offcanvas> */}
|
|
||||||
|
|
||||||
<Offcanvas show={show}
|
|
||||||
onHide={handleClose}
|
|
||||||
placement='end'
|
|
||||||
scroll={true}
|
|
||||||
backdrop={false}
|
|
||||||
style={{ height: '20%', width: '25%', top: '60vh' }}>
|
|
||||||
<Offcanvas.Header closeButton>
|
|
||||||
<Offcanvas.Title>Indice</Offcanvas.Title>
|
|
||||||
</Offcanvas.Header>
|
|
||||||
<Offcanvas.Body>
|
|
||||||
{/* Possède les cheveux noir <u>ou</u> joue au basket */}
|
|
||||||
{indice?.ToString(locale)}
|
|
||||||
</Offcanvas.Body>
|
|
||||||
</Offcanvas>
|
|
||||||
|
|
||||||
{
|
|
||||||
//* canva pour les paramètres
|
|
||||||
}
|
|
||||||
<Offcanvas show={showS}
|
|
||||||
onHide={handleCloseS}
|
|
||||||
placement='top'
|
|
||||||
style={{height: '30%', width: '30%', left: '70%' }}>
|
|
||||||
<Offcanvas.Header closeButton>
|
|
||||||
<Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
|
|
||||||
</Offcanvas.Header>
|
|
||||||
<Offcanvas.Body>
|
|
||||||
<Nav className="me-auto">
|
|
||||||
<NavDropdown
|
|
||||||
title={<span><HiLanguage/> Language </span>}
|
|
||||||
className="navbar-title" id="basic-nav-dropdown">
|
|
||||||
<NavDropdown.Item onClick={() => changeLocale('fr')}>
|
|
||||||
<FormattedMessage id="languageSelector.french"/>
|
|
||||||
</NavDropdown.Item>
|
|
||||||
<NavDropdown.Item onClick={() => changeLocale('en')}>
|
|
||||||
<FormattedMessage id="languageSelector.english"/>
|
|
||||||
</NavDropdown.Item>
|
|
||||||
</NavDropdown>
|
|
||||||
</Nav>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<Switch checked={SwitchEnabled} onChange={setSwitchEnabled}/>
|
|
||||||
<p>Afficher les noeuds possibles</p>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
</Offcanvas.Body>
|
|
||||||
</Offcanvas>
|
|
||||||
<div id="bottom-container">
|
|
||||||
{showChoiceBar && <ChoiceBar />}
|
|
||||||
</div>
|
|
||||||
{/*
|
|
||||||
<div id="endgamebutton" > {/* tmp
|
|
||||||
<ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
|
|
||||||
</div>
|
|
||||||
*/}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export default SoloGame;
|
|
||||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue