Cancio fixes

questionservice/data/tematicas.json

@@ -12,7 +12,6 @@
             "¿Cuál es la esperanza de vida media de ",
             "¿En qué fecha se fundó ",
             "¿Cuál es la forma de gobierno de ",
-
             "¿Cuál es el lema de "
         ]
     },

questionservice/question-service.js

@@ -7,6 +7,7 @@ const GeneratorChooser = require("./questionGen/GeneratorChooser");
 
 const app = express();
 const port = 8003;
+let generadoresCargados = false;
 
 const gen = new GeneratorChooser();
 const MAX_QUESTIONS = 10000;
@@ -16,6 +17,13 @@ app.use(bodyParser.json());
 
 app.use(cors());
 
+app.use((req, res, next) => {
+  if (!generadoresCargados) {
+    return res.status(500).json({ error: "Los generadores de preguntas aún no se han cargado. Por favor, inténtalo de nuevo más tarde." });
+  }
+  next();
+});
+
 app.set("json spaces", 40);
 
 app.get("/questions", async (req, res) => {
@@ -39,6 +47,7 @@ const server = app.listen(port, async () => {
   gen.loadGenerators()
       .then(() => {
         console.log("Generators loaded successfully!");
+        generadoresCargados = true;
       })
       .catch((error) => {
         console.error("Error al cargar los generadores de preguntas:", error);

questionservice/questionGen/GenericGenerator.js

@@ -128,7 +128,9 @@ class GenericGenerator {
       if (
         !questionObj.respuestas.includes(prop) &&
         !entidad[propiedadPregunta].includes(prop) &&
-        !/^Q\d+/.test(prop)
+        !/^Q\d+/.test(prop) &&
+        entidadLabel != prop
+
       ) {
         questionObj.respuestas.push(prop);
       }
@@ -143,8 +145,8 @@ class GenericGenerator {
         questionObj.correcta = this.#dateFormatter(questionObj.correcta);
         break;
       case "num":
-        questionObj.respuestas = questionObj.respuestas.map(x => Math.floor(x));
-        questionObj.correcta = Math.floor(questionObj.correcta);
+        questionObj.respuestas = questionObj.respuestas.map(x => parseFloat(x).toFixed(2));
+        questionObj.correcta = parseFloat(questionObj.correcta).toFixed(2);
         break;
       default:
         break;

webapp/src/pages/Bateria/Bateria.css

@@ -68,3 +68,20 @@ button{
   margin: 0;
 }
 
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 50px;
+  padding: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #25b09b;
+  --_m: 
+    conic-gradient(#0000 10%,#000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+          mask: var(--_m);
+  -webkit-mask-composite: source-out;
+          mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {to{transform: rotate(1turn)}}

webapp/src/pages/Bateria/Bateria.js

@@ -1,19 +1,44 @@
 import React, { useState, useEffect } from "react";
 import "./Bateria.css";
-import Nav from '../../components/Nav/Nav.js';
+import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
-import Preguntas from "./prueba";
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
 
 const JuegoPreguntas = () => {
+  const [isLoading, setIsLoading] = useState(true);
   const [indicePregunta, setIndicePregunta] = useState(0);
   const [puntuacion, setPuntuacion] = useState(0);
-  const [tiempoRestante, setTiempoRestante] = useState(10);
+  const [tiempoRestante, setTiempoRestante] = useState(180);
   const [juegoTerminado, setJuegoTerminado] = useState(false);
-  const preguntaActual = Preguntas[indicePregunta];
+  const [preguntas, setPreguntas] = useState([]);
+  const [preguntaActual, setPreguntaActual] = useState("");
+  const navigate = useNavigate();
 
   useEffect(() => {
-    if (tiempoRestante === 0 || indicePregunta === Preguntas.length) {
+    fetch("http://localhost:8003/questions?tematica=all&n=10000")
+      .then((response) => {
+        if (!response.ok) {
+          navigate("/home?error=1");
+          return;
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setPreguntas(data);
+        setPreguntaActual(data[0]);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error al obtener las preguntas:", error);
+        navigate("/home?error=1");
+      });
+  }, []);
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+    if (tiempoRestante === 0 || indicePregunta === preguntas.length) {
       setJuegoTerminado(true);
     }
     const timer = setInterval(() => {
@@ -26,7 +51,7 @@ const JuegoPreguntas = () => {
     if (respuesta === preguntaActual.correcta) {
       setPuntuacion(puntuacion + 1);
     }
-    if (indicePregunta + 1 < Preguntas.length) {
+    if (indicePregunta + 1 < preguntas.length) {
       setIndicePregunta(indicePregunta + 1);
     } else {
       setJuegoTerminado(true);
@@ -47,9 +72,7 @@ const JuegoPreguntas = () => {
         <Nav />
         <div className="menuContainer">
           <h2>¡Juego terminado!</h2>
-          <p>
-            Tu puntuación: {puntuacion}
-          </p>
+          <p>Tu puntuación: {puntuacion}</p>
           <button onClick={handleRepetirJuego}>Repetir Juego</button>
           <Link to="/home">Volver al Menú Principal</Link>
         </div>
@@ -61,24 +84,28 @@ const JuegoPreguntas = () => {
   return (
     <>
       <Nav />
-      <div className="questionContainer">
-            <h2>Pregunta {indicePregunta + 1}:</h2>
-            <p>{preguntaActual.pregunta}</p>
-            <div className="responsesContainer">
-              {preguntaActual.respuestas.map((respuesta, index) => (
-                <button
-                  key={index}
-                  onClick={() => {
-                    handleSiguientePregunta(respuesta);
-                  }}
-                >
-                  {respuesta}
-                </button>
-              ))}
-            </div>
-            <div className="timer">Tiempo restante: {tiempoRestante}</div>
-            <div className="points">Puntuación: {puntuacion}</div>
+      {isLoading ? (
+        <span class="loader"></span>
+      ) : (
+        <div className="questionContainer">
+          <h2>Pregunta {indicePregunta + 1}:</h2>
+          <p>{preguntaActual.pregunta}</p>
+          <div className="responsesContainer">
+            {preguntaActual.respuestas.map((respuesta, index) => (
+              <button
+                key={index}
+                onClick={() => {
+                  handleSiguientePregunta(respuesta);
+                }}
+              >
+                {respuesta}
+              </button>
+            ))}
           </div>
+          <div className="timer">Tiempo restante: {tiempoRestante}</div>
+          <div className="points">Puntuación: {puntuacion}</div>
+        </div>
+      )}
       <Footer />
     </>
   );