From 9960ef4c0a908c3b3b7ef1e0277108ca5101ccce Mon Sep 17 00:00:00 2001 From: Lara Date: Mon, 4 Mar 2024 18:14:42 +0100 Subject: [PATCH 1/5] =?UTF-8?q?A=C3=B1adido=20temporizador=20a=20Juego?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/Estilos/juego.css | 16 ++++ webapp/src/components/Pages/Juego.js | 114 ++++++++++++++++-------- 2 files changed, 94 insertions(+), 36 deletions(-) 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..03b325b 100644 --- a/webapp/src/components/Pages/Juego.js +++ b/webapp/src/components/Pages/Juego.js @@ -5,15 +5,55 @@ import '../Estilos/juego.css'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; 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) + //Constantes para el tiempo en segundos que va pasando + //Comprueba si la url tiene el parametro started + const isStarted = !new URLSearchParams(window.location.search).has('started'); + //El tiempo al acceder a la pagina, si tiene started en la url se inicializa con el tiempo almacenado en local storage + const tiempoInicial = isStarted ? 0 : parseInt(localStorage.getItem('tiempoSegundos')) || 0; + //Constante que va sumando segundos + const [tiempoSegundos, setTiempoSegundos] = useState(tiempoInicial); + + + useEffect(() => { + const intervalID = setInterval(() => { + setTiempoSegundos((prevTiempo) => prevTiempo + 1); + }, 1000); + return () => clearInterval(intervalID); + }, []); + + + //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) if(respuesta == resCorr){ console.log("entro a respuesta correcta") @@ -23,52 +63,54 @@ 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); }; - - 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 + */ + const cambiarColorBotones = (respuesta) => { + //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 + const botonEncontrado = 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"; + } + //Ponemos el boton de la marcada en rojo si era incorrecta + if(button.textContent.trim()==respuesta.trim()){ + if(! (button.textContent.trim() == resCorr)) { + button.style.backgroundColor = "#E14E4E"; + button.style.border = "6px solid #E14E4E"; + } + } + }); } - + + + //Funcion que se llama al hacer click en el boton Siguiente function clickSiguiente() { - window.location.href = "game"; + //Guarda el temporizador en local storage del explorador para que continue y no se reinicie + localStorage.setItem('tiempoSegundos', tiempoSegundos.toString()); + //Recarga la pagina para pasar a la siguiente pregunta, guardando en la url un parametro 'started' para que se guarde + //no se reinicie el temporizador + window.location.href = `game?started=true`; } - CargarPregunta(pregunta, resCorr, resFalse); + return ( <> +

{tiempoSegundos}

{pregunta}

