Juego carga preguntas antes de empezar

* Genera y almacena un numero determinado de preguntas (10). Método crearPreguntas. * Botón 'Siguiente' no recarga la página, ahora muestra la siguiente pregunta de las almacenadas * Métodos para el funcionamiento correcto (descolorear, updateGame...)
Arquisoft · Mar 29, 2024 · 14c8d5f · 14c8d5f
1 parent 2dab321
commit 14c8d5f
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 32 deletions.
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -47,7 +47,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Home isLogged={isLogged}/>}></Route>
           <Route path="/game" 
-          element={<PrivateRoute element={<Juego isLogged={isLogged} username={username} />} />}
+          element={<PrivateRoute element={<Juego isLogged={isLogged} username={username} numPreguntas={10}/>} />}
           />
           <Route path="/login" element={<Login isLogged={isLogged} setIsLogged={setIsLogged}  username={username} setUsername={setUsername}/>} />
           <Route path="*" element={<NotFound />} />

diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js
@@ -6,7 +6,7 @@ import { Container } from '@mui/material';
 import Temporizador from '../Temporizador';
 import { jwtDecode } from 'jwt-decode';
 
-const Juego = ({isLogged, username}) => {
+const Juego = ({isLogged, username, numPreguntas}) => {
   //La pregunta (string)
   const [pregunta, setPregunta] = useState("")
   //La Respuesta correcta (string)
@@ -20,12 +20,28 @@ const Juego = ({isLogged, username}) => {
   //Para saber si el temporizador se ha parado al haber respondido una respuesta
   const [pausarTemporizador, setPausarTemporizador] = useState(false)
 
+  const [firstRender, setFirstRender] = useState(false);
+
+  const[ready, setReady] = useState(false)
+
+  const [numPreguntaActual, setNumPreguntaActual] = useState(0)
+
+  const [arPreg, setArPreg] = useState([])
+
+
   //Variables para la obtencion y modificacion de estadisticas del usuario
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
-  const [error, setError] = useState('');
-  const [password, setPassword] = useState('');
+
+  //Primer render para un comportamiento diferente
+  useEffect(() => {
+    if (!firstRender) {
+      crearPreguntas(10);
+      setFirstRender(true);
+    }
+  }, [firstRender])
 
 
+  //Control de las estadísticas
   const updateCorrectAnswers = async () => {
     try {
         const response = await axios.get(`${apiEndpoint}/updateCorrectAnswers?username=${username}`);
@@ -37,22 +53,42 @@ const Juego = ({isLogged, username}) => {
     }
   };
   ////
-
-
-  //Operacion asíncrona para cargar pregunta y respuestas en las variables desde el json
-  //Esta operación es llamada cuando pregunta esté vacia.
-  useEffect( () => {
-    const crear = async () => {
-      const response = await axios.get(`${apiEndpoint}/pregunta`);
-      setPregunta(response.data.question)
-      setResCorr(response.data.answerGood)
-      setResFalse(response.data.answers)
-    }
-    if(pregunta == ""){
-      setPregunta("CARGANDO...")
-      crear();
+
+  //Función que genera un numero de preguntas determinado
+  async function crearPreguntas(numPreguntas){
+    let tempArray=[];
+    while(numPreguntas>0){
+      console.log("contador:" + numPreguntas)
+      console.log("TAMAÑO ARRAY: " + tempArray.length)
+      try {
+        const response = await axios.get(`${apiEndpoint}/pregunta`);
+        console.log("pregunta: " + response.data.question)
+        console.log("buenarespuesta: " + response.data.answerGood)
+        console.log("malasrespuestas: " + response.data.answers)
+        tempArray.push(
+          { id: numPreguntas, pregunta: response.data.question, resCorr: response.data.answerGood, resFalse: response.data.answers}
+        )
+        arPreg.push(
+          { id: numPreguntas, pregunta: response.data.question, resCorr: response.data.answerGood, resFalse: response.data.answers}
+        )
+      }
+      catch (error) {
+        console.error('Error al actualizar la respuesta correcta:', error);
+        // Manejar el error de acuerdo a tus necesidades
+      }
+      numPreguntas--;
     }
-  }, [pregunta]);    
+    setReady(true)
+    updateGame();
+    setNumPreguntaActual(numPreguntaActual+1);
+  }
+
+  //Función que actualiza la pregunta que se muestra en pantalla
+  async function updateGame(){
+    setPregunta(arPreg[numPreguntaActual].pregunta)
+    setResCorr(arPreg[numPreguntaActual].resCorr)
+    setResFalse(arPreg[numPreguntaActual].resFalse)
+  }
 
 
   /**
@@ -77,15 +113,6 @@ const Juego = ({isLogged, username}) => {
 
   };
 
-  async function storeResult(res){
-    if(res){
-      const storeAcertado = await axios.post(`${apiEndpoint}/guardarAcierto`, {username, pregunta, resCorr});
-    }
-    else{
-      const storeAcertado = await axios.post(`${apiEndpoint}/guardarFallo`, {username, pregunta, resCorr});
-    }
-  }
-
   /*
   * Para cambiar el color de los botones al hacer click en uno de ellos
   * True para modo pulsar uno de ellos (acertar/fallar)
@@ -115,6 +142,7 @@ const Juego = ({isLogged, username}) => {
 
   }
 
+  //Función que cambia el color de un solo boton (acierto)
   function cambiarColorUno(respuesta, button){
     if(button.textContent.trim()==respuesta.trim()){
       if((button.textContent.trim() != resCorr)) {
@@ -124,8 +152,7 @@ const Juego = ({isLogged, username}) => {
     }
   }
 
-
-
+  //Funcion que cambia el color de todos los botones (fallo)
   function cambiarColorTodos(button){
     if(button.textContent.trim() == resCorr) {
       button.style.backgroundColor = "#05B92B";
@@ -135,11 +162,41 @@ const Juego = ({isLogged, username}) => {
           button.style.border = "6px solid #E14E4E";
     }
   } 
+
+  //Función que devuelve el color original a los botones (siguiente)
+  function descolorearTodos(){
+    const buttonContainer = document.querySelector('.button-container');
+    const buttons = buttonContainer.querySelectorAll('.button');
+    buttons.forEach((button) => {
+      //Desactivamos TODOS los botones
+      button.disabled=false; 
+      //Ponemos el boton de la respuesta correcta en verde
+        button.style.backgroundColor = "#FFFFFF";
+      })
+      buttonContainer.querySelector('#boton1').style.border = "6px solid #E14E4E";
+      buttonContainer.querySelector('#boton2').style.border = "6px solid #CBBA2A";
+      buttonContainer.querySelector('#boton3').style.border = "6px solid #05B92B";
+      buttonContainer.querySelector('#boton4').style.border = "6px solid #1948D9";
+  } 
+
+  //Función que finaliza la partida (redirigir/mostrar stats...)
+  function finishGame(){
+    //TODO
+  }
 
   //Funcion que se llama al hacer click en el boton Siguiente
   function clickSiguiente() {
+    if(numPreguntaActual==numPreguntas){
+      finishGame()
+      return
+    }
+    descolorearTodos()
     //Recarga la pagina para cambiar de pregunta
-    window.location.href = "game";
+    //window.location.href = "game";
+    setNumPreguntaActual(numPreguntaActual+1)
+    console.log(numPreguntaActual)
+    updateGame();
+
   }
 
 
@@ -153,7 +210,7 @@ const Juego = ({isLogged, username}) => {
           <button id="boton3" className="button" onClick={() => botonRespuesta(resFalse[0])}> {resFalse[0]}</button>
           <button id="boton4" className="button" onClick={() => botonRespuesta(resFalse[3])}> {resFalse[3]}</button>
         </div>
-        <button id="botonSiguiente" className="button" onClick={() =>clickSiguiente()} > SIGUIENTE</button>
+        {ready ? <button id="botonSiguiente" className="button" onClick={() =>clickSiguiente()} > SIGUIENTE</button> : <></>}
       </Container>
   );
 };