diff --git a/docs/images/03_2_contexto_tecnico.png b/docs/images/03_2_contexto_tecnico.png index 8f9a923..de2c05c 100644 Binary files a/docs/images/03_2_contexto_tecnico.png and b/docs/images/03_2_contexto_tecnico.png differ diff --git a/docs/images/06_acceso.png b/docs/images/06_acceso.png new file mode 100644 index 0000000..d5b386e Binary files /dev/null and b/docs/images/06_acceso.png differ diff --git a/docs/images/06_pregunta.png b/docs/images/06_pregunta.png new file mode 100644 index 0000000..2068096 Binary files /dev/null and b/docs/images/06_pregunta.png differ diff --git a/docs/src/06_runtime_view.adoc b/docs/src/06_runtime_view.adoc index e10f375..6a68f8f 100644 --- a/docs/src/06_runtime_view.adoc +++ b/docs/src/06_runtime_view.adoc @@ -37,28 +37,26 @@ See https://docs.arc42.org/section-6/[Runtime View] in the arc42 documentation. **** -=== +=== +A la hora de iniciar sesión nuestra web App nos mostrara la ventana pidiendo los datos necesarios para poder empezar a jugar. -* __ -* __ +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"] -=== +=== + +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"] === ... diff --git a/webapp/src/components/Estilos/juego.css b/webapp/src/components/Estilos/juego.css index 2aa49a0..75a90f6 100644 --- a/webapp/src/components/Estilos/juego.css +++ b/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 */ diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js index e30ce60..2c1ea90 100644 --- a/webapp/src/components/Pages/Juego.js +++ b/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 ( - <> +

{pregunta}

@@ -78,10 +122,7 @@ const Juego = ({isLogged}) => {
- ); }; - - export default Juego; diff --git a/webapp/src/components/Pages/Layout.js b/webapp/src/components/Pages/Layout.js index 21aada5..2a011f4 100644 --- a/webapp/src/components/Pages/Layout.js +++ b/webapp/src/components/Pages/Layout.js @@ -10,7 +10,6 @@ const Layout = () => {