fix image loading delay

Arquisoft · Nov 16, 2024 · 6a9ac6b · 6a9ac6b
1 parent cee662a
commit 6a9ac6b
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 78 deletions.
diff --git 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,27 +61,20 @@ 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;
       });
     }
   };
 
-  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 */
         <h3>{`¿Quién creó la obra "${name}"?`}</h3>
       )}
+
       {/* Imagen de la obra */}
-      <div className="image">
+      <div
+        className="image"
+        style={{ display: isImageLoaded ? 'flex' : 'none' }}
+      >
         <img src={path} alt={name} onLoad={handleImageLoad} />
       </div>
+
       {isImageLoaded && (
-        <div>
-          <h5>Descarta las respuestas incorrectas</h5>
-        </div>
-      )}
-      {isImageLoaded && (
-        /* Renderizar botones con las respuestas */
-        <div className="buttons-container">
-          {shuffledAnswers.map((answer, index) => (
-            <button
-              className={`btn ${
-                selectedAnswer === right
-                  ? answer === right && incorrectAnswers.length === 3 // Marca la respuesta correcta cuando se selecciona
-                    ? 'correct'
-                    : 'disabled' // Deshabilita las demás cuando la correcta es seleccionada
-                  : incorrectAnswers.includes(answer) // Marca las respuestas incorrectas una a una
-                  ? 'incorrect'
-                  : ''
-              }`}
-              key={index}
-              onClick={() => handleAnswerClick(answer)}
-              disabled={
-                selectedAnswer !== null ||
-                incorrectAnswers.includes(answer) ||
-                !isActive // Deshabilita
-              }
-            >
-              {answer}
-            </button>
-          ))}
-        </div>
+        <>
+          <div>
+            <h5>Descarta las respuestas incorrectas</h5>
+          </div>
+          {/* Renderizar botones con las respuestas */}
+          <div className="buttons-container">
+            {shuffledAnswers.map((answer, index) => (
+              <button
+                className={`btn ${
+                  selectedAnswer === right
+                    ? answer === right && incorrectAnswers.length === 3 // Marca la respuesta correcta cuando se selecciona
+                      ? 'correct'
+                      : 'disabled' // Deshabilita las demás cuando la correcta es seleccionada
+                    : incorrectAnswers.includes(answer) // Marca las respuestas incorrectas una a una
+                    ? 'incorrect'
+                    : ''
+                }`}
+                key={index}
+                onClick={() => handleAnswerClick(answer)}
+                disabled={
+                  selectedAnswer !== null ||
+                  incorrectAnswers.includes(answer) ||
+                  isTimeOut // Deshabilita
+                }
+              >
+                {answer}
+              </button>
+            ))}
+          </div>
+        </>
       )}
       {/* Mostrar el resultado después de seleccionar */}
       {selectedAnswer && (

diff --git 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,18 +41,20 @@ 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
   const loadNextQuestion = () => {
     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 (
     <Wrapper>
       {!gameOver ? (
-        /* Mostrar pregunta */
-        <QuestionContainer
-          shuffledAnswers={shuffledAnswers}
-          name={name}
-          path={path}
-          right={right}
-          updateScore={updateScore}
-          isActive={isActive}
-          onCorrectAnswer={endTimer}
-          loadNextQuestion={loadNextQuestion} // Cargar la siguiente pregunta
-        />
+        <>
+          {/* Mostrar pregunta */}
+          <QuestionContainer
+            shuffledAnswers={shuffledAnswers}
+            name={name}
+            path={path}
+            right={right}
+            updateScore={updateScore}
+            isActive={isActive}
+            isTimeOut={isTimeOut}
+            setTimer={setTimer}
+            restartTimer={restartTimer}
+            loadNextQuestion={loadNextQuestion} // Cargar la siguiente pregunta
+          />
+          {/* Mostrar info */}
+          <div>
+            <ScoreContainer score={score} />
+            <TimerContainer seconds={seconds} />
+          </div>
+        </>
       ) : (
         // Si el juego terminó, mostrar mensaje de fin
-        <GameOverContainer score={score} />
-      )}
-      {/* Mostrar info */}
-      {!gameOver && (
-        <div>
-          <ScoreContainer score={score} />
-          <TimerContainer seconds={seconds} />
-        </div>
-      )}
-      {gameOver && (
-        <div>
-          <ScoreContainer score={score} />
-        </div>
+        <>
+          <GameOverContainer score={score} />
+          <div>
+            <ScoreContainer score={score} />
+          </div>
+        </>
       )}
     </Wrapper>
   );

diff --git 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