From 8d547734d8c4a49b060e578e899038731cb0c1dc Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Fri, 8 Dec 2023 15:02:37 +0100
Subject: [PATCH] =?UTF-8?q?changement=20du=20style=20suite=20=C3=A0=20la?=
 =?UTF-8?q?=20s=C3=A9lection=20d'un=20joueur=20:lipstick:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Components/PersonStatus.tsx           |  4 +-
 .../src/Components/TutorialGraph.tsx          |  2 +-
 cryptide_project/src/Pages/Tutorial.tsx       | 38 +++++++++++++------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/cryptide_project/src/Components/PersonStatus.tsx b/cryptide_project/src/Components/PersonStatus.tsx
index e4ea131..f204c5e 100644
--- a/cryptide_project/src/Components/PersonStatus.tsx
+++ b/cryptide_project/src/Components/PersonStatus.tsx
@@ -70,7 +70,7 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
         onTouch();
     };
     const circleStyle: React.CSSProperties = {
-        backgroundColor: touchedPlayer == index && showCircle ? 'gold' : positionToColor(index), // Changement de la couleur en fonction de la condition
+        backgroundColor: positionToColor(index), // Changement de la couleur en fonction de la condition
         borderRadius: buffer,
         width: '80px',
         height: '80px',
@@ -83,7 +83,7 @@ const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person,
 
     const circleStyleInt: React.CSSProperties = {
 
-        backgroundColor:'white',
+        backgroundColor: touchedPlayer == index && showCircle ? 'lightblue' : 'white',
         borderRadius: buffer,
         width: '70px',
         height: '70px',
diff --git a/cryptide_project/src/Components/TutorialGraph.tsx b/cryptide_project/src/Components/TutorialGraph.tsx
index 5b19079..c9190d1 100644
--- a/cryptide_project/src/Components/TutorialGraph.tsx
+++ b/cryptide_project/src/Components/TutorialGraph.tsx
@@ -147,7 +147,7 @@ const TutorialGraph: React.FC<TutorialGraphProps> = ({showLast, setNetwork, setP
                 direction: 'LR', // LR (Left to Right) ou autre selon votre préférence
                 sortMethod: 'hubsize'
             },
-            randomSeed: 2
+            randomSeed: 3
         },
         physics: {
             enabled: true,
diff --git a/cryptide_project/src/Pages/Tutorial.tsx b/cryptide_project/src/Pages/Tutorial.tsx
index f779dd6..402c4f1 100644
--- a/cryptide_project/src/Pages/Tutorial.tsx
+++ b/cryptide_project/src/Pages/Tutorial.tsx
@@ -416,7 +416,9 @@ const Tutorial = ({locale, changeLocale}) => {
           show={showM}
           onHide={handleCloseM}
           backdrop="static"
-          keyboard={false}>
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
           <Modal.Header>
             <Modal.Title>Tutoriel</Modal.Title>
           </Modal.Header>
@@ -471,7 +473,14 @@ const Tutorial = ({locale, changeLocale}) => {
                   <Card.Text>
                     Ici, les réponses sont représentées par des <b>carrés</b> et des <b>ronds</b> de couleurs différentes. Les couleurs permettent de différencier les joueurs.
                     <br />
-                    Un <u>carré</u> signifie un <b>NON</b> et un rond signifie un <b>OUI</b> (son indice permet d'identifier cette personne).
+                    <ul>
+                      <li>
+                        Un <u>carré</u> signifie un <b>NON</b>.
+                      </li>
+                      <li>
+                        Un rond signifie un <b>OUI</b> 
+                      </li>
+                    </ul>
                     <br />
                     Par exemple, ici, l'indice du joueur <u>Vert</u> permet d'innocenter Logan.
                     <br/>Eleanor peut être suspectée par l'indice du joueur <u>Jaune</u>.
@@ -557,14 +566,16 @@ const Tutorial = ({locale, changeLocale}) => {
           show={showTuto2}
           onHide={handleCloseTuto2}
           backdrop="static"
-          keyboard={false}>
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
           <Modal.Header>
             <Modal.Title>Tutoriel</Modal.Title>
           </Modal.Header>
           <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
 
               <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
-                <Card.Img variant="top" src={step1} style={{width:'100%', height:'auto'}}/>
+                <Card.Img variant="top" src={step1} style={{width:'300px', height:'auto'}}/>
                 <Card.Body>
                   <Card.Title>Premier pas</Card.Title>
                   <Card.Text>
@@ -585,14 +596,16 @@ const Tutorial = ({locale, changeLocale}) => {
           show={showTuto21}
           onHide={handleCloseTuto21}
           backdrop="static"
-          keyboard={false}>
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
           <Modal.Header>
             <Modal.Title>Tutoriel</Modal.Title>
           </Modal.Header>
           <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
             {step === 0 && (
               <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
-                <Card.Img variant="top" src={step2} style={{width:'100%', height:'auto'}}/>
+                <Card.Img variant="top" src={step2} style={{width:'300px', height:'auto'}}/>
                 <Card.Body>
                   <Card.Title>Votre premier tour</Card.Title>
                   <Card.Text>
@@ -606,7 +619,7 @@ const Tutorial = ({locale, changeLocale}) => {
 
             {step === 1 && (
               <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
-                <Card.Img variant="top" src={step3} style={{width:'300px', height:'auto'}}/>
+                <Card.Img variant="top" src={step3} style={{width:'200px', height:'auto'}}/>
                 <Card.Body>
                   <Card.Title>Premier tour des autres joueurs</Card.Title>
                   <Card.Text>
@@ -652,7 +665,9 @@ const Tutorial = ({locale, changeLocale}) => {
           show={showTuto22}
           onHide={handleCloseTuto22}
           backdrop="static"
-          keyboard={false}>
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
           <Modal.Header>
             <Modal.Title>Tutoriel</Modal.Title>
           </Modal.Header>
@@ -677,18 +692,19 @@ const Tutorial = ({locale, changeLocale}) => {
           </Modal.Footer>
         </Modal>
 
-
         <Modal
           show={showTuto3}
           onHide={handleCloseTuto3}
           backdrop="static"
-          keyboard={false}>
+          keyboard={false}
+          size="lg"
+          style={{ maxHeight: '100vh'}}>
           <Modal.Header>
             <Modal.Title>End Game</Modal.Title>
           </Modal.Header>
           <Modal.Body style={{ display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
               <Card style={{ width: '100%', display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
-                <Card.Img variant="top" src={step6} style={{width:'300px', height:'auto'}}/>
+                <Card.Img variant="top" src={step6} style={{width:'250px', height:'auto'}}/>
                 <Card.Body>
                   <Card.Title>La fin du jeu</Card.Title>
                   <Card.Text>