Develop

docs/src/06_runtime_view.adoc

@@ -37,28 +37,26 @@ See https://docs.arc42.org/section-6/[Runtime View] in the arc42 documentation.
 
 ****
 
-=== <Runtime Scenario 1>
+=== <Inicio Sesión>
 
+A la hora de iniciar sesión nuestra web App nos mostrara la ventana pidiendo los datos necesarios para poder empezar a jugar.
 
-* _<insert runtime diagram or textual description of the scenario>_
-* _<insert description of the notable aspects of the interactions between the
-building block instances depicted in this diagram.>_
+Se le piden una serie de datos al usuario que serán posteriormente pasados a Firebase encargado de controlar estos datos y devolverle a web App el ID del usuario que estará jugando.
 
-It is possible to use a sequence diagram:
+Una vez que el usario a completado el inicio de sesión de forma exitosa nuestra web App pasará a mostrar la pantalla de inicio del juego.
 
-[plantuml,"Sequence diagram",png]
-----
-actor Alice
-actor Bob
-database Pod as "Bob's Pod"
-Alice -> Bob: Authentication Request
-Bob --> Alice: Authentication Response
-Alice  --> Pod: Store route
-Alice -> Bob: Another authentication Request
-Alice <-- Bob: another authentication Response
-----
+image::06_acceso.png["Diagrama vista de tiempo de ejecución para el acceso"]
 
-=== <Runtime Scenario 2>
+=== <Interaccion con preguntas>
+
+Rest que tiene nuestra base de datos será el encargado de obtener la pregunta con sus respuestas correctas e incorrectas y pasarsela a web App
+
+Web App comenzara mostrando por pantalla la pregunta con todas las respuestas disponibles, a lo que el usuario solo podrá escoger una respuesta de todas las posibles.
+Una vez el usuario elige la respuesta se comprobará si los resultados son correctos o errones.
+
+En base a la respuesta del usuario web App mostrara si ha acertado o fallado de forma visual que lo pueda entender el usuario.
+
+image::06_pregunta.png["Diagrama vista de tiempo de ejecución para la pregunta"]
 
 === ...
 

webapp/src/components/Estilos/juego.css

@@ -6,6 +6,22 @@
     border: 2px solid #4CAF50; /* Borde verde */
     }
 