From 01675f51dcd1cf3f919dfbe8729537ab901b7621 Mon Sep 17 00:00:00 2001 From: Lara Date: Mon, 4 Mar 2024 18:54:25 +0100 Subject: [PATCH 2/5] Temporizador arreglado --- webapp/src/components/Pages/Juego.js | 57 +++++++++++++++++++--------- 1 file changed, 40 insertions(+), 17 deletions(-) diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js index 03b325b..840ab55 100644 --- a/webapp/src/components/Pages/Juego.js +++ b/webapp/src/components/Pages/Juego.js @@ -15,22 +15,24 @@ const Juego = ({isLogged}) => { const [respondido, setRespodido] = useState(false) //constante para saber si ha ganado, booleana const [victoria, setVictoria] = useState(false) - - //Constantes para el tiempo en segundos que va pasando - //Comprueba si la url tiene el parametro started - const isStarted = !new URLSearchParams(window.location.search).has('started'); - //El tiempo al acceder a la pagina, si tiene started en la url se inicializa con el tiempo almacenado en local storage - const tiempoInicial = isStarted ? 0 : parseInt(localStorage.getItem('tiempoSegundos')) || 0; - //Constante que va sumando segundos - const [tiempoSegundos, setTiempoSegundos] = useState(tiempoInicial); + //Constante que va restando segundos + const [tiempoSegundos, setTiempoSegundos] = useState(22); + //Para saber si el temporizador se ha parado al haber respondido una respuesta + const [pausarTemporizador, setPausarTemporizador] = useState(false) useEffect(() => { - const intervalID = setInterval(() => { - setTiempoSegundos((prevTiempo) => prevTiempo + 1); - }, 1000); + let intervalID; + + if (tiempoSegundos > 0 && !pausarTemporizador) { + intervalID = setInterval(() => { + setTiempoSegundos((prevTiempo) => prevTiempo - 1); + }, 1000); + } + if(tiempoSegundos<=0) + revelarRespuestas(); return () => clearInterval(intervalID); - }, []); + }, [tiempoSegundos, pausarTemporizador]); //Operacion asíncrona para cargar pregunta y respuestas en las variables desde el json @@ -55,6 +57,7 @@ const Juego = ({isLogged}) => { //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) @@ -93,15 +96,35 @@ const Juego = ({isLogged}) => { } }); } + + /* + * Cambiar colores de todos los botones cuando se acaba el tiempo + */ + const revelarRespuestas = () => { + //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 + const botonEncontrado = 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"; + } else{ + button.style.backgroundColor = "#E14E4E"; + button.style.border = "6px solid #E14E4E"; + } + }); +} //Funcion que se llama al hacer click en el boton Siguiente function clickSiguiente() { - //Guarda el temporizador en local storage del explorador para que continue y no se reinicie - localStorage.setItem('tiempoSegundos', tiempoSegundos.toString()); - //Recarga la pagina para pasar a la siguiente pregunta, guardando en la url un parametro 'started' para que se guarde - //no se reinicie el temporizador - window.location.href = `game?started=true`; + //Recarga la pagina para cambiar de pregunta + window.location.href = "game"; } From eb52cf9eeda2eb27bee809a0764eecb62da6f246 Mon Sep 17 00:00:00 2001 From: Fernando Jose Gonzalez Sierra Date: Tue, 5 Mar 2024 02:55:35 +0100 Subject: [PATCH 3/5] Commit mejoras MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Eliminada la repetición del código * Extraída la funcionalidad del temporizador a un nuevo componente * Eliminada la opción de Juego desde la navegación --- webapp/src/components/Pages/Juego.js | 86 ++++++++++----------------- webapp/src/components/Pages/Layout.js | 1 - webapp/src/components/Temporizador.js | 27 +++++++++ 3 files changed, 58 insertions(+), 56 deletions(-) create mode 100644 webapp/src/components/Temporizador.js diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js index 840ab55..2c1ea90 100644 --- a/webapp/src/components/Pages/Juego.js +++ b/webapp/src/components/Pages/Juego.js @@ -3,6 +3,7 @@ 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) @@ -15,26 +16,10 @@ const Juego = ({isLogged}) => { const [respondido, setRespodido] = useState(false) //constante para saber si ha ganado, booleana const [victoria, setVictoria] = useState(false) - //Constante que va restando segundos - const [tiempoSegundos, setTiempoSegundos] = useState(22); //Para saber si el temporizador se ha parado al haber respondido una respuesta const [pausarTemporizador, setPausarTemporizador] = useState(false) - - - useEffect(() => { - let intervalID; - - if (tiempoSegundos > 0 && !pausarTemporizador) { - intervalID = setInterval(() => { - setTiempoSegundos((prevTiempo) => prevTiempo - 1); - }, 1000); - } - if(tiempoSegundos<=0) - revelarRespuestas(); - return () => clearInterval(intervalID); - }, [tiempoSegundos, pausarTemporizador]); - - + + //Operacion asíncrona para cargar pregunta y respuestas en las variables desde el json async function CargarPregunta(pregunta, resCorr, resFalse){ useEffect(() => { @@ -66,20 +51,22 @@ const Juego = ({isLogged}) => { setVictoria(false) } - cambiarColorBotones(respuesta); + cambiarColorBotones(respuesta, true); }; /* * 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) => { + 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 - const botonEncontrado = Array.from(buttons).find((button) => { + Array.from(buttons).find((button) => { //Desactivamos TODOS los botones button.disabled=true; //Ponemos el boton de la respuesta correcta en verde @@ -87,39 +74,34 @@ const Juego = ({isLogged}) => { button.style.backgroundColor = "#05B92B"; button.style.border = "6px solid #05B92B"; } + if(bool){ //Ponemos el boton de la marcada en rojo si era incorrecta - if(button.textContent.trim()==respuesta.trim()){ - if(! (button.textContent.trim() == resCorr)) { - button.style.backgroundColor = "#E14E4E"; - button.style.border = "6px solid #E14E4E"; - } - } + cambiarColorUno(respuesta, button); + }else { + cambiarColorTodos(button); + }return button; //esta linea evita un warning de sonar cloud, sin uso }); + } - /* - * Cambiar colores de todos los botones cuando se acaba el tiempo - */ - const revelarRespuestas = () => { - //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 - const botonEncontrado = 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"; - } else{ + 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"; + 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() { @@ -127,13 +109,10 @@ const Juego = ({isLogged}) => { window.location.href = "game"; } - - return ( - <> -

{tiempoSegundos}

+

{pregunta}

@@ -143,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 = () => {