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

finission de la page de règle de jeu avec un style et des informations dans toutes les parties 💄

Browse Source
pull/68/head
Pierre Ferreira 1 year ago
parent 7db1b94358
commit b058fea868
2 changed files with 193 additions and 47 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,23 +1,63 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); /** import de la font */
.infoPage{
margin: 30px;
margin: 20px 100px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
ul{
/** Sommaire */
.list {
max-width: 25%;
position: relative;
}
.list ul {
position: relative;
}
.list ul li {
position: relative;
left: 0;
color: #fce4ec;
list-style: none;
list-style-image: url('../res/icon/param.png');
margin: 4px 0;
border-left: 2px solid #0052B8;
transition: 0.5s;
cursor: pointer;
}
.list ul li:hover {
left: 10px;
}
.list ul li span {
position: relative;
padding: 8px;
padding-left: 12px;
display: inline-block;
z-index: 1;
transition: 0.5s;
color: #000;
}
.list ul li:hover span {
color: #fff;
}
.list ul li:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #0052B8;
transform: scaleX(0);
transform-origin: left;
transition: 0.5s;
}
.list ul li:hover:before {
transform: scaleX(1);
}
/* ul::before {
content: 'aaaaaaaaaa';
display: block;
height: 100px;
width: 100px;
background-image: url('../res/icon/param.png');
} */
li *{
color: darkblue;
font-size: larger;
font-weight: bold;
text-decoration: none;
@ -45,7 +85,6 @@ h2 em {
font-style: normal;
font-weight: 600;
}
.infoPage h2 {
font-size: 28px;
font-weight: 500;
@ -73,6 +112,20 @@ h2 em {
max-width: 255px;
background-color: #333;
}
h4{
font-size: 25px;
position: relative;
padding: 0;
margin: 20px 0 0 0;
font-family: "Raleway", sans-serif;
}
.h5title{
margin: 50px 0 0 0;
font-family: "Raleway", sans-serif;
}
/* .infoPage h2{
text-decoration: underline;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

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

@ -15,9 +15,17 @@ import AgeIndice from '../model/Indices/AgeIndice';
import ColorEdgesIndice from '../model/Indices/ColorEdgesIndice';
import IndiceList from '../Components/IndiceList';
import { HashLink as Link } from 'react-router-hash-link';
import { ColorToHexa } from '../model/EnumExtender';
import Color from '../model/Color';
function InfoPage() { //! cette page n'affiche que des informations et est suceptible de changer selon le context.
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' },
noir: { backgroundColor: ColorToHexa(Color.BLACK), width: '15px', height: '15px', display: 'inline-block', marginRight: '5px' },
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' },
};
return (
<div className='infoPage'>
@ -26,75 +34,160 @@ function InfoPage() { //! cette page n'affiche que des informations et est sucep
<div>
<h2> Introduction au jeu :</h2>
<p>
Bienvenue dans notre jeu de déduction captivant, où l'intrigue et l'esprit d'équipe se rejoignent dans une aventure palpitante ! Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.
Bienvenue dans notre jeu de déduction captivant, où l'intrigue et la malice se rejoignent dans une aventure palpitante ! Plongez-vous dans un monde de mystère et d'intrigue, où chaque interaction compte, et chaque indice vous rapproche de la vérité.
Imaginez un graphique complexe où chaque sommet représente une personne, chaque axe une relation, et chaque détail compte. Vous êtes plongé dans un défi stimulant pour découvrir qui parmi ces individus est le mystérieux tueur. Chaque joueur détient un indice crucial, et seul le partage stratégique de ces indices vous mènera à la résolution du mystère.
Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans le graphe ? Que l'enquête commence !
Explorez notre page de règles pour comprendre les subtilités du jeu, découvrez les indices qui peuvent vous guider, et élaborez des stratégies intelligentes pour identifier le coupable. Manipuler vos amis, afin d'être le premier à découvrir qui est le meurtrier ! Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans le graphe ? Que l'enquête commence !
</p>
</div>
<div>
<div className="list">
<h2> Sommaire </h2>
<ul>
<li><Link to="#composants-du-jeu">Composants du jeu</Link></li>
<li><Link to="#objectif-du-jeu">Objectif du jeu</Link></li>
<li><Link to="#deroulement-du-jeu">Déroulement du jeu</Link></li>
<li><Link to="#indice-possible">Indice possible</Link></li>
<li><Link to="#composants-du-jeu"><span>Composants du jeu</span></Link></li>
<li><Link to="#objectif-du-jeu"><span>Objectif du jeu</span></Link></li>
<li><Link to="#deroulement-du-jeu"><span>Déroulement du jeu</span></Link></li>
<li><Link to="#indice-possible"><span>Indice possible</span></Link></li>
</ul>
</div>
<section id="composants-du-jeu">
<h2>Composants du jeu :</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
<h4>
Pions
</h4>
<h6>Chaque joueur possèdera une couleur désigné, elle différencira les actions représenté par les pions suivant :</h6>
<ul>
<p>
<li><h5 className='h5title'>Les jetons <b>carrés</b> : 🟪🟦🟩🟨🟥🟫</h5></li>
Il designe une négation, le joueur ayant déposé celui ci indique que son indice innocente la personne designé.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet
</p>
</section>
<li><h5 className='h5title'>Les jetons <b>rond</b> : 🟣🔵🟢🟡🔴🟤</h5></li>
Il designe un "peut être", l'indice du joueur l'ayant déposé afirme qu'il est un suspect, cependant, il n'est pas forcément coupable.
Il y a un seul suspect ayant un jeton rond pour tout les joueurs de la partie, il s'agit du coupable !
</p>
</ul>
<h4>
<hr/>
Caractèristiques des personnages
</h4>
<h6>En plus de leur nom, les personnages sont représenté avec d'autres caractèristique :</h6>
<p>
{/*
//TODO mettre icon des ages apres le merge
*/}
<h5 className='h5title'>Les Âges :</h5>
Chaque personne possède un age pour les authentifiers, cet âge varie entre 0 et 60ans.
L'age est une caractèristique qui sera authentifier avec les indices par <Link to="#indice-possible">tranche d'âge</Link>.
<h5 className='h5title'>Les Couleurs de cheveux</h5>
Les personnages Possède aussi une couleur de cheveux, que l'on retrouve dans les couleurs suivante :
<ul>
<li>
<span style={styles.blanc}></span>
Blanc
</li>
<li>
<span style={styles.blond}></span>
Blond
</li>
<li>
<span style={styles.roux}></span>
Roux
</li>
<li>
<span style={styles.chatain}></span>
Chatain
</li>
<li>
<span style={styles.noir}></span>
Noir
</li>
</ul>
<h5 className='h5title'>Les Sports : ⚾🏀🎳⚽🎾</h5>
Les hobbies des personnages sont designé par 5 sports, respectivement :
<ul>
<li>⚾ Baseball</li>
<li>🏀 Basketball</li>
<li>🎳 Bowling</li>
<li>⚽ Football</li>
<li>🎾 Tennis</li>
</ul>
Parmis eux, ils auront entre 0 à 3 sports chacun, permettant de les identifiers avec les indices que vous possédez.
</p>
</section>
<hr/>
<section id="objectif-du-jeu">
<h2>Objectif du jeu :</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet
Bienvenue dans l'univers astucieux de notre jeu de déduction, où la tromperie et la ruse sont les clés du succès. Votre mission est de démêler le mystère qui se cache derrière chaque interaction du graphique complexe représentant les relations entre les individus.
</p>
<h4>
Manipulation Subtile :
</h4>
<p>
Le but ultime est de découvrir qui parmi les individus est le tueur, mais pas par une collaboration ouverte. Au contraire, vous utiliserez la manipulation subtile pour brouiller les pistes et détourner l'attention de vos adversaires. Posez des questions stratégiques, répondez avec malice, et plantez des indices trompeurs pour vous rapprocher du dénouement.
</p>
<h4>Jeu de Duperie :</h4>
<p>
Chaque tour offre l'opportunité de semer le doute parmi vos adversaires. Lorsqu'un joueur vous interroge, répondez en plaçant habilement un jeton carré pour indiquer que "selon votre indice, cette personne ne peut être le coupable" ou un jeton rond pour suggérer qu'elle reste dans la liste des suspects. Soyez prudent, car chaque geste peut être interprété, et la vérité est souvent cachée derrière une façade d'indices trompeurs.
</p>
<h4>Contre-manipulation :</h4>
<p>
Si un joueur place un jeton carré, le questionneur doit également jouer son jeu en posant un jeton carré de sa couleur sur un nœud du graphique. La contre-manipulation devient une arme redoutable pour détourner l'accusation et semer la confusion.
</p>
</section>
<h4>
Interface :
</h4>
</section>
<hr/>
<section id="deroulement-du-jeu">
<h2>Déroulement du jeu :</h2>
<h4>
<u>Étape 1</u> : Poser des Questions Stratégiques
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet
Chaque tour commence par un joueur posant une question à un autre joueur concernant une personne sur le graphe. Les réponses sont formulées en plaçant des jetons carrés ou ronds pour indiquer la certitude ou le doute quant à l'implication de cette personne.
</p>
<h4>
<u>Étape 2</u> : Contre-manipulation et Contre-questions
</h4>
<p>
Si un joueur place un jeton carré, le questionneur doit également poser un jeton carré sur un nœud du graphique. Les contre-questions sont un moyen de semer la confusion parmi les joueurs et de détourner l'accusation.
</p>
<h4>
<u>Étape 3</u> : Le "Guess" Final
</h4>
<p>
La partie atteint son apogée lorsqu'un joueur tente le "Guess" final, affirmant que telle personne est le tueur. Les autres joueurs peuvent alors contredire cette affirmation en plaçant leurs propres jetons carrés. Si aucune réfutation n'est faite, le joueur ayant fait le "Guess" remporte la partie, démontrant ainsi sa maîtrise dans l'art de la manipulation.
</p>
</section>
<hr/>
<section id="indice-possible">
<h2>Indice possible :</h2>
<h3>
<br/>
<h4>
Âge d'une personne :
</h3>
</h4>
<IndiceList instance={AgeIndice} lang='fr'/>
<h3>
<h4>
Couleur de cheveux d'une personne :
</h3>
</h4>
<IndiceList instance={ColorIndice} lang='fr'/>
<IndiceList instance={ColorEdgesIndice} lang='fr'/>
<hr/>
<h3>
<h4>
Sport d'une personne
</h3>
</h4>
<IndiceList instance={SportIndice} lang='fr'/>
<IndiceList instance={NbSportIndice} lang='fr'/>
<h3>
<h4>
Caractèristique des voisins
</h3>
</h4>
<IndiceList instance={EdgesIndice} lang='fr'/>
<IndiceList instance={NbEdgesIndice} lang='fr'/>
<hr/>

Write Preview
Loading…
Cancel
Save