+.temporizador {
+      position: fixed;
+      top:75px;
+      right: 25px; /*Colocar en la derecha de la pantalla*/
+      background-color: #4A11AF; /* Color de fondo */
+      color: #fff; /* Color de texto */
+      width: 100px;
+      height: 100px;
+      border-radius: 50%; /* Esto crea la forma de un círculo */
+      display: flex;
+      justify-content: center; /*Centrar el numero horizontalmente*/
+      align-items: center; /*Centrar numero verticalmente*/
+      font-size: 38px; /*Tamaño numero*/
+      font-weight: bold; /*Poner en negrita*/
+    }
+
 .button {
     padding: 20px 20px 20px 20px ; /* espacio entre borde y el texto dentro del boton */
     border: 2px solid; /* Color del borde */

webapp/src/components/Pages/Juego.js

@@ -3,18 +3,46 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import '../Estilos/juego.css';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import Temporizador from '../Temporizador';
 
 const Juego = ({isLogged}) => {
+  //La pregunta (string)
   const [pregunta, setPregunta] = useState("")
-  //Respuesta correcta
+  //La Respuesta correcta (string)
   const [resCorr, setResCorr] = useState("")
+  //Array de las cuatros respuestas
   const [resFalse, setResFalse] = useState([])
+  //constante booleana para saber si se ha respondido ya o no (si se ha pulsado un boton se pone a true)
   const [respondido, setRespodido] = useState(false)
+  //constante para saber si ha ganado, booleana
   const [victoria, setVictoria] = useState(false)
+  //Para saber si el temporizador se ha parado al haber respondido una respuesta
+  const [pausarTemporizador, setPausarTemporizador] = useState(false)
+
+
+  //Operacion asíncrona para cargar pregunta y respuestas en las variables desde el json
+  async function CargarPregunta(pregunta, resCorr, resFalse){
+    useEffect(() => {
+      fetch("http://localhost:2500/pregunta")
+        .then((res) => res.json())
+        .then((todo) => {
+          setPregunta(todo.question)
+          setResCorr(todo.answerGood)
+          setResFalse(todo.answers)
+        });
+    }, []);    
+  }
+
+  CargarPregunta(pregunta, resCorr, resFalse);
 
+  /**
+   * Funcion que se llamara al hacer click a una de las respuestas
+   */
   const botonRespuesta = (respuesta) => { 
-    //comprobara si la respuesta es correcta o no 
+    //Comprueba si la respuesta es correcta o no y pone la variable victoria a true o false
+    //por ahora esta variable no se utiliza para nada
     setRespodido(true)
+    setPausarTemporizador(true);
     if(respuesta == resCorr){
       console.log("entro a respuesta correcta")
       setVictoria(true)
@@ -23,52 +51,68 @@ const Juego = ({isLogged}) => {
       setVictoria(false)
     }
 
-    //Cambiar color de botones
-    const buttonContainer = document.querySelector('.button-container');
-    const buttons = buttonContainer.querySelectorAll('.button');
-    const botonEncontrado = Array.from(buttons).find((button) => {
-      button.disabled=true; //desactivamos todos los botones
-        if(button.textContent.trim()==respuesta.trim()){
-          //Si era la cambiamos color fondo a verde, si no a rojo
-          if(button.textContent.trim() == resCorr) {
-            button.style.backgroundColor = "#05B92B";
-            button.style.border = "6px solid #05B92B";
-          } else {
-            button.style.backgroundColor = "#E14E4E";
-            button.style.border = "6px solid #E14E4E";
-          }
-        }
-    });
+    cambiarColorBotones(respuesta, true);
 
   };
-
-  async function CargarPregunta(pregunta, resCorr, resFalse){
-    useEffect(() => {
-      fetch("http://localhost:2500/pregunta")
-        .then((res) => res.json())
-        .then((todo) => {
-          setPregunta(todo.question)
-          setResCorr(todo.answerGood)
-          setResFalse(todo.answers)
-        });
-    }, []);
-    //console.log(pregunta);
-    //console.log(resCorr);
-    //console.log(resFalse)
 
-
+  /*
+  * Para cambiar el color de los botones al hacer click en uno de ellos
+  * True para modo pulsar uno de ellos (acertar/fallar)
+  * False si se quiere mostrar color de todos (acabar el tiempo)
+  */
+  const cambiarColorBotones = (respuesta, bool) => { 
+      //Obtenemos el contenedor de botones
+      const buttonContainer = document.querySelector('.button-container');
+      //Obtenemos los botones dentro del dicho contenedor
+      const buttons = buttonContainer.querySelectorAll('.button');
+      //Recorremos cada boton
+      Array.from(buttons).find((button) => {
+        //Desactivamos TODOS los botones
+        button.disabled=true; 
+        //Ponemos el boton de la respuesta correcta en verde
+        if(button.textContent.trim() == resCorr) {
+          button.style.backgroundColor = "#05B92B";
+          button.style.border = "6px solid #05B92B";
+        }
+        if(bool){
+        //Ponemos el boton de la marcada en rojo si era incorrecta
+          cambiarColorUno(respuesta, button);
+        }else {
+          cambiarColorTodos(button);
+        }return button; //esta linea evita un warning de sonar cloud, sin uso
+      });
+
   }
 
+  function cambiarColorUno(respuesta, button){
+    if(button.textContent.trim()==respuesta.trim()){
+      if((button.textContent.trim() != resCorr)) {
+        button.style.backgroundColor = "#E14E4E";
+        button.style.border = "6px solid #E14E4E";
+      }
+    }
+  }
+
+  function cambiarColorTodos(button){
+    if(button.textContent.trim() == resCorr) {
+      button.style.backgroundColor = "#05B92B";
+      button.style.border = "6px solid #05B92B";
+    } else{
+      button.style.backgroundColor = "#E14E4E";
+          button.style.border = "6px solid #E14E4E";
+    }
+  } 
+
+  //Funcion que se llama al hacer click en el boton Siguiente
   function clickSiguiente() {
+    //Recarga la pagina para cambiar de pregunta
     window.location.href = "game";
   }
 
-  CargarPregunta(pregunta, resCorr, resFalse);
-
 
   return (
-    <>
       <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+        <Temporizador tiempoInicial={20} tiempoAcabado={cambiarColorBotones} pausa={pausarTemporizador}/>
         <h2> {pregunta} </h2>
         <div className="button-container">
           <button id="boton1" className="button" onClick={() => botonRespuesta(resFalse[1])}> {resFalse[1]}</button>
@@ -78,10 +122,7 @@ const Juego = ({isLogged}) => {
         </div>
         <button id="botonSiguiente" className="button" onClick={() =>clickSiguiente()} > SIGUIENTE</button>
       </Container>
-      </>
   );
 };
 
-
-
 export default Juego;

webapp/src/components/Pages/Layout.js

@@ -10,7 +10,6 @@ const Layout = () => {
             <Navbar.Toggle aria-controls="responsive-navbar-nav" />
             <Navbar.Collapse id="responsive-navbar-nav">
               <Nav className="me-auto">
-                <Nav.Link href="game">Juego</Nav.Link>
                 <Nav.Link href="stats">Estadísticas</Nav.Link>
               </Nav>
               <Nav>

webapp/src/components/Temporizador.js

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+
+const Temporizador =({tiempoInicial, tiempoAcabado, pausa})=> {
+
+    //Constante que va restando segundos
+    const [tiempoSegundos, setTiempoSegundos] = useState(tiempoInicial);
+
+
+    useEffect(() => {
+        let intervalID;
+
+        if (tiempoSegundos > 0 && !pausa) {
+        intervalID = setInterval(() => {
+            setTiempoSegundos((prevTiempo) => prevTiempo - 1);
+        }, 1000);
+        }
+        if(tiempoSegundos<=0)
+            tiempoAcabado();
+        return () => clearInterval(intervalID);
+    }, [tiempoSegundos, pausa]);
+
+    return (
+        <div className="temporizador"> <p> {tiempoSegundos} </p> </div>
+    )
+}
+
+export default Temporizador;