From 77e28ee88a7925a765e668db282a464c315ca2e9 Mon Sep 17 00:00:00 2001
From: CANCI0 <martinlol831@gmail.com>
Date: Tue, 12 Mar 2024 20:19:42 +0100
Subject: [PATCH 1/6] =?UTF-8?q?Se=20ha=20a=C3=B1adido=20pesta=C3=B1a=20de?=
 =?UTF-8?q?=20configuraci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/App.js                             |   2 +
 webapp/src/components/Nav/Nav.js              |   6 +-
 .../src/components/PreguntasConceCiudades.js  |  32 -----
 webapp/src/pages/Config/Config.css            |  14 ++
 webapp/src/pages/Config/Config.js             |  53 ++++++++
 .../pages/ConoceCiudades/ConoceCiudades.css   |  78 -----------
 .../pages/ConoceCiudades/ConoceCiudades.js    | 125 ------------------
 7 files changed, 74 insertions(+), 236 deletions(-)
 delete mode 100644 webapp/src/components/PreguntasConceCiudades.js
 create mode 100644 webapp/src/pages/Config/Config.css
 create mode 100644 webapp/src/pages/Config/Config.js
 delete mode 100644 webapp/src/pages/ConoceCiudades/ConoceCiudades.css
 delete mode 100644 webapp/src/pages/ConoceCiudades/ConoceCiudades.js

diff --git a/webapp/src/App.js b/webapp/src/App.js
index 0ef18680..dee6ef63 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -9,6 +9,7 @@ import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ProtectedRoute } from "./routers/ProtectedRoute.js";
 import Sobre from "./pages/Sobre/Sobre.js";
+import Config from "./pages/Config/Config.js";
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
           <Route path="/home/clasico" element={<Clasico />} />
           <Route path="/home/bateria" element={<Bateria />} />
           <Route path="/stats" element={<Stats />} />
+          <Route path="/config" element={<Config />} />
         </Route>
 
         {/* Ruta por defecto */}
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
index a44a6b74..e0bd9f0c 100644
--- a/webapp/src/components/Nav/Nav.js
+++ b/webapp/src/components/Nav/Nav.js
@@ -16,6 +16,10 @@ const Nav = () => {
     setIsDarkTheme((prev) => !prev);
   };
 
