Arreglos y mejoras

webapp/src/components/Navbar.js

@@ -26,7 +26,6 @@ function Navbar() {
       </li>
       {isLoggedIn ? (
         <>
-
             <li className='nav-item'>
                 <Link to='/jugar' className='nav-links' onClick={closeMenu}>Jugar</Link>
             </li>
@@ -36,6 +35,9 @@ function Navbar() {
             <li className='nav-item'>
                 <Link to='/aboutus' className='nav-links' onClick={closeMenu}>About US</Link>
             </li>
+            <li>
+                <Link to='/logout' className='nav-links-mobile' onClick={closeMenu}>Salir</Link>
+            </li>
         </>
       ) : (
         <>
@@ -65,7 +67,9 @@ function Navbar() {
 
         <NavLinks isLoggedIn={isLoggedIn}/>
         {isLoggedIn ? (
-            showButton && <Button buttonStyle='btn--outline' to='/logout'>Salir</Button>
+            <>
+              {showButton && <Button buttonStyle='btn--outline' to='/logout'>Salir</Button>}
+            </>
         ) : (
           <>
             {showButton && <Button buttonStyle='btn--outline' to='/sign-up'>Registrarse</Button>}

webapp/src/components/pages/Error404Page.js

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '../Button';
 import './Error404Page.css';
 
-function Error404Page({ initialCountdown = 15 }) {
+function Error404Page({ initialCountdown = 12 }) {
   const navigate = useNavigate(); // Hook para navegar programáticamente.
   const [countdown, setCountdown] = useState(initialCountdown); // Estado para la cuenta regresiva
 

webapp/src/components/pages/Historial.css

@@ -4,6 +4,14 @@
   align-items: center;
   padding: 20px;
 }
+.historial-container video {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 100vw; /* Garantiza cobertura completa sin sobrepasar la ventana */
+  height: 100vh; /* Idem */
+  object-fit: cover; /* Mantiene las proporciones sin recortar */
+}
 
 .services{
   color: #ffffff; 

webapp/src/components/pages/Home.css

@@ -7,8 +7,7 @@ video {
   }
 
   .hero-container {
-    /* background: url('/images/img-home.jpg') center center/cover no-repeat; */
-    height: 100vh;
+    height: calc(100vh - 80px);
     width: 100%;
     display: flex;
     flex-direction: column;

webapp/src/components/pages/Jugar.css

@@ -19,7 +19,7 @@ body, html {
   /* Contenedor del quiz y del resultado */
   .quiz-container, .result-container {
     background-color: #fff;
-    max-width: 600px;
+    max-width: 40%;
     margin: 5% auto;
     padding: 20px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
@@ -52,67 +52,54 @@ body, html {
     height: 15px;
     border-radius: 5px;
     margin-bottom: 20px;
-    transition: width 1s ease-in-out;
-  }
-
-  /* Lista de respuestas */
-  .answers-list {
-    list-style: none;
-    padding: 0;
-    margin: 0; /* Elimina el margen por defecto */
-  }
-
-  .answers-list li {
-    padding: 10px 15px;
-    margin-bottom: 10px;
-    background-color: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    cursor: pointer;
-    text-align: center;
-    transition: background-color 0.3s, transform 0.2s;
-  }
-
-  .answers-list li:hover,
-  .answers-list li.selected {
-    background-color: #007bff;
-    color: #fff;
-    transform: scale(1.05); /* Hace la transformación más notoria */
-  }
-
-  /* Botón Siguiente */
-  .quiz-next button {
-    font-size: 16px;
-    padding: 10px 20px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    display: block; /* Asegura que el botón sea un bloque */
-    width: 100%; /* Hace que el botón ocupe todo el ancho disponible */
-    box-sizing: border-box; /* Asegura que el padding no afecte el ancho final */
-    transition: background-color 0.3s, transform 0.2s;
-  }
-
-  .quiz-next button:hover {
-    background-color: #0056b3;
-    transform: scale(1.05);
-  }
-
-  /* Ajustes de responsividad */
-  @media (max-width: 640px) {
-    .quiz-container, .result-container {
-      margin: 10% auto;
-      padding: 15px; /* Ajusta el padding para más espacio */
-    }
-
-    .quiz-header h2 {
-      font-size: 20px; /* Aumenta ligeramente para mejorar la legibilidad */
-    }
-
-    .quiz-header div {
-      font-size: 15px; /* Idem */
-    }
+    transition: width 1s linear;
   }
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+  margin: 0; /* Elimina el margen por defecto */
+}
+
+.answers-list li {
+  padding: 10px 15px;
+  margin-bottom: 10px;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  cursor: pointer;
+  text-align: center;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.answers-list li:hover,.answers-list li.selected{
+  background-color: #000000;
+  color: #fff;
+}
+.answers-list li:hover {
+  transform: scale(1.05);
+}
+
+
+.quiz-next button {
+  margin-left: 25%;
+  margin-right: 25%;
+  font-size: 16px;
+  padding: 10px 20px;
+  background-color: #000000;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  display: block;
+  width: 50%;
+  box-sizing: border-box;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.quiz-next button:hover {
+  background-color: #000000;
+  color: #fff;
+  transform: scale(1.05);
+}
 

webapp/src/components/pages/Jugar.js

@@ -1,4 +1,4 @@
-import React, {useContext, useState, useEffect, useCallback} from "react";
+import React, {useContext, useState, useEffect, useRef } from "react";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../AuthContext';
 import "./Jugar.css";
@@ -35,7 +35,8 @@ function Jugar() {
     ]
   }]);
 
-
+  const timerIntervalRef = useRef(null);
+  const handleNextQuestionRef = useRef(null);
   useEffect(() => {
     const getQuestions = async () => {
       try {
@@ -57,7 +58,7 @@ function Jugar() {
   }, [isLoggedIn, navigate]);
 
 
-  const handleNextQuestion = useCallback((timeExpired = false) => {
+  const handleNextQuestion = (timeExpired = false) => {
     setTimer(INITIAL_TIMER);
     if (selectedAnswerIndex !== null || timeExpired) {
       const isCorrect =
@@ -87,27 +88,30 @@ function Jugar() {
             console.error('Error al guardar el historial:', error);
           });
     }
-  }, [currentQuestionIndex, selectedAnswerIndex, correctAnswers, questions, username]);
-
+  };
 
+  handleNextQuestionRef.current = handleNextQuestion;
   useEffect(() => {
     if (!quizFinished && questionsLoaded) {
-      const countdown = setInterval(() => {
+      if (timerIntervalRef.current) clearInterval(timerIntervalRef.current); // Limpia el intervalo si ya existe
+
+      timerIntervalRef.current = setInterval(() => {
         setTimer((prevTimer) => {
           if (prevTimer === 1) {
-            handleNextQuestion(true); // Agrega un indicador de que el cambio fue por tiempo
+            handleNextQuestionRef.current(true); // Tiempo expirado
             return INITIAL_TIMER;
           }
           return prevTimer - 1;
         });
       }, 1000);
-      return () => clearInterval(countdown);
     }
-  }, [quizFinished, questionsLoaded, currentQuestionIndex, timer, handleNextQuestion]);
 
-  const handleAnswerSelect = (index) => {
-    setSelectedAnswerIndex(index);
-  };
+    // Limpia el intervalo cuando el componente se desmonta o el quiz finaliza
+    return () => {
+      if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
+    };
+  }, [quizFinished, questionsLoaded]);
+
 
 
   const videoSource = quizFinished ? "/videos/celebracion.mp4" : "/videos/question.mp4";
@@ -147,7 +151,7 @@ function Jugar() {
             {questions[currentQuestionIndex].answers.map((answer, index) => (
               <li
                 key={index}
-                onClick={() => handleAnswerSelect(index)}
+                onClick={() => setSelectedAnswerIndex(index)}
                 className={selectedAnswerIndex === index ? "selected" : ""}
               >
                 {answer.answer}