From 083b0a980a2a8468621e70cae78b11a191827221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20Mac=C3=ADas?= <uo289362@uniovi.es>
Date: Wed, 6 Mar 2024 15:49:56 +0100
Subject: [PATCH] The game stops after 10 questions and a final screen is shown
 with the score

---
 webapp/public/questions.json            | 44 +++++++++++++++++++++++++
 webapp/src/components/Game/Game.tsx     | 18 +++++++++-
 webapp/src/components/Game/GameOver.tsx | 19 +++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 webapp/public/questions.json
 create mode 100644 webapp/src/components/Game/GameOver.tsx

diff --git a/webapp/public/questions.json b/webapp/public/questions.json
new file mode 100644
index 0000000..23e2c8e
--- /dev/null
+++ b/webapp/public/questions.json
@@ -0,0 +1,44 @@
+{
+    "questions":[
+        {
+            "question": "What is the capital of France?",
+            "answers": ["London", "Paris", "Berlin", "Madrid"]
+          },
+          {
+            "question": "Who wrote 'Romeo and Juliet'?",
+            "answers": ["William Shakespeare", "Charles Dickens", "Jane Austen", "Emily Brontë"]
+          },
+          {
+            "question": "What is the largest mammal?",
+            "answers": ["Elephant", "Blue whale", "Giraffe", "Hippopotamus"]
+          },
+          {
+            "question": "Which planet is known as the Red Planet?",
+            "answers": ["Venus", "Mars", "Jupiter", "Saturn"]
+          },
+          {
+            "question": "What is the chemical symbol for water?",
+            "answers": ["H2O", "CO2", "NaCl", "O2"]
+          },
+          {
+            "question": "Who painted the Mona Lisa?",
+            "answers": ["Leonardo da Vinci", "Vincent van Gogh", "Pablo Picasso", "Michelangelo"]
+          },
+          {
+            "question": "Which is the largest ocean on Earth?",
+            "answers": ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"]
+          },
+          {
+            "question": "What is the main ingredient in guacamole?",
+            "answers": ["Tomato", "Onion", "Avocado", "Lime"]
+          },
+          {
+            "question": "Who is the creator of Facebook?",
+            "answers": ["Mark Zuckerberg", "Jeff Bezos", "Bill Gates", "Elon Musk"]
+          },
+          {
+            "question": "Which bird can fly backwards?",
+            "answers": ["Hummingbird", "Eagle", "Penguin", "Ostrich"]
+          }
+        ]
+}
\ No newline at end of file
diff --git a/webapp/src/components/Game/Game.tsx b/webapp/src/components/Game/Game.tsx
index 7694c34..a2dd7ca 100644
--- a/webapp/src/components/Game/Game.tsx
+++ b/webapp/src/components/Game/Game.tsx
@@ -2,12 +2,17 @@ import React, { useState } from "react";
 import Question from "./Question";
 import NextQuestion from "./NextQuestion";
 import AnswerPanel from "./AnswerPanel";
+import GameOver from "./GameOver";
+
 
 export default function Game() {
     const [answered, setAnswered] = useState(false);
     const [loading, setLoading] = useState(false); // Nuevo estado para controlar si se están cargando nuevas preguntas
     const [score, setScore] = useState(0);
     const [correctSelected, setCorrectSelected] = useState(false);
+    const [questionCount, setQuestionCount] = useState(0); // Estado para rastrear el número de preguntas mostradas
+
+
 
   const handleNextQuestion = () => {
     setLoading(true); // Establecer loading en true al hacer clic en "Next Question"
@@ -15,6 +20,7 @@ export default function Game() {
     setTimeout(() => {
       setLoading(false); // Establecer loading en false después de un tiempo de espera
       setAnswered(false); // Reiniciar el estado answered
+      setQuestionCount(questionCount + 1); // Incrementar el contador de preguntas
     }, 0);
   };
 
@@ -22,9 +28,19 @@ export default function Game() {
     cAnswer = 2;
     return ['a1', 'b2', 'c3', 'd4'];
   }
+
   var cAnswer=-1;
+   
+
+  var questions = ['q1', 'q2', 'q3', 'q4', 'q5', 'q6', 'q7', 'q8', 'q9', 'q10']
+
   function getQuestion(){
-    return 'Which is the correct answer??';
+    return questions[questionCount];
+  }
+
+
+  if (questionCount >= 10) {
+    return <GameOver score={score} />;
   }
 
   return (
diff --git a/webapp/src/components/Game/GameOver.tsx b/webapp/src/components/Game/GameOver.tsx
new file mode 100644
index 0000000..165d980
--- /dev/null
+++ b/webapp/src/components/Game/GameOver.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+type props = {
+    score : number;
+    };
+
+const GameOver = (props : props) =>{
+  
+    return (
+      <div className="flex flex-col items-center justify-center h-screen bg-purple-400 ">
+      <h1 className="text-6xl font-bold text-purple-950 h-1/4">Game Over</h1>
+      <div>
+        <p className="text-black text-3xl">Score: {props.score}</p>
+      </div>
+    </div>
+    );
+  }
+
+export default GameOver; 
\ No newline at end of file