pop up

MunschThomas · Mar 18, 2022 · 56cee12 · 56cee12
1 parent f4748da
commit 56cee12
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 21 deletions.
diff --git a/src/Screens/Game.css b/src/Screens/Game.css
@@ -211,9 +211,10 @@
   max-width: 560px;
   text-align: center;
   color: #fff;
-  border-radius: 7px;
+  border-radius: 20px;
   padding: 20px 20px;
   justify-content: space-evenly;
   align-items: center;
   background-color: var(--blue-500);
+  line-height: 1.5;
 }
diff --git a/src/Screens/Game.js b/src/Screens/Game.js
@@ -395,6 +395,7 @@ export default function Game3(props) {
             className="perso"
           />
           {pause && letter && (
+              <div className="overlay">
             <ModalQ
               pause={pause}
               dataQuestion={dataQuestion}
@@ -403,6 +404,7 @@ export default function Game3(props) {
               rightAnswer={rightAnswer}
               setRightAnswer={setRightAnswer}
             />
+            </div>
           )}
         </div>
         {gameOver && (
@@ -419,7 +421,7 @@ export default function Game3(props) {
             <div className="gameWin">
               <h2>
                 C'est Gagné !!! <br /> Bravo vous avez réunis les 6 lettres
-                d'Enedis et maitrisez desormais un fondamental !
+                d'Enedis et maitrisez désormais un fondamental !
               </h2>
               <Link to="../Profil">
                 <button>Retour</button>

diff --git a/src/components/ModalQ.css b/src/components/ModalQ.css
@@ -1,6 +1,7 @@
 .AnswerButton {
   min-width: 60%;
   display: flex;
+  gap:15px;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
@@ -14,60 +15,82 @@ button {
   cursor: pointer;
 }
 
-.AnswerButton button:hover {
+/* .AnswerButton button:hover {
   border: 5px solid green;
+} */
+
+.btnVert:hover{
+  border: 5px solid var(--green-500);
 }
-.wrapper {
+.btnRouge:hover{
+  border: 5px solid var(--red-500);
+};
+
+.wrapper2 {
   z-index: 5000000;
   position: absolute;
-  width: 100vw;
-  height: 100vh;
+ height: 100vh;
+ width: 100vw;
   background-color: #c8cbd0b0;
+  margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .wrapQuest {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index:5000000;
+  transform: translate(-50%,-50%);
   width: 50%;
   min-width: 350px;
-  max-width: 560px;
-  background-color: blue;
-  height: 400px;
+  max-width: 700px;
+  background-color: var(--neutral-700);
+  /* box-shadow: 1rem 1rem 1rem rgb(0 0 0 / 15%); */
+  /* opacity: .4; */
+  margin: 0 auto;
+  height: 550px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   padding: 20px;
   border-radius: 20px;
   text-align: center;
+  opacity: 1;
 }
 
 .modalLoose{
-  background: var(--red-200);
+  background: var(--red-400);
 }
 .buttonLoosee{
   background: var( --red-500);
 }
 .modalWin{
-  background: var(--green-200);
+  background: var(--green-600);
 }
 .buttonWin{
   background: var(--green-500);
 }
 
 
-.wrapQuest h1 {
+.wrapQuest h1, .wrapQuest h2 {
   color: white;
+  padding: 0 20px;
 }
 
+
+
 #correctAnswerReavel,
 #wrongAnswerReavel {
   visibility: hidden;
   color: white;
 }
 
 
+
 .visible {visibility: visible;}
 .hidden {visibility: hidden;}
 

diff --git a/src/components/ModalQ.js b/src/components/ModalQ.js
@@ -20,6 +20,7 @@ const ModalQ = ({
 
   const [answerCorrect, setAnswerCorrect] = useState(null)
   const [selectedAnswer, setSelectedAnswer] = useState(null)
+  const [clrModal,  setClrModal] = useState(0)
 
   const checkKey = (choice) => {
     focus1.current.focus()
@@ -28,9 +29,11 @@ const ModalQ = ({
       const showTrue = document.getElementById('correctAnswerReavel')
       showTrue.style.visibility = 'visible'
       setRightAnswer((rightAnswer) => rightAnswer + 1)
+      setClrModal(1)
     } else {
       const showTrue = document.getElementById('wrongAnswerReavel')
       showTrue.style.visibility = 'visible'
+      setClrModal(2)
     }
   }
   const launch = (e) => {
@@ -60,9 +63,11 @@ const ModalQ = ({
       const showTrue = document.getElementById('correctAnswerReavel')
       showTrue.style.visibility = 'visible'
       setRightAnswer((rightAnswer) => rightAnswer + 1)
+      setClrModal(1)
     } else {
       const showTrue = document.getElementById('wrongAnswerReavel')
       showTrue.style.visibility = 'visible'
+      setClrModal(2)
     }
   }
   useEffect(() => {
@@ -83,17 +88,18 @@ const ModalQ = ({
 
   return (
     <div
-      ref={focus1}
-      className='wrapper'
-      id='wrapper'
+
+      className='wrapper2'
+      // id='wrapper'
       tabIndex='0'
       onKeyDown={(e) => launch(e)}
     >
-      <div className='wrapQuest'>
-        <h1>{isAsked.question}</h1>
+      <div className={`wrapQuest ${(clrModal === 1)  ? "modalWin" : ((clrModal === 2) ? "modalLoose" : "")}`} >
+        <h1>Question :</h1>
+        <h2>{isAsked.question}</h2>
         <div className='AnswerButton'>
-          <button onClick={(e) => handleListItemClick(e)}>Vrai</button>
-          <button onClick={(e) => handleListItemClick(e)}>Faux</button>
+          <button className="btnVert" onClick={(e) => handleListItemClick(e)}>Vrai</button>
+          <button className="btnRouge" onClick={(e) => handleListItemClick(e)}>Faux</button>
         </div>
         <div className='ReavelCorrect'>
           <div id='correctAnswerReavel' className='AnswerReavel'>

diff --git a/src/index.css b/src/index.css
@@ -23,7 +23,9 @@
 
   --red-200: #ffe0e6;
   --red-300:#ffa3b4;
+  --red-400: #ff4768;
   --red-500: #e10028;
+  --red-600: #ad001f;
 
   --neutral-50: rgb(255, 255, 255);
   --neutral-75: rgb(250, 250, 250);
@@ -81,7 +83,7 @@ h5 {
 }
 
 @font-face {
-  font-family: 'Enedis';
+  font-family: 'Enedis-Bold';
   src: local('Enedis'), url('./assets/fonts/Enedis-Bold.ttf') format('truetype');
   font-weight: bold;
 }
@@ -142,7 +144,7 @@ code {
 }
 
 button{
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: public-sans, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
   "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif;
 }