+  const handleConfig = () => {
+    navigate("/config");
+  }
+
   const Logout = () => {
     localStorage.removeItem("token");
     navigate("/");
@@ -40,7 +44,7 @@ const Nav = () => {
         <button className="profile">
           Perfil
         </button>
-        <button className="profile">
+        <button className="profile" onClick={() => handleConfig()}>
           Opciones
         </button>
         <button className="disconnect" onClick={() => Logout()}>
diff --git a/webapp/src/components/PreguntasConceCiudades.js b/webapp/src/components/PreguntasConceCiudades.js
deleted file mode 100644
index c690dd2b..00000000
--- a/webapp/src/components/PreguntasConceCiudades.js
+++ /dev/null
@@ -1,32 +0,0 @@
-const Preguntas = [
-    {
-        pregunta: "¿En que ciudad estamos: Estadio Santiago Bernabeu?",
-        respuestas: ["Londres", "París", "Madrid", "Roma"],
-        respuestaCorrecta: "Madrid",
-        imgsrc:"https://www.reasonwhy.es/media/cache/destacada/nuevo-bernabeu.jpg"
-    },
-    {
-        pregunta: "¿En que ciudad estamos: London eye?",
-        respuestas: ["Londres", "París", "Madrid", "Roma"],
-        respuestaCorrecta: "Londres",
-        imgsrc:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/London-Eye-2009.JPG/1200px-London-Eye-2009.JPG"
-    },
-    {
-        pregunta: "¿En que ciudad estamos: Coliseo?",
-        respuestas: ["Londres", "París", "Madrid", "Roma"],
-        respuestaCorrecta: "Roma",
-        imgsrc:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/London-Eye-2009.JPG/1200px-London-Eye-2009.JPG"
-
-    },
-    {
-        pregunta: "¿En que ciudad estamos: Torre eiffel?",
-        respuestas: ["Londres", "París", "Madrid", "Roma"],
-        respuestaCorrecta: "París",
-        imgsrc:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/London-Eye-2009.JPG/1200px-London-Eye-2009.JPG"
-
-    }
-    
-];
-  
-export default Preguntas;
-  
\ No newline at end of file
diff --git a/webapp/src/pages/Config/Config.css b/webapp/src/pages/Config/Config.css
new file mode 100644
index 00000000..a47a2921
--- /dev/null
+++ b/webapp/src/pages/Config/Config.css
@@ -0,0 +1,14 @@
+.topicCheckboxes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-items: end;
+}
+
+.topicCheckboxes label{
+    color: var(--text);
+}
+
+.topicCheckboxes input{
+    appearance: auto;
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/webapp/src/pages/Config/Config.js b/webapp/src/pages/Config/Config.js
new file mode 100644
index 00000000..be632a09
--- /dev/null
+++ b/webapp/src/pages/Config/Config.js
@@ -0,0 +1,53 @@
+import React from "react";
+import "./Config.css";
+import Nav from "../../components/Nav/Nav.js";
+import Footer from "../../components/Footer/Footer.js";
+
+const Config = () => {
+  const handleConfig = () => {
+    const checkboxes = document.querySelectorAll(
+      '.topicCheckboxes input[type="checkbox"]'
+    );
+    const selectedThemes = [];
+
+    checkboxes.forEach((checkbox) => {
+      if (checkbox.checked) {
+        selectedThemes.push(checkbox.id);
+      }
+    });
+
+    localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
+  };
+
+  return (
+    <>
+      <Nav />
+      <div class="configContainer">
+        <h2>Configuración</h2>
+        <div>
+          <h3>Temáticas de pregunta</h3>
+          <div class="topicCheckboxes">
+            <label for="paises"> Países</label>
+            <input id="paises" type="checkbox" />
+
+            <label for="literatura"> Literatura</label>
+            <input id="literatura" type="checkbox" />
+
+            <label for="cine"> Cine</label>
+            <input id="cine" type="checkbox" />
+
+            <label for="arte"> Arte</label>
+            <input id="arte" type="checkbox" />
+
+            <label for="programacion"> Programación</label>
+            <input id="programacion" type="checkbox" />
+          </div>
+        </div>
+        <button onClick={() => handleConfig()}>Aplicar cambios</button>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default Config;
diff --git a/webapp/src/pages/ConoceCiudades/ConoceCiudades.css b/webapp/src/pages/ConoceCiudades/ConoceCiudades.css
deleted file mode 100644
index 75c733e9..00000000
--- a/webapp/src/pages/ConoceCiudades/ConoceCiudades.css
+++ /dev/null
@@ -1,78 +0,0 @@
-body {
-    font-family: "Consolas", sans-serif;
-  }
-  
-  .menuContainer{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border: 3px solid #0F0F0F;
-    padding: 1rem;
-    -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
-    -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
-    box-shadow: 10px 10px 5px 0px rgba(0,255,192,1); 
-    border-radius: 1rem;
-  }
-  
-  .menuContainer > *{
-    text-align: center;
-    margin: 1rem 0;
-    
-  }
-  
-  .container h1 {
-    text-align: center;
-  }
-  
-  .questionContainer {
-    display: grid;
-    justify-content: center;
-    align-items: center;
-    border: 3px solid #0F0F0F;
-    border-radius: 1rem;
-    padding: 1rem;
-    -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
-    -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
-    box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
-  }
-  
-  .responsesContainer {
-    display: grid;
-    justify-content: center;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-    gap: 1rem;
-    margin-bottom: 1rem;
-  }
-  
-  button{
-    margin: 0.25rem;
-  }
-  
-  /* CSS */
-  .responsesContainer button {
-    appearance: none;
-    background-color: transparent;
-    border: 0.13rem solid #0f0f0f;
-    border-radius: 15px;
-    color: #0f0f0f;
-    padding: 1rem;
-    text-align: center;
-    text-decoration: none;
-    transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    width: 100%;
-    will-change: transform;
-    margin: 0;
-  }
-
-  img {
-    border-radius: 50%;
-    width: 250px;
-    height: 250px;
-}
-
-  
-  
\ No newline at end of file
diff --git a/webapp/src/pages/ConoceCiudades/ConoceCiudades.js b/webapp/src/pages/ConoceCiudades/ConoceCiudades.js
deleted file mode 100644
index dbaab41b..00000000
--- a/webapp/src/pages/ConoceCiudades/ConoceCiudades.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./Clasico.css";
-import Preguntas from "../../components/PreguntasConoceCiudades";
-import { useNavigate } from "react-router-dom";
-import Nav from '../../components/Nav/Nav.js';
-import { Link } from 'react-router-dom';
-import Footer from "../../components/Footer/Footer.js";
-
-const JuegoPreguntas = () => {
-  const [indicePregunta, setIndicePregunta] = useState(0);
-  const [puntuacion, setPuntuacion] = useState(0);
-  const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null);
-  const [tiempoRestante, setTiempoRestante] = useState(10);
-  const [juegoTerminado, setJuegoTerminado] = useState(false);
-  const [mostrarMenu, setMostrarMenu] = useState(false); // Estado para mostrar el menú al finalizar el juego
-  const preguntaActual = Preguntas[indicePregunta];
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (tiempoRestante === 0) {
-      setTimeout(() => {
-        handleSiguientePregunta();
-      }, 3000);
-    }
-    const timer = setInterval(() => {
-      setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1));
-    }, 1000);
-    return () => clearInterval(timer);
-  }, [tiempoRestante, indicePregunta]);
-
-  useEffect(() => {
-    if (juegoTerminado) {
-      setMostrarMenu(true);
-    }
-  }, [juegoTerminado]);
-
-  const handleRespuestaSeleccionada = (respuesta) => {
-    if (!juegoTerminado) {
-      setRespuestaSeleccionada(respuesta);
-    }
-  };
-
-  const estiloRespuesta = (respuesta) => {
-    if (juegoTerminado) {
-      if (respuesta === preguntaActual.respuestaCorrecta) {
-        return { backgroundColor: "green" };
-      } else if (respuesta === respuestaSeleccionada) {
-        return { backgroundColor: "red" };
-      }
-    } else {
-      if (respuesta === respuestaSeleccionada) {
-        return { backgroundColor: "#0F0F0F", color: "#F0F0F0" };
-      }
-    }
-    return {};
-  };
-
-  const handleSiguientePregunta = () => {
-    if (respuestaSeleccionada === preguntaActual.respuestaCorrecta) {
-      setPuntuacion(puntuacion + 1);
-    }
-    setRespuestaSeleccionada(null);
-    setTiempoRestante(10);
-    if (indicePregunta + 1 < Preguntas.length) {
-      setIndicePregunta(indicePregunta + 1);
-    } else {
-      setJuegoTerminado(true);
-    }
-  };
-
-  const handleRepetirJuego = () => {
-    // Reiniciar el estado para repetir el juego
-    setIndicePregunta(0);
-    setPuntuacion(0);
-    setRespuestaSeleccionada(null);
-    setTiempoRestante(10);
-    setJuegoTerminado(false);
-    setMostrarMenu(false);
-  };
-
-  if (mostrarMenu) {
-    return (
-      <>
-        <Nav />
-        <div className="menuContainer">
-          <h2>¡Juego terminado!</h2>
-          <p>
-            Tu puntuación: {puntuacion}/{Preguntas.length}
-          </p>
-          <button onClick={handleRepetirJuego}>Repetir Juego</button>
-          <Link to="/home">Volver al Menú Principal</Link>
-        </div>
-        <Footer />
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Nav />
-      <div className="questionContainer">
-        <h2>Pregunta {indicePregunta + 1}:</h2>
-        <p>{preguntaActual.pregunta}</p>
-        <img src={preguntaActual.imgsrc} alt="MDN" />
-        <div className="responsesContainer">
-          {preguntaActual.respuestas.map((respuesta, index) => (
-            <button
-              key={index}
-              onClick={() => handleRespuestaSeleccionada(respuesta)}
-              disabled={tiempoRestante === 0 || juegoTerminado}
-              style={estiloRespuesta(respuesta)}
-            >
-              {respuesta}
-            </button>
-          ))}
-        </div>
-        <div className="timer">Tiempo restante: {tiempoRestante}</div>
-        <div className="points">Puntuación: {puntuacion}</div>
-      </div>
-      <Footer />
-    </>
-  );
-};
-
-export default JuegoPreguntas;

