commit
0c069e9dc4
@ -1,45 +0,0 @@
|
||||
//import logo from './res/img/logo.svg';
|
||||
import React from 'react';
|
||||
|
||||
/* Page */
|
||||
import Home from './Pages/Home';
|
||||
import Jouer from './Pages/Jouer';
|
||||
import Login from './Pages/LoginForm.js';
|
||||
import SignUp from './Pages/SignUpForm.js';
|
||||
|
||||
/* Component */
|
||||
import AppNavbar from './Components/NavBar.js';
|
||||
|
||||
/* nav */
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
|
||||
/* Style */
|
||||
import './App.css';
|
||||
|
||||
/* bootstrap */
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
// <div className="App">
|
||||
// <header className="App-header">
|
||||
// <Home />
|
||||
// <img src={logo} className="App-logo" alt="logo" />
|
||||
// </header>
|
||||
// </div>
|
||||
|
||||
<BrowserRouter>
|
||||
<AppNavbar />
|
||||
<Routes>
|
||||
<Route exact path="/" element={<Home />} />
|
||||
<Route path="/jouer" element={<Jouer />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/signup" element={<SignUp />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -0,0 +1,70 @@
|
||||
//import logo from './res/img/logo.svg';
|
||||
import React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
|
||||
/* Page */
|
||||
import Home from './Pages/Home';
|
||||
import Jouer from './Pages/Jouer';
|
||||
import Login from './Pages/LoginForm';
|
||||
import SignUp from './Pages/SignUpForm';
|
||||
|
||||
/* Component */
|
||||
import AppNavbar from './Components/NavBar';
|
||||
|
||||
/* nav */
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
|
||||
/* Style */
|
||||
import './App.css';
|
||||
|
||||
/* bootstrap */
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
/* Internationnalisation */
|
||||
import messagesFr from './Translations/fr.json';
|
||||
import messagesEn from './Translations/en.json';
|
||||
|
||||
const messages = {
|
||||
fr: messagesFr,
|
||||
en: messagesEn,
|
||||
};
|
||||
|
||||
function App() {
|
||||
|
||||
//Language par defaut
|
||||
//const locale = 'fr';
|
||||
const [locale, setLocale] = useState('fr');
|
||||
|
||||
|
||||
// @ts-ignore
|
||||
const changeLocale = (newLocale) => {
|
||||
setLocale(newLocale);
|
||||
};
|
||||
|
||||
return (
|
||||
// <div className="App">
|
||||
// <header className="App-header">
|
||||
// <Home />
|
||||
// <img src={logo} className="App-logo" alt="logo" />
|
||||
// </header>
|
||||
// </div>
|
||||
|
||||
|
||||
// @ts-ignore
|
||||
<IntlProvider locale={locale} messages={messages[locale]}>
|
||||
<BrowserRouter>
|
||||
<AppNavbar changeLocale={changeLocale} />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/jouer" element={<Jouer />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/signup" element={<SignUp />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</IntlProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
|
||||
import { BiLogInCircle } from 'react-icons/bi';
|
||||
import { BsFillPersonPlusFill } from 'react-icons/bs'
|
||||
|
||||
import './NavBar.css';
|
||||
|
||||
function AppNavbar() {
|
||||
return (
|
||||
<Navbar expand="lg" className="custom-navbar">
|
||||
<Container>
|
||||
<Navbar.Brand href="/">
|
||||
<div>
|
||||
<h2>Cryptide</h2>
|
||||
<h6>by Crypteam</h6>
|
||||
</div>
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav className="me-auto">
|
||||
<NavDropdown title="Jouer" className="navbar-title" id="basic-nav-dropdown">
|
||||
<NavDropdown.Item href="jouer">Jouer solo</NavDropdown.Item>
|
||||
<NavDropdown.Divider />
|
||||
<NavDropdown.Item href="jouer">Créer une partie</NavDropdown.Item>
|
||||
<NavDropdown.Item href="jouer">Rejoindre</NavDropdown.Item>
|
||||
</NavDropdown>
|
||||
</Nav>
|
||||
<Nav className="ml-auto navbar-title-dd">
|
||||
<Nav.Link href="login" className='navbar-title-dd'> <BiLogInCircle/> Log in</Nav.Link>
|
||||
<Nav.Link href="signup" className='navbar-title-dd'> <BsFillPersonPlusFill/> Sign up</Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default AppNavbar;
|
||||
@ -0,0 +1,68 @@
|
||||
import React from 'react';
|
||||
|
||||
/* Naviagtion */
|
||||
import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
|
||||
|
||||
/* Lang */
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
/* Icon */
|
||||
import { BiLogInCircle } from 'react-icons/bi';
|
||||
import { BsFillPersonPlusFill } from 'react-icons/bs';
|
||||
import { HiLanguage } from 'react-icons/hi2';
|
||||
|
||||
/* Components */
|
||||
import './NavBar.css';
|
||||
|
||||
// @ts-ignore
|
||||
function AppNavbar({ changeLocale}) {
|
||||
return (
|
||||
<Navbar expand="lg" className="custom-navbar">
|
||||
<Container>
|
||||
<Navbar.Brand href="/">
|
||||
<div>
|
||||
<h2>Cryptide</h2>
|
||||
<h6>by Crypteam</h6>
|
||||
</div>
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav className="me-auto">
|
||||
<NavDropdown title={<span><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown">
|
||||
<NavDropdown.Item href="jouer"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
|
||||
<NavDropdown.Divider />
|
||||
<NavDropdown.Item href="jouer"><FormattedMessage id="create_room"/> </NavDropdown.Item>
|
||||
<NavDropdown.Item href="jouer"><FormattedMessage id="join"/> </NavDropdown.Item>
|
||||
</NavDropdown>
|
||||
</Nav>
|
||||
<div className='leftdiv'>
|
||||
<Nav className="ml-auto navbar-title-dd">
|
||||
<Nav.Link href="login" className='navbar-title-dd'>
|
||||
<BiLogInCircle/>
|
||||
<FormattedMessage id="log_in"/>
|
||||
</Nav.Link>
|
||||
<Nav.Link href="signup" className='navbar-title-dd'>
|
||||
<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')}>
|
||||
<FormattedMessage id="languageSelector.french"/>
|
||||
</NavDropdown.Item>
|
||||
<NavDropdown.Item onClick={() => changeLocale('en')}>
|
||||
<FormattedMessage id="languageSelector.english"/>
|
||||
</NavDropdown.Item>
|
||||
</NavDropdown>
|
||||
</Nav>
|
||||
</div>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default AppNavbar;
|
||||
@ -1,54 +0,0 @@
|
||||
import React from 'react';
|
||||
import './Home.css'; // Créez un fichier CSS pour styliser votre composant
|
||||
import '../App.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
|
||||
<div className="home-container">
|
||||
|
||||
<div className="left-section">
|
||||
|
||||
<div>
|
||||
<h2>L'HISTOIRE</h2>
|
||||
<p>
|
||||
"La cryptozoologie étudie les traces des monstres de légende : les cryptides. Yétis, Chupacabra, bête du gévaudan, Dahut, ect., sont des sujets très sérieux pour vous… Croisez les indices et soyez le premier à les découvrir!"
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>LE JEU</h2>
|
||||
<p>
|
||||
"Chaque joueur possède un indice sur le terrain où se trouve la créature. En recoupant vos informations, il ne peut y avoir qu'une case qui y corresponde. Mais le but est d'être le premier à la trouver. Interrogez vos collègues, et néanmoins concurrents. Ils ne peuvent vous répondre que par «non» ou «peut-être», avec beaucoup de logique et un brin d'audace, vous pourrez rentrer dans la légende!"
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>LES +</h2>
|
||||
<ul>
|
||||
<li>Une mécanique de déduction époustouflante.</li>
|
||||
<li>Une rejouabilité immense.</li>
|
||||
<li>Un thème surprenant et fort.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="vertical-divider"></div>
|
||||
|
||||
<div className="right-section">
|
||||
<h3>Temps :<t/> 45 minutes</h3>
|
||||
<h3>Joueurs :<t/> 3 à 5 joueurs</h3>
|
||||
<h3>Age :<t/> 10 ans et +</h3>
|
||||
<p>-------------------------------</p>
|
||||
<h3> <u>Créé par :</u><br/> Hal Duncan & Ruth Veevers</h3>
|
||||
<h3> <u>Illustré par :</u><br/> Kwanchai Moriya</h3>
|
||||
{/* <button>Jouer au jeu</button> */}
|
||||
<br/>
|
||||
<Link to="/jouer" className='button'>Aller à la page Page2</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import './Home.css'; // Créez un fichier CSS pour styliser votre composant
|
||||
import '../App.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
|
||||
<div className="home-container">
|
||||
|
||||
<div className="left-section">
|
||||
|
||||
<div>
|
||||
<h2><FormattedMessage id="home.histoire.title"/></h2>
|
||||
<p>
|
||||
<FormattedMessage id="home.histoire" />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2><FormattedMessage id="home.jeu.title"/></h2>
|
||||
<p>
|
||||
<FormattedMessage id="home.jeu" />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2><FormattedMessage id="home.plus.title"/></h2>
|
||||
<ul>
|
||||
<li><FormattedMessage id="home.plus.1"/></li>
|
||||
<li><FormattedMessage id="home.plus.2"/></li>
|
||||
<li><FormattedMessage id="home.plus.3"/></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="vertical-divider"></div>
|
||||
|
||||
<div className="right-section">
|
||||
<h3><FormattedMessage id="game.time"/></h3>
|
||||
<h3><FormattedMessage id="game.players"/></h3>
|
||||
<h3><FormattedMessage id="game.age"/></h3>
|
||||
<p>-------------------------------</p>
|
||||
<h3> <u><FormattedMessage id="game.createdBy"/></u><br/> Hal Duncan & Ruth Veevers</h3>
|
||||
<h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3>
|
||||
{/* <button>Jouer au jeu</button> */}
|
||||
<br/>
|
||||
<Link to="/jouer" className='button'> <FormattedMessage id="play"/> </Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@ -0,0 +1,30 @@
|
||||
{
|
||||
"languageSelector.french": "French",
|
||||
"languageSelector.english": "English",
|
||||
|
||||
"home.histoire.title": "HISTORY",
|
||||
"home.histoire": "Cryptozoology studies the traces of legendary monsters: cryptids. Yetis, Chupacabra, beast of the gevaudan, Dahut, etc. , are very serious topics for you… Cross the clues and be the first to discover them!",
|
||||
|
||||
"home.jeu.title": "THE GAME",
|
||||
"home.jeu": "Each player has a clue on the field where the creature is located. By cross-referencing your information, there can only be one box. But the goal is to be the first to find it. Ask your colleagues, and nevertheless competitors. They can only answer you by «no» or «maybe», with a lot of logic and a bit of audacity, you can enter the legend!",
|
||||
|
||||
"home.plus.title": "STRENGTH",
|
||||
"home.plus.1": "A mind-blowing deduction mechanism.",
|
||||
"home.plus.2": "An immense replayability.",
|
||||
"home.plus.3": "A surprising and strong theme.",
|
||||
|
||||
"game.time": "Time : 45 minutes",
|
||||
"game.players": "Players : 3 to 5 players",
|
||||
"game.age": "Age: 10 years and over",
|
||||
"game.createdBy": "Created By :",
|
||||
"game.illustratedBy": "Illustrated By :",
|
||||
|
||||
"log_in":" Log in ",
|
||||
"sign_up":" Sign up ",
|
||||
|
||||
"join" : "Join",
|
||||
"create_room" : "Create room",
|
||||
"play_solo" : "Single player",
|
||||
|
||||
"play" : "PLAY"
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
{
|
||||
"languageSelector.french": "Français",
|
||||
"languageSelector.english": "Anglais",
|
||||
|
||||
"home.histoire.title": "L'HISTOIRE",
|
||||
"home.histoire": "La cryptozoologie étudie les traces des monstres de légende : les cryptides. Yétis, Chupacabra, bête du gévaudan, Dahut, etc., sont des sujets très sérieux pour vous… Croisez les indices et soyez le premier à les découvrir!",
|
||||
|
||||
"home.jeu.title": "LE JEU",
|
||||
"home.jeu": "Chaque joueur possède un indice sur le terrain où se trouve la créature. En recoupant vos informations, il ne peut y avoir qu'une case qui y corresponde. Mais le but est d'être le premier à la trouver. Interrogez vos collègues, et néanmoins concurrents. Ils ne peuvent vous répondre que par «non» ou «peut-être», avec beaucoup de logique et un brin d'audace, vous pourrez rentrer dans la légende!",
|
||||
|
||||
"home.plus.title": "LES +",
|
||||
"home.plus.1": "Une mécanique de déduction époustouflante.",
|
||||
"home.plus.2": "Une rejouabilité immense.",
|
||||
"home.plus.3": "Un thème surprenant et fort.",
|
||||
|
||||
"game.time": "Temps : 45 minutes",
|
||||
"game.players": "Joueurs : 3 à 5 joueurs",
|
||||
"game.age": "Âge : 10 ans et +",
|
||||
"game.createdBy": "Créé par :",
|
||||
"game.illustratedBy": "Illustré par :",
|
||||
|
||||
"log_in":" Se connecter ",
|
||||
"sign_up":" S'inscrire ",
|
||||
|
||||
|
||||
"join" : "Rejoindre",
|
||||
"create_room" : "Créer une partie",
|
||||
"play_solo" : "Jouer seul",
|
||||
"play" : "JOUER"
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"moduleResolution": "node",
|
||||
"target": "es5",
|
||||
"lib": ["dom", "es2015"],
|
||||
"jsx": "react",
|
||||
"strict": true,
|
||||
|
||||
},
|
||||
}
|
||||
// "noImplicitAny": false,
|
||||
Loading…
Reference in new issue