From 07c204c1e4eee43ffc455505485c557ca6e6066c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20Fern=C3=A1ndez?= <uo287998@uniovi.es>
Date: Sun, 10 Mar 2024 20:58:16 +0100
Subject: [PATCH] =?UTF-8?q?A=C3=B1adir=20finalizaci=C3=B3n=20del=20juego?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/QuizGame.css |  8 ++++++
 webapp/src/components/QuizGame.js  | 45 ++++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/QuizGame.css b/webapp/src/components/QuizGame.css
index 9ad1f174..7786454f 100644
--- a/webapp/src/components/QuizGame.css
+++ b/webapp/src/components/QuizGame.css
@@ -27,6 +27,14 @@
     font-size: 1.8em;
 }
 
+#qContainer h3 {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    color: #000000; 
+    font-size: 1.2em;
+}
+
 #rContainer {
     display: flex;
     flex-direction: row;
diff --git a/webapp/src/components/QuizGame.js b/webapp/src/components/QuizGame.js
index d1743592..034a61ac 100644
--- a/webapp/src/components/QuizGame.js
+++ b/webapp/src/components/QuizGame.js
@@ -15,6 +15,7 @@ const QuizGame = () => {
     const [answerSelected, setAnswerSelected] = useState(false);
     const [error, setError] = useState(null); 
     const [isToastVisible, setIsToastVisible] = useState(false);
+    const [isFinished, setIsFinished] = useState(false);
 
     //const image = 'https://img.freepik.com/vector-gratis/fondo-signos-interrogacion_78370-2896.jpg';
     const image1 = 'https://t3.ftcdn.net/jpg/05/60/26/26/360_F_560262652_SMg7tie3Zii0zFT9LYkKMqrNrPcU5owB.jpg';
@@ -63,6 +64,14 @@ const QuizGame = () => {
     
         setIsToastVisible(true);
         setQuestionsNumber(prev => prev + 1);
+
+        if (questionsNumber === numberOfQuestions) {
+            if (questionsNumber === numberOfQuestions) {
+                setTimeout(() => {
+                    setIsFinished(true);
+                }, 1000);
+            }
+        }
         
     };
 
@@ -84,7 +93,7 @@ const QuizGame = () => {
             {error ? (
                 <h2>{error}</h2> // Si hay un error, muestra el mensaje de error
             ):
-            currentQuestion !== null ? (
+            currentQuestion !== null && !isFinished ? (
                 <div id="qContainer">
                     <h2>{currentQuestion.question}</h2>
                     <div id="rContainer">
@@ -128,11 +137,35 @@ const QuizGame = () => {
                         </div>
                     </div>
                 </div>
-            ) : (
-                <p>Loading questions...</p>
-            )}
-        </div>
-    );
+            ) : isFinished ? (
+                <div id="qContainer"
+                    style={{
+                        backgroundColor: 'rgba(238, 14, 81, 1)',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}>
+                    <h2>¡Has terminado el juego!</h2>
+                    <h3>Has acertado {answeredQuestions.filter(question => question.isCorrect).length} preguntas de {numberOfQuestions + 1}</h3>
+                    <Button
+                        id='bJugar'
+                        onClick={() => window.location.reload()}
+                        style={{
+                            backgroundColor: 'white',
+                            color: 'black'
+                        }}
+                    >
+                        Volver a jugar
+                    </Button>
+                </div>
+            )
+                : (
+                    <p>Loading questions...</p>
+                )
+        }
+    </div>
+);
 };
 
 export default QuizGame;
\ No newline at end of file