modification navbar + info dynamique

testTodoS5^2
Baptiste MARCEL 1 year ago
parent 2f4e0fc300
commit cff2a9b085

@ -77,10 +77,10 @@ function App() {
<BrowserRouter>
{hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/" element={<Play />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<SignUp />} />
<Route path="/play" element={<Play/>} />
<Route path="/home" element={<Home/>} />
<Route path="/lobby" element={<Lobby/>} />
<Route path="/endgame" element={<EndGame/>} />
<Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale}/>}/>

@ -53,12 +53,15 @@ function AppNavbar({changeLocale}) {
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<NavDropdown title={<span style={{ color: theme.colors.text }}><FormattedMessage id="play" /></span>} className="navbar-title" id="basic-nav-dropdown">
<NavDropdown.Item href="play"><FormattedMessage id="play_solo" /> </NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="play"><FormattedMessage id="create_room" /> </NavDropdown.Item>
<NavDropdown.Item href="play"><FormattedMessage id="join" /> </NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/" style={{ color: theme.colors.text }}>
Jouer
</Nav.Link>
<Nav.Link href="/home" style={{ color: theme.colors.text }}>
Présentation
</Nav.Link>
<Nav.Link href="/info" style={{ color: theme.colors.text }}>
Info
</Nav.Link>
</Nav>
<div className='leftdiv'>
<Nav className="ml-auto navbar-title-dd">

@ -24,12 +24,13 @@ import Alert from 'react-bootstrap/Alert';
import MGlass from "../res/icon/magnifying-glass.png";
import Param from "../res/icon/param.png";
import Info from "../res/icon/infoGreen.png"; //todo changer la couleur de l'icon
import { useAuth } from '../Contexts/AuthContext';
import { useEffect } from 'react';
//@ts-ignore
function InfoPage({locale, changeLocale}) {
function InfoPage({locale, changeLocale}) {
const theme = useTheme();
const {isLoggedIn, login, user, setUserData, manager } = useAuth();
const styles = {
roux: { backgroundColor: ColorToHexa(Color.REDHEAD), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
blond: { backgroundColor: ColorToHexa(Color.BLOND), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
@ -37,6 +38,20 @@ function InfoPage({locale, changeLocale}) {
blanc: { backgroundColor: ColorToHexa(Color.WHITE), border: '1px solid #ccc', width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
chatain: { backgroundColor: ColorToHexa(Color.BROWN), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
};
useEffect(() => {
if (user == null){
manager.userService.fetchUserInformation().then(([user, loggedIn]) =>{
if (user!=null){
if (loggedIn){
login()
setUserData(user)
}
}
})
}
}, [isLoggedIn]);
return (
//! Il faudra possiblement faire une gestion des mode de jeu, pour modifier les regles en fonction de ce dernier.
<div className='infoPage'>

Loading…
Cancel
Save