Crypteam
/
Cryptid
4
0
Fork 0
Code Issues 10 Pull Requests Packages Projects 9 Releases Wiki Activity

Correctif session + affichage navbar quand connecté

Browse Source
pull/81/head
Baptiste MARCEL 1 year ago
parent a49cc06aa3
commit 59fc4422d3
7 changed files with 114 additions and 84 deletions
Show Stats Download Patch File Download Diff File

5
cryptide_project/src/App.tsx
Unescape View File

@ -19,6 +19,9 @@ import InfoPage from './Pages/InfoPage';
/* Component */
import AppNavbar from './Components/NavBar';
/* service */
import SessionService from './services/SessionService';
/* nav */
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
@ -48,7 +51,7 @@ function App() {
const [locale, setLocale] = useState('fr');
//@ts-ignore
const changeLocale = (newLocale) => {
const changeLocale = async (newLocale) => {
setLocale(newLocale);
};

26
cryptide_project/src/Components/LangDropDown.tsx
Unescape View File

@ -0,0 +1,26 @@
import React from 'react';
import { NavDropdown } from 'react-bootstrap';
import LanguageNavItem from './LangNavItem';
import { HiLanguage } from 'react-icons/hi2';
// @ts-ignore
const LangDropdown = ({ changeLocale }) => {
return (
<NavDropdown title={<HiLanguage/>} id="language-dropdown" align='end' drop='down-centered'>
<LanguageNavItem
countryCode="FR"
languageKey="languageSelector.french"
onClick={() => changeLocale('fr')}
/>
<LanguageNavItem
countryCode="GB"
languageKey="languageSelector.english"
onClick={() => changeLocale('en')}
/>
{/* Ajoutez d'autres langues selon vos besoins */}
</NavDropdown>
);
};
export default LangDropdown;

21
cryptide_project/src/Components/LangNavItem.tsx
Unescape View File

@ -0,0 +1,21 @@
import React from 'react';
import { NavDropdown } from 'react-bootstrap';
import { FormattedMessage } from 'react-intl';
import ReactCountryFlag from 'react-country-flag';
/*@ts-ignore*/
const LanguageNavItem = ({ countryCode, languageKey, onClick }) => {
return (
<NavDropdown.Item onClick={onClick}>
<ReactCountryFlag
className="custom-flag"
countryCode={countryCode}
svg
style={{ margin: 'auto 10px 3px auto' }}
/>
<FormattedMessage id={languageKey} />
</NavDropdown.Item>
);
};
export default LanguageNavItem;

12
cryptide_project/src/Components/NavBar.css
Unescape View File

@ -1,5 +1,4 @@
.custom-navbar{
.custom-navbar {
/* background-color: #85C9C2; */
color: #fff;
text-emphasis-color: #fff;
@ -15,23 +14,20 @@
border-radius: 15px;
}
.navbar-title-dd a {
color: #fff;
border-radius: 15;
border-radius: 15px;
padding: 10px 20px; /* Ajustez le rembourrage selon vos préférences */
text-decoration: none; /* Pour supprimer le soulignement des liens */
display: inline-block; /* Pour que les styles de fond s'appliquent aux liens */
margin-right: 10px; /* Pour ajouter de l'espace entre les boutons */
}
.centerdiv{
.centerdiv {
display: flex;
justify-content: center;
}
.leftdiv{
.leftdiv {
display: flex;
justify-content: start;
}

128
cryptide_project/src/Components/NavBar.tsx
Unescape View File

@ -9,17 +9,13 @@ import { FormattedMessage } from 'react-intl';
/* Icon */
import { BiDoorOpen, BiLogInCircle } from 'react-icons/bi';
import { BsFillPersonPlusFill } from 'react-icons/bs';
import { HiLanguage } from 'react-icons/hi2';
/* Images */
import logo from '../res/img/logo2_preview_rev_1.png';
/* Components */
import ReactCountryFlag from "react-country-flag"
/* Services */
import SessionService from '../services/SessionService';
import AuthService from '../services/AuthService';
import LanguageNavItem from './LangNavItem';
import LangDropDown from './LangDropDown';
/* Style */
import './NavBar.css';
@ -35,72 +31,60 @@ function AppNavbar({changeLocale}) {
return (
<Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
<Container>
<Navbar.Brand href="/">
<img src={logo} alt="logo" className="logo"/>
</Navbar.Brand>
<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>
<div className='leftdiv'>
<Nav className="ml-auto navbar-title-dd">
{/* Affichage dynamique selon état de connexion */}
{isLoggedIn ? (
<Nav.Link href="/play" onClick={logout} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
<BiDoorOpen />
<FormattedMessage id="log_out" />
</Nav.Link>
)
: (
<>
<Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
<BiLogInCircle />
<FormattedMessage id="log_in" />
</Nav.Link>
<Nav.Link href="/signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
<BsFillPersonPlusFill />
<FormattedMessage id="sign_up" />
</Nav.Link>
</>
)
}
</Nav>
<Nav className="me-auto">
<NavDropdown
title={<span><HiLanguage /></span>}
className="navbar-title" id="basic-nav-dropdown">
<NavDropdown.Item onClick={() => changeLocale('fr')}>
<ReactCountryFlag countryCode="FR"
svg
style={{
width: '30px',
height: '20px',
margin: 'auto 10px 3px auto',
}}/>
<FormattedMessage id="languageSelector.french"/>
</NavDropdown.Item>
<NavDropdown.Item onClick={() => changeLocale('en')}>
<ReactCountryFlag countryCode="GB"
svg
style={{
width: '30px',
height: '20px',
margin: 'auto 10px 3px auto',
}}/>
<FormattedMessage id="languageSelector.english"/>
</NavDropdown.Item>
</NavDropdown>
</Nav>
</div>
</Navbar.Collapse>
</Container>
<Container>
<Navbar.Brand href="/">
<img src={logo} alt="logo" className="logo" />
</Navbar.Brand>
<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>
<div className='leftdiv'>
<Nav className="ml-auto navbar-title-dd">
{isLoggedIn ? (
<NavDropdown
title={<span style={{ color: theme.colors.text }}>Menu <BiDoorOpen /></span>}
id="basic-nav-dropdown"
align="end"
drop='down-centered'
>
<NavDropdown.Item href="/profile">Profil</NavDropdown.Item>
<LanguageNavItem
countryCode="FR"
languageKey="languageSelector.french"
onClick={() => changeLocale('fr')}
/>
<LanguageNavItem
countryCode="GB"
languageKey="languageSelector.english"
onClick={() => changeLocale('en')}
/>
<NavDropdown.Divider />
<NavDropdown.Item onClick={logout}>Déconnexion</NavDropdown.Item>
</NavDropdown>
) : (
<>
<Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
<BiLogInCircle />
<FormattedMessage id="log_in" />
</Nav.Link>
<Nav.Link href="/signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
<BsFillPersonPlusFill />
<FormattedMessage id="sign_up" />
</Nav.Link>
<LangDropDown changeLocale={changeLocale}/>
</>
)}
</Nav>
</div>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

2
cryptide_project/src/Pages/Home.tsx
Unescape View File

@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import ButtonImgNav from '../Components/ButtonImgNav';
// @ts-ignore
function Home() {
const theme=useTheme();
const {isLoggedIn, login} = useAuth();

2
cryptide_project/src/Pages/Play.tsx
Unescape View File

@ -78,7 +78,7 @@ function Play() {
};
fetchUserInformation();
}, []);
}, [isLoggedIn]);
const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();

Write Preview
Loading…
Cancel
Save