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

ajout de la partie interface dans la page d'info 📝

Browse Source
pull/68/head
Pierre Ferreira 1 year ago
parent c083121d8d
commit 04c71e1b76
2 changed files with 226 additions and 141 deletions
Show Stats Download Patch File Download Diff File

10
cryptide_project/src/Pages/InfoPage.css
Unescape View File

@ -63,6 +63,16 @@ li *{
text-decoration: none;
}
.LiInterfaceDisplay{
display: flex;
justify-content: start;
margin-bottom: 20px;
}
.LiInterfaceDisplay p{
font-size: medium;
}
h2 {
position: relative;
padding: 0;

351
cryptide_project/src/Pages/InfoPage.tsx
Unescape View File

@ -17,9 +17,19 @@ import IndiceList from '../Components/IndiceList';
import { HashLink as Link } from 'react-router-hash-link';
import { ColorToHexa } from '../model/EnumExtender';
import Color from '../model/Color';
import "./InGame.css"
import {useTheme} from '../Style/ThemeContext'
import Check from "../res/icon/checkboxGreen.png";
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
//@ts-ignore
function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
function InfoPage({locale, changeLocale}) {
const theme = useTheme();
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' },
@ -28,7 +38,7 @@ function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des inf
chatain: { backgroundColor: ColorToHexa(Color.BROWN), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
};
return (
//! Il faudra possiblement faire une gestion des mode de jeu, pour modifier les regles en fonction de ce dernier.
<div className='infoPage'>
<h1><FormattedMessage id="informations"/></h1>
@ -49,155 +59,220 @@ function InfoPage({locale, changeLocale}) { //! cette page n'affiche que des inf
</ul>
</div>
<section id="composants-du-jeu">
<h2><FormattedMessage id="info.pions"/> :</h2>
<h4>
<FormattedMessage id="info.sommaire"/>
</h4>
<h6><FormattedMessage id="info.composant.text"/></h6>
<ul>
<p>
<li><h5 className='h5title'><FormattedMessage id="info.composant.carre.title"/> : 🟪🟦🟩🟨🟥🟫</h5></li>
<FormattedMessage id="info.composant.carre"/>
<li><h5 className='h5title'><FormattedMessage id="info.composant.rond.title"/> : 🟣🔵🟢🟡🔴🟤</h5></li>
<FormattedMessage id="info.composant.rond"/>
</p>
</ul>
<hr/>
<h4>
<FormattedMessage id="info.car_perso"/>
</h4>
<h6><FormattedMessage id="info.composant.textcar"/></h6>
<p>
{/*
//TODO mettre icon des ages apres le merge
*/}
<h5 className='h5title'><FormattedMessage id="info.composant.age.title"/> :</h5>
<FormattedMessage id="info.composant.age"/><Link to="#indice-possible"><FormattedMessage id="info.composant.age.link"/></Link>.
<h5 className='h5title'><FormattedMessage id="info.composant.hair_col.title"/> :</h5>
<FormattedMessage id="info.composant.hair_col"/>
<ul>
<li>
<span style={styles.blanc}></span>
<FormattedMessage id="hair.blanc"/>
</li>
<li>
<span style={styles.blond}></span>
<FormattedMessage id="hair.blond"/>
</li>
<li>
<span style={styles.roux}></span>
<FormattedMessage id="hair.roux"/>
</li>
<li>
<span style={styles.chatain}></span>
<FormattedMessage id="hair.chatain"/>
</li>
<li>
<span style={styles.noir}></span>
<FormattedMessage id="hair.noir"/>
</li>
</ul>
<h5 className='h5title'><FormattedMessage id="info.composant.sport.title"/> : ⚾🏀🎳⚽🎾</h5>
<FormattedMessage id="info.composant.sport"/>
<ul>
<li>⚾ <FormattedMessage id="info.composant.baseball"/></li>
<li>🏀 <FormattedMessage id="info.composant.basketball"/></li>
<li>🎳 <FormattedMessage id="info.composant.bowling"/></li>
<li>⚽ <FormattedMessage id="info.composant.football"/></li>
<li>🎾 <FormattedMessage id="info.composant.tennis"/></li>
</ul>
<FormattedMessage id="info.composant.sport.bis"/>
</p>
</section>
<hr/>
<section id="objectif-du-jeu">
<h2><FormattedMessage id="info.title.objectif"/> :</h2>
<p>
<FormattedMessage id="info.objectif.intro"/>
</p>
<section id="composants-du-jeu">
<h2><FormattedMessage id="info.pions"/> :</h2>
<h4>
<FormattedMessage id="info.objectif.t1"/> :
<FormattedMessage id="info.sommaire"/>
</h4>
<h6><FormattedMessage id="info.composant.text"/></h6>
<ul>
<p>
<FormattedMessage id="info.objectif.t1.text"/>
</p>
<h4><FormattedMessage id="info.objectif.t2"/> :</h4>
<p>
<FormattedMessage id="info.objectif.t2.text"/>
</p>
<h4><FormattedMessage id="info.objectif.t3"/> :</h4>
<p>
<FormattedMessage id="info.objectif.t3.text"/>
</p>
<li><h5 className='h5title'><FormattedMessage id="info.composant.carre.title"/> : 🟪🟦🟩🟨🟥🟫</h5></li>
<FormattedMessage id="info.composant.carre"/>
<h4>
Interface :
{/*
//TODO
*/}
</h4>
</section>
<hr/>
<section id="deroulement-du-jeu">
<h2><FormattedMessage id="info.title.deroulement"/> :</h2>
<h4>
<u><FormattedMessage id="etape"/> 1</u> : <FormattedMessage id="info.deroulement.e1"/>
</h4>
<p>
<FormattedMessage id="info.deroulement.e1.text"/>
</p>
<h4>
<u><FormattedMessage id="etape"/> 2</u> : <FormattedMessage id="info.deroulement.e2"/>
</h4>
<p>
<FormattedMessage id="info.deroulement.e2.text"/>
<li><h5 className='h5title'><FormattedMessage id="info.composant.rond.title"/> : 🟣🔵🟢🟡🔴🟤</h5></li>
<FormattedMessage id="info.composant.rond"/>
</p>
</ul>
<hr/>
<h4>
<u><FormattedMessage id="etape"/> 3</u> : <FormattedMessage id="info.deroulement.e3"/>
<FormattedMessage id="info.car_perso"/>
</h4>
<h6><FormattedMessage id="info.composant.textcar"/></h6>
<p>
<FormattedMessage id="info.deroulement.e3.text"/>
{/*
//TODO mettre icon des ages apres le merge
*/}
<h5 className='h5title'><FormattedMessage id="info.composant.age.title"/> :</h5>
<FormattedMessage id="info.composant.age"/><Link to="#indice-possible"><FormattedMessage id="info.composant.age.link"/></Link>.
<h5 className='h5title'><FormattedMessage id="info.composant.hair_col.title"/> :</h5>
<FormattedMessage id="info.composant.hair_col"/>
<ul>
<li>
<span style={styles.blanc}></span>
<FormattedMessage id="hair.blanc"/>
</li>
<li>
<span style={styles.blond}></span>
<FormattedMessage id="hair.blond"/>
</li>
<li>
<span style={styles.roux}></span>
<FormattedMessage id="hair.roux"/>
</li>
<li>
<span style={styles.chatain}></span>
<FormattedMessage id="hair.chatain"/>
</li>
<li>
<span style={styles.noir}></span>
<FormattedMessage id="hair.noir"/>
</li>
</ul>
<h5 className='h5title'><FormattedMessage id="info.composant.sport.title"/> : ⚾🏀🎳⚽🎾</h5>
<FormattedMessage id="info.composant.sport"/>
<ul>
<li>⚾ <FormattedMessage id="info.composant.baseball"/></li>
<li>🏀 <FormattedMessage id="info.composant.basketball"/></li>
<li>🎳 <FormattedMessage id="info.composant.bowling"/></li>
<li>⚽ <FormattedMessage id="info.composant.football"/></li>
<li>🎾 <FormattedMessage id="info.composant.tennis"/></li>
</ul>
<FormattedMessage id="info.composant.sport.bis"/>
</p>
</section>
<hr/>
<section id="indice-possible">
<h2><FormattedMessage id="info.title.indice_possible"/> :</h2>
<br/>
<h4>
<FormattedMessage id="info.indice-possible.age"/>
</h4>
<IndiceList instance={AgeIndice} lang={locale}/>
</section>
<hr/>
<section id="objectif-du-jeu">
<h2><FormattedMessage id="info.title.objectif"/> :</h2>
<p>
<FormattedMessage id="info.objectif.intro"/>
</p>
<h4>
<FormattedMessage id="info.objectif.t1"/> :
</h4>
<p>
<FormattedMessage id="info.objectif.t1.text"/>
</p>
<h4><FormattedMessage id="info.objectif.t2"/> :</h4>
<p>
<FormattedMessage id="info.objectif.t2.text"/>
</p>
<h4><FormattedMessage id="info.objectif.t3"/> :</h4>
<p>
<FormattedMessage id="info.objectif.t3.text"/>
</p>
<h4>
<FormattedMessage id="info.indice-possible.hair"/>
</h4>
<IndiceList instance={ColorIndice} lang={locale}/>
<IndiceList instance={ColorEdgesIndice} lang={locale}/>
<hr/>
<h4>
<FormattedMessage id="info.indice-possible.sport"/>
</h4>
<IndiceList instance={SportIndice} lang={locale}/>
<IndiceList instance={NbSportIndice} lang={locale}/>
<h4>
Interface :
</h4>
<h6> Pour chacune des parties, vous aurez certains éléments d'interface à disposition :</h6>
<ul>
<li>
<div className='LiInterfaceDisplay'>
<button className='button'
style={{
backgroundColor: theme.colors.tertiary,
borderColor: theme.colors.secondary,
margin:"0 20px"
}}>
<img src={Param} alt="paramètres" height='40'/>
</button>
<p>
Le bouton "<b>Paramètre</b>" permet l'affichage et la gestion de différent paramètres de la partie, comme par exemple le language, l'aide ... .
</p>
</div>
<Alert variant='danger'>
Attention, cette partie ne peut pas être complétée tant que tout les paramètres n'ont pas été choisis !
</Alert>
</li>
<li>
<div className='LiInterfaceDisplay'>
<button className='button'
style={{
backgroundColor: theme.colors.tertiary,
borderColor: theme.colors.secondary,
margin:"0 20px"
}}>
<img src={Info} alt="info" height="40"/>
</button>
<p>
Le bouton "<b>Information</b>" permet de rediriger vers la page de règle du jeu (celle ci).
{/*
//! mais est ce que nous devons rediriger sur les indices possibles ?
*/}
</p>
</div>
</li>
<li>
<div className='LiInterfaceDisplay'>
<button className='button'
style={{
backgroundColor: theme.colors.tertiary,
borderColor: theme.colors.secondary,
margin:"0 20px"
}}>
<img src={Check} alt="check" height="40"/>
</button>
<p>
Le bouton "<b>Fiche de déduction d'indice</b>" permet l'affichage de tableau dynamic permettant, avec le déroulé de la partie, de déduire quels indices sont les plus probables.
</p>
</div>
<Alert variant='danger'>
Attention, cette partie ne peut pas être complétée tant que la page et l'algorithme dédié ne sont pas fait !
</Alert>
</li>
<li>
<div className='LiInterfaceDisplay'>
<button className='button'
style={{
backgroundColor: theme.colors.tertiary,
borderColor: theme.colors.secondary,
margin:"0 20px"
}}>
<img src={MGlass} alt="indice" height="40"/>
</button>
<h4>
<FormattedMessage id="info.indice-possible.voisin"/>
</h4>
<IndiceList instance={EdgesIndice} lang={locale}/>
<IndiceList instance={NbEdgesIndice} lang={locale}/>
<hr/>
</section>
<p>
Le bouton "<b>Indice personnel</b>" est le plus important, en effet il permet d'afficher quel est votre indice secret. Vous seul le connaissais ! Il va falloir ruser pour tromper vos amis et le garder secret le plus longtemps possible !
</p>
</div>
</li>
</ul>
</section>
<hr/>
<section id="deroulement-du-jeu">
<h2><FormattedMessage id="info.title.deroulement"/> :</h2>
<h4>
<u><FormattedMessage id="etape"/> 1</u> : <FormattedMessage id="info.deroulement.e1"/>
</h4>
<p>
<FormattedMessage id="info.deroulement.e1.text"/>
</p>
<h4>
<u><FormattedMessage id="etape"/> 2</u> : <FormattedMessage id="info.deroulement.e2"/>
</h4>
<p>
<FormattedMessage id="info.deroulement.e2.text"/>
</p>
<h4>
<u><FormattedMessage id="etape"/> 3</u> : <FormattedMessage id="info.deroulement.e3"/>
</h4>
<p>
<FormattedMessage id="info.deroulement.e3.text"/>
</p>
</section>
<hr/>
<section id="indice-possible">
<h2><FormattedMessage id="info.title.indice_possible"/> :</h2>
<br/>
<h4>
<FormattedMessage id="info.indice-possible.age"/>
</h4>
<IndiceList instance={AgeIndice} lang={locale}/>
{/*
//! Topographie présente uniquement sur Cryptide
<h2>Topographie</h2>
<p>Legende des différents objet disponible sur la carte.</p>
*/}
<h4>
<FormattedMessage id="info.indice-possible.hair"/>
</h4>
<IndiceList instance={ColorIndice} lang={locale}/>
<IndiceList instance={ColorEdgesIndice} lang={locale}/>
<hr/>
<h4>
<FormattedMessage id="info.indice-possible.sport"/>
</h4>
<IndiceList instance={SportIndice} lang={locale}/>
<IndiceList instance={NbSportIndice} lang={locale}/>
<h4>
<FormattedMessage id="info.indice-possible.voisin"/>
</h4>
<IndiceList instance={EdgesIndice} lang={locale}/>
<IndiceList instance={NbEdgesIndice} lang={locale}/>
<hr/>
</section>
</div>
);
}

Write Preview
Loading…
Cancel
Save