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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save