Merge Dev

docs/src/04_solution_strategy.adoc

@@ -25,10 +25,6 @@ Usaremos VisualParadigm y Draw.io para la creacion de diagramas para la document
 |===
 | Objetivo de calidad | Escenario | Enfoque de solución
 
-| Privacidad
-| Los usuarios buscan la seguridad y privacidad de sus datos dentro de la aplicacion
-| Garantizar la seguridad y privacidad de los datos del usuario.
-
 | Usabilidad
 | La ejecución de todas las funciones de la aplicación es crucial para la satisfacción del usuario.
 | Optimizaremos la usabilidad gracias al framework React.
@@ -41,6 +37,17 @@ Usaremos VisualParadigm y Draw.io para la creacion de diagramas para la document
 | La aplicacion debe adapatarse a los cambios futuros sin esfuerzo.
 | Emplearemos microservicios para la minimizacion de la repeticion de codigo y mejorar la comprension de este.
 
+| Accesibilidad 
+| Cualquier usuario tendrá las mismas oportunidades que el resto sin importar sus capacidades físicas o cognitivas. 
+| Haremos una interfaz limpia, clara, sencilla y con colores accesibles
+
+| Rendimiento 
+| Los usuarios tendrán tiempos de respuesta cortos por parte del sistema contando con un máximo de 2 segundos para garantizar una mejor experiencia durante el juego. 
+| Optimizaremos las consultas a Wikidata y el codigo para minimzar los tiempos de respuesta.
+
+| Disponibilidad 
+| La aplicación estará disponible durante al menos el 98% del tiempo para permitir a los usuarios jugar la mayor cantidad de tiempo posible. 
+| Se minimizaran interrupciones dejando unas 3 horas y media de mantenimiento semanales. 
 |===
 
 === Decisiones de organizacion

webapp/src/App.js

@@ -17,7 +17,7 @@ function App() {
     <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to wiq_0
+        Welcome to wiq_6B
       </Typography>
       {showLogin ? <Login /> : <AddUser />}
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>

webapp/src/components/Game.js

@@ -11,23 +11,30 @@ const Game=() =>{
     const [questionBody, setquestionBody] =  useState('');//pregunta aleatoria cuerpo
     const [informacionWikidata, setInformacionWikidata] =  useState('');
     const [respuestaCorrecta, setRespuestaCorrecta] =  useState('');
-    const [questionType, setQuestionType] = useState('');;//para el tipo de pregunta a buscar
-    const [answerType, setAnswerType] = useState('');;//para el tipo de respuesta a buscar
+    const [questionType, setQuestionType] = useState('');//para el tipo de pregunta a buscar
+    const [answerType, setAnswerType] = useState('');//para el tipo de respuesta a buscar
     const [numberClics, setNumberClics] = useState(1);
+    const [timer, setTimer] = useState(0); // estado con el temporizador iniciado a 0 seg
 
     const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
-
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTimer(prevTime => prevTime + 1);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
     //para el tipo de respuesta a buscar
-  
-    
+
+
       // Obtener pregunta una pregunta aleatoria al acceder a la url 
       const obtenerPreguntaAleatoria = async () => {
         try {
 
             const response = await axios.post(`${apiEndpoint}/getQuestionBody`);
 
-
             setquestionBody(response.data.questionBody);//obtengo los datos del cuerpo de la pregunta
             setQuestionType(response.data.typeQuestion);
             setAnswerType(response.data.typeAnswer);
@@ -86,31 +93,39 @@ const Game=() =>{
         }
       };
 
-
       const handleButtonClick = () => {
         setNumberClics(numberClics + 1);
         obtenerPreguntaAleatoria();
       };
 
-    return (
-
-
+      const handleTimeRemaining = () => {
+          let minsR = Math.floor((3*60-timer)/60);
+          let minsRStr = (minsR<10) ? 0+minsR.toString() : minsR.toString()
+          let secsR = (3*60-timer)%60;
+          let secsRStr = (secsR<10) ? 0+secsR.toString() : secsR.toString()
+          return `${minsRStr}:${secsRStr}`;
+      };
 
+    return (
 
         <div>
-        {numberClics > 10 ? (
+        {(numberClics > 10 || timer>180) ? (
         <p>Fin</p>
         ) : (<>
-        <h1>Pregunta Número {numberClics} :</h1>
+        <Typography component="h1" variant='h5' sx={{ textAlign: 'center'}}>
+            Pregunta Número {numberClics} :
+        </Typography>
+        <Typography component="h2" sx={{ textAlign: 'center', color: (timer>120 && (timer%60)%2===0)?'red':'inherit', fontStyle:'italic', fontWeight: (timer>150 && (timer%60)%2===0)?'bold':'inherit'}}>
+            ¡Tiempo restante {handleTimeRemaining()}!
+        </Typography>
         <div>
-        <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-           {questionBody} {informacionWikidata} 
-          </Typography>
+            <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
+               {questionBody} {informacionWikidata}
+            </Typography>
 
-          <Button variant="contained" color="primary" onClick={handleButtonClick}>
-          {respuestaCorrecta}
-          </Button>
-
+            <Button variant="contained" color="primary" onClick={handleButtonClick}>
+              {respuestaCorrecta}
+            </Button>
         </div>
         </>
         )}