Merge pull request #80 from Arquisoft/front_end_angel

Final screen

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"]
+          }
+        ]
+}

webapp/src/components/Game/Game.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Question from "./Question";
 import NextQuestion from "./NextQuestion";
 import AnswerPanel from "./AnswerPanel";
+import GameOver from "./GameOver";
 import { logout, getUsername } from "../../services/auth-service";
 import { Nav } from "../general/Nav";
 
@@ -10,23 +11,37 @@ export default function Game() {
     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"
     // Simular carga de nuevas preguntas
     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);
   };
 
   function getAnswersList(){
     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 (

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;