From d6e8b562ba8f6038a6530bb4624432db288a686b Mon Sep 17 00:00:00 2001
From: CANCI0 <martinlol831@gmail.com>
Date: Tue, 12 Mar 2024 20:23:40 +0100
Subject: [PATCH 2/6] =?UTF-8?q?Ahora=20las=20tem=C3=A1ticas=20se=20guardan?=
 =?UTF-8?q?=20en=20el=20localStorage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Config/Config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/src/pages/Config/Config.js b/webapp/src/pages/Config/Config.js
index be632a09..da6081e4 100644
--- a/webapp/src/pages/Config/Config.js
+++ b/webapp/src/pages/Config/Config.js
@@ -17,6 +17,7 @@ const Config = () => {
     });
 
     localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
+    console.log(JSON.stringify(selectedThemes))
   };
 
   return (

From 54c79037a98eea4d33cb1c4afc65abd413130fa4 Mon Sep 17 00:00:00 2001
From: CANCI0 <martinlol831@gmail.com>
Date: Tue, 12 Mar 2024 20:34:37 +0100
Subject: [PATCH 3/6] =?UTF-8?q?A=C3=B1adido=20manejo=20de=20errores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Config/Config.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/webapp/src/pages/Config/Config.js b/webapp/src/pages/Config/Config.js
index da6081e4..39b4f560 100644
--- a/webapp/src/pages/Config/Config.js
+++ b/webapp/src/pages/Config/Config.js
@@ -1,9 +1,12 @@
-import React from "react";
+import { React, useState } from "react";
 import "./Config.css";
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 
 const Config = () => {
+  const [error, setError] = useState("");
+  const [info, setInfo] = useState("");
+
   const handleConfig = () => {
     const checkboxes = document.querySelectorAll(
       '.topicCheckboxes input[type="checkbox"]'
@@ -16,8 +19,15 @@ const Config = () => {
       }
     });
 
-    localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
-    console.log(JSON.stringify(selectedThemes))
+    if (selectedThemes.length === 0) {
+      alert("Debe haber al menos una temática seleccionada");
+
+    } else {
+      localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
+      console.log(JSON.stringify(selectedThemes));
+
+      alert("Cambios realizados satisfactoriamente");
+    }
   };
 
   return (

From ead52835da1e1efb772f94ca08eed83a9a5cffc8 Mon Sep 17 00:00:00 2001
From: CANCI0 <martinlol831@gmail.com>
Date: Tue, 12 Mar 2024 21:58:23 +0100
Subject: [PATCH 4/6] Inexplicablemente no funciona

---
 gatewayservice/gateway-service.js             |  15 +++
 questionservice/question-service.js           |  19 +++-
 .../questionGen/GeneratorChooser.js           | 103 ++++++++++--------
 webapp/src/index.js                           |   1 +
 webapp/src/pages/Clasico/Clasico.js           |  34 ++++--
 webapp/src/pages/Config/Config.css            |  10 +-
 webapp/src/pages/Config/Config.js             |  36 +++---
 7 files changed, 145 insertions(+), 73 deletions(-)

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 00ed1b42..0fcc3d1c 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -68,6 +68,21 @@ app.get("/questions", async (req, res) => {
   }
 });
 
+app.post("/questions", async (req, res) => {
+  try {
+    // Forward the question request to the question service
+    const questionResponse = await axios.post(
+      questionServiceUrl + "/questions",
+      { body: req.body }
+    );
+    res.json(questionResponse.data);
+  } catch (error) {
+    res
+      .status(error.response.status)
+      .json({ error: error.response.data.error });
+  }
+});
+
 app.get("/stats", async (req, res) => {
   try {
     // Forward the stats request to the stats service
diff --git a/questionservice/question-service.js b/questionservice/question-service.js
index 930daa19..7c9ac4d7 100644
--- a/questionservice/question-service.js
+++ b/questionservice/question-service.js
@@ -27,7 +27,6 @@ app.use((req, res, next) => {
 app.set("json spaces", 40);
 
 app.get("/questions", async (req, res) => {
-  console.log(req.query)
   if (req.query.n > MAX_QUESTIONS) {
     res
       .status(400)
@@ -43,6 +42,24 @@ app.get("/questions", async (req, res) => {
   }
 });
 
+app.post("/questions", async (req, res) => {
+  if (req.body.n > MAX_QUESTIONS) {
+    res
+      .status(400)
+      .json({ error: `El límite de preguntas son ${MAX_QUESTIONS}` });
+  }
+  try {
+    console.log(req.body.tematicas)
+    var temp = JSON.parse(req.body.tematicas)
+    var tematicas = temp.length !== 0 ? temp : ["paises", "literatura", "cine", "arte", "programacion"];
+    var n = req.body.n ? req.body.n : 10;
+    var data = gen.getQuestionsPost(tematicas, n);
+    res.json(data);
+  } catch (error) {
+    res.status(400).json({ error: error.message });
+  }
+});
+
 const server = app.listen(port, async () => {
   console.log(`Question Service listening at http://localhost:${port}`);
   gen.loadGenerators()
diff --git a/questionservice/questionGen/GeneratorChooser.js b/questionservice/questionGen/GeneratorChooser.js
index b2ccd5bc..3fe1c13a 100644
--- a/questionservice/questionGen/GeneratorChooser.js
+++ b/questionservice/questionGen/GeneratorChooser.js
@@ -1,53 +1,70 @@
-const GenericGenerator = require('./GenericGenerator')
-const fs = require('fs');
-
-class GeneratorChooser{
-    constructor(){
-        this.generators = new Map();
-        this.tematicas = [];
-        this.leer_json("./data/tematicas.json");
-    }
+const GenericGenerator = require("./GenericGenerator");
+const fs = require("fs");
+
+class GeneratorChooser {
+  constructor() {
+    this.generators = new Map();
+    this.tematicas = [];
+    this.leer_json("./data/tematicas.json");
+  }
 
-    leer_json(ruta){
-        const datos = fs.readFileSync(ruta);
-        var tematicas = JSON.parse(datos);
-
-        for(let i in tematicas){
-            var tematica = tematicas[i];
-            this.tematicas.push(i);
-            this.generators.set(i, 
-                new GenericGenerator(tematica.entity, tematica.props, tematica.types, tematica.preguntas)
-            );
-        }
+  leer_json(ruta) {
+    const datos = fs.readFileSync(ruta);
+    var tematicas = JSON.parse(datos);
+
+    for (let i in tematicas) {
+      var tematica = tematicas[i];
+      this.tematicas.push(i);
+      this.generators.set(
+        i,
+        new GenericGenerator(
+          tematica.entity,
+          tematica.props,
+          tematica.types,
+          tematica.preguntas
+        )
+      );
     }
+  }
 
-    getQuestions(tematica, n){
-        if(tematica === "all"){
-            var questions = [];
-            for(let i = 0 ; i < n ; i++){
-                let rand = Math.floor(Math.random() * this.tematicas.length)
-                let randTematica =this.tematicas[rand];
-                let q = this.generators.get(randTematica).generateRandomQuestions(1);
-                questions.push(q);
-            }
-            return questions.flat();
-        }else{
-            return this.generators.get(tematica).generateRandomQuestions(n);
-        }
+  getQuestions(tematica, n) {
+    if (tematica === "all") {
+      var questions = [];
+      for (let i = 0; i < n; i++) {
+        let rand = Math.floor(Math.random() * this.tematicas.length);
+        let randTematica = this.tematicas[rand];
+        let q = this.generators.get(randTematica).generateRandomQuestions(1);
+        questions.push(q);
+      }
+      return questions.flat();
+    } else {
+      return this.generators.get(tematica).generateRandomQuestions(n);
     }
+  }
 
-    async loadGenerators(){     
-        for(let i = 0 ; i < this.tematicas.length ; i++){
-            var gen = this.generators.get(this.tematicas[i]);
-            console.log("Cargando temática: " + this.tematicas[i]);
-            await gen.getData();
-            await this.#sleep(10000);
-        }
+  getQuestionsPost(tematicas, n) {
+    var questions = [];
+    for (let i = 0; i < n; i++) {
+      let rand = Math.floor(Math.random() * tematicas.length);
+      let randTematica = tematicas[rand];
+      let q = this.generators.get(randTematica).generateRandomQuestions(1);
+      questions.push(q);
     }
+    return questions.flat();
+  }
 
-    #sleep(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
+  async loadGenerators() {
+    for (let i = 0; i < this.tematicas.length; i++) {
+      var gen = this.generators.get(this.tematicas[i]);
+      console.log("Cargando temática: " + this.tematicas[i]);
+      await gen.getData();
+      await this.#sleep(10000);
     }
+  }
+
+  #sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
 }
 
-module.exports = GeneratorChooser;
\ No newline at end of file
+module.exports = GeneratorChooser;
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 5e0efe38..1d0cfe4e 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -7,6 +7,7 @@ import reportWebVitals from './reportWebVitals';
 var r = document.getElementById('root');
 r.setAttribute("data-theme", "light")
 const root = ReactDOM.createRoot(r);
+localStorage.setItem("selectedThemes", JSON.stringify(["paises", "literatura", "cine", "arte", "programacion"]));
 
 root.render(
   //<React.StrictMode>
diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index 75aac968..dac47e9b 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -5,8 +5,8 @@ import { Link, useNavigate } from "react-router-dom";
 import Footer from "../../components/Footer/Footer.js";
 
 const JuegoPreguntas = () => {
-  const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"
-  const SECS_PER_QUESTION = 10
+  const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
+  const SECS_PER_QUESTION = 10;
 
   const [isLoading, setIsLoading] = useState(true);
   const [indicePregunta, setIndicePregunta] = useState(0);
@@ -28,11 +28,17 @@ const JuegoPreguntas = () => {
   const [tiempoMedio, setTiempoMedio] = useState(0);
 
   useEffect(() => {
-    fetch(URL + "/questions?tematica=all&n=10")
+    fetch(URL + "/questions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ tematicas: localStorage.getItem("selectedThemes"), n: 10 }),
+    })
       .then((response) => {
         if (!response.ok) {
           navigate("/home?error=1");
-          return;
+          throw new Error("Error en la solicitud");
         }
         return response.json();
       })
@@ -45,16 +51,18 @@ const JuegoPreguntas = () => {
         console.error("Error al obtener las preguntas:", error);
         navigate("/home?error=1");
       });
-      // eslint-disable-next-line
-  },[]);
+    // eslint-disable-next-line
+  }, []);
 
   useEffect(() => {
-    setProgressPercent(tiempoRestante / SECS_PER_QUESTION * 100);
-  
+    setProgressPercent((tiempoRestante / SECS_PER_QUESTION) * 100);
+
     const timer = setInterval(() => {
-      setTiempoRestante(prevTiempo => (prevTiempo <= 0 ? 0 : prevTiempo - 0.01));
-    }, 10); 
-  
+      setTiempoRestante((prevTiempo) =>
+        prevTiempo <= 0 ? 0 : prevTiempo - 0.01
+      );
+    }, 10);
+
     return () => clearInterval(timer);
   }, [tiempoRestante]);
 
@@ -208,7 +216,9 @@ const JuegoPreguntas = () => {
               </button>
             ))}
           </div>
-          <div className="timer">Tiempo restante: {Math.floor(tiempoRestante)}</div>
+          <div className="timer">
+            Tiempo restante: {Math.floor(tiempoRestante)}
+          </div>
           <div className="points">Puntuación: {puntuacion}</div>
           <div className="progressBarContainer">
             <div
diff --git a/webapp/src/pages/Config/Config.css b/webapp/src/pages/Config/Config.css
index a47a2921..a130ca7c 100644
--- a/webapp/src/pages/Config/Config.css
+++ b/webapp/src/pages/Config/Config.css
@@ -8,7 +8,15 @@
     color: var(--text);
 }
 
-.topicCheckboxes input{
+.configContainer div{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-items: end;
+    align-items: center;
+}
+
+.configContainer input{
     appearance: auto;
     box-shadow: none;
+    width: 7rem;
 }
\ No newline at end of file
diff --git a/webapp/src/pages/Config/Config.js b/webapp/src/pages/Config/Config.js
index 39b4f560..5ed756e3 100644
--- a/webapp/src/pages/Config/Config.js
+++ b/webapp/src/pages/Config/Config.js
@@ -21,10 +21,8 @@ const Config = () => {
 
     if (selectedThemes.length === 0) {
       alert("Debe haber al menos una temática seleccionada");
-
     } else {
       localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
-      console.log(JSON.stringify(selectedThemes));
 
       alert("Cambios realizados satisfactoriamente");
     }
@@ -35,24 +33,30 @@ const Config = () => {
       <Nav />
       <div class="configContainer">
         <h2>Configuración</h2>
-        <div>
-          <h3>Temáticas de pregunta</h3>
-          <div class="topicCheckboxes">
-            <label for="paises"> Países</label>
-            <input id="paises" type="checkbox" />
+        <h3>Temáticas de pregunta</h3>
+        <div class="topicCheckboxes">
+          <label for="paises"> Países</label>
+          <input id="paises" type="checkbox" />
+
+          <label for="literatura"> Literatura</label>
+          <input id="literatura" type="checkbox" />
 
-            <label for="literatura"> Literatura</label>
-            <input id="literatura" type="checkbox" />
+          <label for="cine"> Cine</label>
+          <input id="cine" type="checkbox" />
 
-            <label for="cine"> Cine</label>
-            <input id="cine" type="checkbox" />
+          <label for="arte"> Arte</label>
+          <input id="arte" type="checkbox" />
 
-            <label for="arte"> Arte</label>
-            <input id="arte" type="checkbox" />
+          <label for="programacion"> Programación</label>
+          <input id="programacion" type="checkbox" />
+        </div>
+        <h3>Tiempo</h3>
+        <div>
+          <label for="paises"> Clásico (entre preguntas)</label>
+          <input id="paises" type="number" min="5" max="20" value="10"/>
 
-            <label for="programacion"> Programación</label>
-            <input id="programacion" type="checkbox" />
-          </div>
+          <label for="literatura"> Batería de sabios (Tiempo total)</label>
+          <input id="literatura" type="number" min="30" max="600" value="30"/>
         </div>
         <button onClick={() => handleConfig()}>Aplicar cambios</button>
       </div>

From 610b330cb7d55ec388ae6ba6514ac03363e06619 Mon Sep 17 00:00:00 2001
From: CANCI0 <martinlol831@gmail.com>
Date: Tue, 12 Mar 2024 23:11:13 +0100
Subject: [PATCH 5/6] =?UTF-8?q?A=C3=B1adidos=20par=C3=A1metros=20de=20tiem?=
 =?UTF-8?q?po=20a=20la=20configuraci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/pages/Clasico/Clasico.js |  4 +--
 webapp/src/pages/Config/Config.js   | 52 +++++++++++++++++++++--------
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index dac47e9b..b86e017d 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import "./Clasico.css";
 import Nav from "../../components/Nav/Nav.js";
 import { Link, useNavigate } from "react-router-dom";
@@ -6,7 +6,7 @@ import Footer from "../../components/Footer/Footer.js";
 
 const JuegoPreguntas = () => {
   const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
-  const SECS_PER_QUESTION = 10;
+  const SECS_PER_QUESTION = useMemo(localStorage.getItem("clasicoTime"));
 
   const [isLoading, setIsLoading] = useState(true);
   const [indicePregunta, setIndicePregunta] = useState(0);
diff --git a/webapp/src/pages/Config/Config.js b/webapp/src/pages/Config/Config.js
index 5ed756e3..af16e82b 100644
--- a/webapp/src/pages/Config/Config.js
+++ b/webapp/src/pages/Config/Config.js
@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import React, { useState } from "react";
 import "./Config.css";
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
@@ -6,6 +6,8 @@ import Footer from "../../components/Footer/Footer.js";
 const Config = () => {
   const [error, setError] = useState("");
   const [info, setInfo] = useState("");
+  const [clasicoTime, setClasicoTime] = useState(10);
+  const [bateriaTime, setBateriaTime] = useState(180);
 
   const handleConfig = () => {
     const checkboxes = document.querySelectorAll(
@@ -23,42 +25,66 @@ const Config = () => {
       alert("Debe haber al menos una temática seleccionada");
     } else {
       localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
+      localStorage.setItem("clasicoTime", clasicoTime);
+      localStorage.setItem("bateriaTime", bateriaTime);
 
       alert("Cambios realizados satisfactoriamente");
     }
   };
 
+  const handleClasicoChange = (event) => {
+    setClasicoTime(parseInt(event.target.value));
+  };
+
+  const handleBateriaChange = (event) => {
+    setBateriaTime(parseInt(event.target.value));
+  };
+
   return (
     <>
       <Nav />
-      <div class="configContainer">
+      <div className="configContainer">
         <h2>Configuración</h2>
         <h3>Temáticas de pregunta</h3>
-        <div class="topicCheckboxes">
-          <label for="paises"> Países</label>
+        <div className="topicCheckboxes">
+          <label htmlFor="paises"> Países</label>
           <input id="paises" type="checkbox" />
 
-          <label for="literatura"> Literatura</label>
+          <label htmlFor="literatura"> Literatura</label>
           <input id="literatura" type="checkbox" />
 
-          <label for="cine"> Cine</label>
+          <label htmlFor="cine"> Cine</label>
           <input id="cine" type="checkbox" />
 
-          <label for="arte"> Arte</label>
+          <label htmlFor="arte"> Arte</label>
           <input id="arte" type="checkbox" />
 
-          <label for="programacion"> Programación</label>
+          <label htmlFor="programacion"> Programación</label>
           <input id="programacion" type="checkbox" />
         </div>
         <h3>Tiempo</h3>
         <div>
-          <label for="paises"> Clásico (entre preguntas)</label>
-          <input id="paises" type="number" min="5" max="20" value="10"/>
+          <label htmlFor="clasico"> Clásico (entre preguntas)</label>
+          <input
+            id="clasico"
+            value={clasicoTime}
+            type="number"
+            min="5"
+            max="20"
+            onChange={handleClasicoChange}
+          />
 
-          <label for="literatura"> Batería de sabios (Tiempo total)</label>
-          <input id="literatura" type="number" min="30" max="600" value="30"/>
+          <label htmlFor="bateria"> Batería de sabios (Tiempo total)</label>
+          <input
+            id="bateria"
+            value={bateriaTime}
+            type="number"
+            min="30"
+            max="600"
+            onChange={handleBateriaChange}
+          />
         </div>
-        <button onClick={() => handleConfig()}>Aplicar cambios</button>
+        <button onClick={handleConfig}>Aplicar cambios</button>
       </div>
       <Footer />
     </>

From 82dc0b4e51fead5bb55d083eef5fe52d2eb12c4a Mon Sep 17 00:00:00 2001
From: CANCI0 <martinlol831@gmail.com>
Date: Wed, 13 Mar 2024 16:57:38 +0100
Subject: [PATCH 6/6] =?UTF-8?q?Ya=20funciona=20toda=20la=20configuraci?=
 =?UTF-8?q?=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 questionservice/question-service.js | 44 ++++++++++++++++++-----------
 webapp/src/index.js                 |  3 ++
 webapp/src/pages/Bateria/Bateria.js | 16 +++++++----
 webapp/src/pages/Clasico/Clasico.js |  4 +--
 webapp/src/pages/Config/Config.js   | 34 ++++++++++++++++++----
 5 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/questionservice/question-service.js b/questionservice/question-service.js
index 7c9ac4d7..95cfe8e7 100644
--- a/questionservice/question-service.js
+++ b/questionservice/question-service.js
@@ -1,6 +1,6 @@
 // user-service.js
 const express = require("express");
-const cors = require('cors');
+const cors = require("cors");
 const bodyParser = require("body-parser");
 const cron = require("node-cron");
 const GeneratorChooser = require("./questionGen/GeneratorChooser");
@@ -14,12 +14,19 @@ const MAX_QUESTIONS = 10000;
 
 // Middleware to parse JSON in request body
 app.use(bodyParser.json());
+// support encoded bodies
+app.use(bodyParser.urlencoded({ extended: true })); 
 
 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." });
+    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();
 });
@@ -43,17 +50,21 @@ app.get("/questions", async (req, res) => {
 });
 
 app.post("/questions", async (req, res) => {
-  if (req.body.n > MAX_QUESTIONS) {
+  const { tematicas, n } = req.body.body;
+  if (!n || n > MAX_QUESTIONS) {
     res
       .status(400)
       .json({ error: `El límite de preguntas son ${MAX_QUESTIONS}` });
+    return;
   }
   try {
-    console.log(req.body.tematicas)
-    var temp = JSON.parse(req.body.tematicas)
-    var tematicas = temp.length !== 0 ? temp : ["paises", "literatura", "cine", "arte", "programacion"];
-    var n = req.body.n ? req.body.n : 10;
-    var data = gen.getQuestionsPost(tematicas, n);
+    const temas = tematicas ? JSON.parse(tematicas) : [];
+    const tematicasValidas =
+      temas.length !== 0
+        ? temas
+        : ["paises", "literatura", "cine", "arte", "programacion"];
+    const cantidadPreguntas = parseInt(n, 10);
+    const data = gen.getQuestionsPost(tematicasValidas, cantidadPreguntas);
     res.json(data);
   } catch (error) {
     res.status(400).json({ error: error.message });
@@ -62,14 +73,15 @@ app.post("/questions", async (req, res) => {
 
 const server = app.listen(port, async () => {
   console.log(`Question Service listening at http://localhost:${port}`);
-  gen.loadGenerators()
-      .then(() => {
-        console.log("Generators loaded successfully!");
-        generadoresCargados = true;
-      })
-      .catch((error) => {
-        console.error("Error al cargar los generadores de preguntas:", error);
-      });
+  gen
+    .loadGenerators()
+    .then(() => {
+      console.log("Generators loaded successfully!");
+      generadoresCargados = true;
+    })
+    .catch((error) => {
+      console.error("Error al cargar los generadores de preguntas:", error);
+    });
 });
 
 cron.schedule("0 3 * * *", async () => {
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 1d0cfe4e..79736ad5 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -8,6 +8,9 @@ var r = document.getElementById('root');
 r.setAttribute("data-theme", "light")
 const root = ReactDOM.createRoot(r);
 localStorage.setItem("selectedThemes", JSON.stringify(["paises", "literatura", "cine", "arte", "programacion"]));
+localStorage.setItem("clasicoTime", 10);
+localStorage.setItem("clasicoPreguntas", 10);
+localStorage.setItem("bateriaTime", 180);
 
 root.render(
   //<React.StrictMode>
diff --git a/webapp/src/pages/Bateria/Bateria.js b/webapp/src/pages/Bateria/Bateria.js
index 5474b919..dba44bd2 100644
--- a/webapp/src/pages/Bateria/Bateria.js
+++ b/webapp/src/pages/Bateria/Bateria.js
@@ -6,7 +6,7 @@ import { Link, useNavigate } from "react-router-dom";
 
 const JuegoPreguntas = () => {
   const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"
-  const TIME = 180;
+  const TIME = localStorage.getItem("bateriaTime");
 
   const [isLoading, setIsLoading] = useState(true);
   const [indicePregunta, setIndicePregunta] = useState(0);
@@ -19,11 +19,17 @@ const JuegoPreguntas = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    fetch(URL + "/questions?tematica=all&n=9000")
+    fetch(URL + "/questions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ tematicas: localStorage.getItem("selectedThemes"), n: 9000 }),
+    })
       .then((response) => {
         if (!response.ok) {
           navigate("/home?error=1");
-          return;
+          throw new Error("Error en la solicitud");
         }
         return response.json();
       })
@@ -36,8 +42,8 @@ const JuegoPreguntas = () => {
         console.error("Error al obtener las preguntas:", error);
         navigate("/home?error=1");
       });
-      // eslint-disable-next-line
-  },[]);
+    // eslint-disable-next-line
+  }, []);
 
   useEffect(() => {
     if (tiempoRestante === 0) {
diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index b86e017d..74578981 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -6,7 +6,7 @@ import Footer from "../../components/Footer/Footer.js";
 
 const JuegoPreguntas = () => {
   const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
-  const SECS_PER_QUESTION = useMemo(localStorage.getItem("clasicoTime"));
+  const SECS_PER_QUESTION = useMemo(() => localStorage.getItem("clasicoTime"));
 
   const [isLoading, setIsLoading] = useState(true);
   const [indicePregunta, setIndicePregunta] = useState(0);
@@ -33,7 +33,7 @@ const JuegoPreguntas = () => {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ tematicas: localStorage.getItem("selectedThemes"), n: 10 }),
+      body: JSON.stringify({ tematicas: localStorage.getItem("selectedThemes"), n: localStorage.getItem("clasicoPreguntas") })
     })
       .then((response) => {
         if (!response.ok) {
diff --git a/webapp/src/pages/Config/Config.js b/webapp/src/pages/Config/Config.js
index af16e82b..80123765 100644
--- a/webapp/src/pages/Config/Config.js
+++ b/webapp/src/pages/Config/Config.js
@@ -6,8 +6,15 @@ import Footer from "../../components/Footer/Footer.js";
 const Config = () => {
   const [error, setError] = useState("");
   const [info, setInfo] = useState("");
-  const [clasicoTime, setClasicoTime] = useState(10);
-  const [bateriaTime, setBateriaTime] = useState(180);
+  const [clasicoTime, setClasicoTime] = useState(
+    localStorage.getItem("clasicoTime")
+  );
+  const [clasicoPreguntas, setClasicoPreguntas] = useState(
+    localStorage.getItem("clasicoPreguntas")
+  );
+  const [bateriaTime, setBateriaTime] = useState(
+    localStorage.getItem("bateriaTime")
+  );
 
   const handleConfig = () => {
     const checkboxes = document.querySelectorAll(
@@ -26,6 +33,7 @@ const Config = () => {
     } else {
       localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
       localStorage.setItem("clasicoTime", clasicoTime);
+      localStorage.setItem("clasicoPreguntas", clasicoPreguntas);
       localStorage.setItem("bateriaTime", bateriaTime);
 
       alert("Cambios realizados satisfactoriamente");
@@ -36,6 +44,10 @@ const Config = () => {
     setClasicoTime(parseInt(event.target.value));
   };
 
+  const handleClasicoPreguntas = (event) => {
+    setClasicoPreguntas(parseInt(event.target.value));
+  };
+
   const handleBateriaChange = (event) => {
     setBateriaTime(parseInt(event.target.value));
   };
@@ -62,9 +74,8 @@ const Config = () => {
           <label htmlFor="programacion"> Programación</label>
           <input id="programacion" type="checkbox" />
         </div>
-        <h3>Tiempo</h3>
         <div>
-          <label htmlFor="clasico"> Clásico (entre preguntas)</label>
+          <label htmlFor="clasico"> Tiempo entre preguntas (Clásico)</label>
           <input
             id="clasico"
             value={clasicoTime}
@@ -73,8 +84,19 @@ const Config = () => {
             max="20"
             onChange={handleClasicoChange}
           />
-
-          <label htmlFor="bateria"> Batería de sabios (Tiempo total)</label>
+          <label htmlFor="clasicoPreguntas">
+            {" "}
+            Número de preguntas (Clásico)
+          </label>
+          <input
+            id="clasicoPreguntas"
+            value={clasicoPreguntas}
+            type="number"
+            min="1"
+            max="1000"
+            onChange={handleClasicoPreguntas}
+          />
+          <label htmlFor="bateria">Tiempo total (Batería de sabios)</label>
           <input
             id="bateria"
             value={bateriaTime}