Merge pull request #69 from Arquisoft/sergio

Limitación duración partida.
Arquisoft · Mar 1, 2024 · afa8841 · afa8841
2 parents c348b7b + 25372a6
commit afa8841
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/webapp/src/App.js b/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 }}>

diff --git a/webapp/src/components/Game.js b/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>
         </>
         )}