diff --git a/webapp/src/components/QuestionContainer.jsx b/webapp/src/components/QuestionContainer.jsx index cb3aabb..8234213 100644 --- a/webapp/src/components/QuestionContainer.jsx +++ b/webapp/src/components/QuestionContainer.jsx @@ -8,7 +8,9 @@ const QuestionContainer = ({ right, updateScore, isActive, - onCorrectAnswer, + isTimeOut, + setTimer, + restartTimer, loadNextQuestion, }) => { // Estado para manejar las respuestas seleccionadas @@ -27,18 +29,29 @@ const QuestionContainer = ({ // Efecto para seleccionar la respuesta correcta automáticamente cuando el tiempo se agota useEffect(() => { - if (!isActive && selectedAnswer === null) { + if (isTimeOut && selectedAnswer === null) { setSelectedAnswer(right); // Seleccionamos la respuesta correcta setShowResult(true); } }, [isActive, selectedAnswer, right]); + useEffect(() => { + if (showResult) { + const timer = setTimeout(() => { + setIsImageLoaded(false); + loadNextQuestion(); // Cargar la siguiente pregunta después del retraso + }, 2000); // Esperar 2 segundos antes de cargar la siguiente pregunta + + return () => clearTimeout(timer); // Limpiar el temporizador cuando se desmonte o cambie el resultado + } + }, [showResult]); //, loadNextQuestion]); + // Función para manejar el clic en las respuestas const handleAnswerClick = (answer) => { if (answer === right) { // Si la respuesta es correcta, la seleccionamos y deshabilitamos todos los botones setSelectedAnswer(answer); - onCorrectAnswer(); // Detenemos el temporizador + setTimer(false); // Detenemos el temporizador setShowResult(true); } else { // Sumar 100 puntos por cada respuesta incorrecta seleccionada @@ -48,7 +61,7 @@ const QuestionContainer = ({ // Si ya se han seleccionado 3 respuestas incorrectas, selecciona la correcta por descarte if (newIncorrectAnswers.length === 3) { setSelectedAnswer(right); - onCorrectAnswer(); // Detenemos el temporizador + setTimer(false); // Detenemos el temporizador setShowResult(true); } return newIncorrectAnswers; @@ -56,19 +69,12 @@ const QuestionContainer = ({ } }; - useEffect(() => { - if (showResult) { - const timer = setTimeout(() => { - loadNextQuestion(); // Cargar la siguiente pregunta después del retraso - }, 2000); // Esperar 2 segundos antes de cargar la siguiente pregunta - - return () => clearTimeout(timer); // Limpiar el temporizador cuando se desmonte o cambie el resultado - } - }, [showResult]); //, loadNextQuestion]); - // Función para manejar la carga de la imagen const handleImageLoad = () => { setIsImageLoaded(true); + // Activamos el temporizador + setTimer(true); + restartTimer(); }; return ( @@ -78,41 +84,46 @@ const QuestionContainer = ({ /* Título de la obra */

{`¿Quién creó la obra "${name}"?`}

)} + {/* Imagen de la obra */} -
+
{name}
+ {isImageLoaded && ( -
-
Descarta las respuestas incorrectas
-
- )} - {isImageLoaded && ( - /* Renderizar botones con las respuestas */ -
- {shuffledAnswers.map((answer, index) => ( - - ))} -
+ <> +
+
Descarta las respuestas incorrectas
+
+ {/* Renderizar botones con las respuestas */} +
+ {shuffledAnswers.map((answer, index) => ( + + ))} +
+ )} {/* Mostrar el resultado después de seleccionar */} {selectedAnswer && ( diff --git a/webapp/src/pages/PlayGame1.jsx b/webapp/src/pages/PlayGame1.jsx index b45d35a..5f068ba 100644 --- a/webapp/src/pages/PlayGame1.jsx +++ b/webapp/src/pages/PlayGame1.jsx @@ -8,13 +8,12 @@ import useScore from '../hooks/useScore'; const PlayGame1 = ({ questions }) => { // Estados - //const [questions, setQuestions] = useState([]); - const [loading, setLoading] = useState(false); const [questionIndex, setQuestionIndex] = useState(0); const [shuffledAnswers, setShuffledAnswers] = useState([]); // Estado para almacenar las respuestas mezcladas const [score, updateScore] = useScore(); const [seconds, setSeconds] = useState(20); // Estados para controlar el temporizador const [isActive, setIsActive] = useState(true); + const [isTimeOut, setIsTimeOut] = useState(false); const [gameOver, setGameOver] = useState(false); // Desestructuramos la pregunta @@ -30,7 +29,8 @@ const PlayGame1 = ({ questions }) => { // Efecto para controlar el temporizador useEffect(() => { if (seconds === 0) { - endTimer(); + setTimer(false); + setIsTimeOut(true); } if (!isActive) { return; @@ -41,9 +41,13 @@ const PlayGame1 = ({ questions }) => { return () => clearInterval(interval); }, [seconds, isActive]); - // Función para detener el temporizador - const endTimer = () => { - setIsActive(false); // Detener el temporizador + // Funciones para controlar el temporizador + const setTimer = (state) => { + setIsActive(state); + }; + const restartTimer = () => { + setSeconds(20); + setIsTimeOut(false); }; // Función para cargar la siguiente pregunta @@ -51,8 +55,6 @@ const PlayGame1 = ({ questions }) => { if (questionIndex < questions.length - 1) { // Si no estamos en la última pregunta, avanzamos a la siguiente setQuestionIndex((prevIndex) => prevIndex + 1); - setSeconds(20); // Reiniciar el temporizador - setIsActive(true); // Activar el temporizador } else { // Si estamos en la última pregunta, terminamos el juego setGameOver(true); // Cambiar estado de juego @@ -63,32 +65,34 @@ const PlayGame1 = ({ questions }) => { return ( {!gameOver ? ( - /* Mostrar pregunta */ - + <> + {/* Mostrar pregunta */} + + {/* Mostrar info */} +
+ + +
+ ) : ( // Si el juego terminó, mostrar mensaje de fin - - )} - {/* Mostrar info */} - {!gameOver && ( -
- - -
- )} - {gameOver && ( -
- -
+ <> + +
+ +
+ )}
); diff --git a/webapp/src/utils/artworksQuery.js b/webapp/src/utils/artworksQuery.js index 95f698c..a53cafd 100644 --- a/webapp/src/utils/artworksQuery.js +++ b/webapp/src/utils/artworksQuery.js @@ -21,7 +21,7 @@ const artworksQuery = `SELECT ?work ?workLabel ?creatorLabel ?image ?sitelinks W FILTER(?sitelinks >= 20) # Cambia el número según el umbral que desees # Etiquetas para mostrar los nombres de la obra y el autor - SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". } + SERVICE wikibase:label { bd:serviceParam wikibase:language "es,[AUTO_LANGUAGE],en". } } # Limitar el número de resultados para acelerar la consulta LIMIT 100