Merge pull request #89 from Arquisoft/pablo

Fin de partida, CSS y implementaciones del juego
Arquisoft · Mar 30, 2024 · ada6418 · ada6418
2 parents 2bae69f + 78acdb3
commit ada6418
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 11 deletions.
diff --git a/webapp/src/components/Game.css b/webapp/src/components/Game.css
@@ -17,3 +17,12 @@ button[title="btnsPreg"]{
     background-color: rgba(41, 120, 152, 0.764);
 }
 
+button[title="puntuacion"]:disabled{
+    margin: 1em;
+    background-color: rgba(31, 60, 134, 0.764);
+    color: white;
+    padding-top: 0.4em;
+    padding-bottom: 0.2em;
+    font-size: 1.5em;
+}
+
diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
@@ -17,6 +17,11 @@ const Game = () => {
 
   const [questionCounter, setQuestionCounter] = useState(0);
   const [incorrectCounter, setIncorrectCounter] = useState(0);
+
+  const [numberOfQuestions, setNumberOfQuestions] = useState(10);
+  const [questionsToAnswer, setQuestionsToAnswer] = useState(10);
+  const [isFinished, setFinished] = useState(false);
+  const [percentage, setPercentage] = useState(0);
 
   // Temporizador
   const [seconds, setSeconds] = useState(120); // 2 minutes
@@ -35,6 +40,14 @@ const Game = () => {
 
     return () => clearInterval(intervalId);
   }, []);
+
+
+  useEffect(() => {
+    if (isGameFinished() && !isFinished){
+      finishGame();
+      setFinished(true)
+;    }
+  }, [correctCounter]);
 
   // This method will call the create question service
   const  handleShowQuestion = async () => {
@@ -53,7 +66,16 @@ const Game = () => {
         button.onmouse = colorOnMousePreguntas;
       });
 
+      // FIN DE LA PARTIDA
+      if (isGameFinished() && !isFinished){
+        finishGame();
+        setFinished(true);
+      }
+
+
       incrementQuestion();
+
+
     }catch (error){
       console.error('Error:', error);
     }    
@@ -80,27 +102,61 @@ const Game = () => {
       button.disabled = true;
       button.onmouse = null;
     });
+
+
+    decrementQuestionsToAnswer();
 
-    // Cambiar a la siguiente pregunta después de 3 segundos
-    setTimeout(() => {
-      handleShowQuestion();
-    }, 1500);
+
+    if (!isFinished){
+      // Cambiar a la siguiente pregunta después de 3 segundos
+      setTimeout(() => {
+        handleShowQuestion();
+      }, 1500);
+    }
+
+  }
+
+  const isGameFinished = () => {
+    return questionCounter >= numberOfQuestions;
+  }
+
+  const finishGame = () => {
+    const buttons = document.querySelectorAll('button[title="btnsPreg"]');
+    buttons.forEach(button => {
+      button.disabled = true;
+      button.onmouse = null;
+    });
+    console.log("finishGame " + correctCounter);
+    var correctas = (correctCounter / numberOfQuestions) * 100;
+    console.log("corr1 " + correctas);
+    if (!Number.isInteger(percentage)){
+      correctas = correctas.toFixed(2);
+      console.log("dentro " + correctas);
+    }
+    console.log("corr2 " + correctas);
+    setPercentage(correctas);
   }
 
   const incrementCorrect = () => {
-    setCorrectCounter(correctCounter + 1);
+    setCorrectCounter(correct => correct + 1);
   };
 
   const incrementIncorrect = () => {
-    setIncorrectCounter(incorrectCounter + 1);
+    setIncorrectCounter(incorrect => incorrect + 1);
+  }
+
+  const decrementQuestionsToAnswer = () => {
+    setQuestionsToAnswer(toAnswer => toAnswer - 1);
   }
 
   const incrementQuestion = () => {
-    setQuestionCounter(questionCounter + 1);
+    setQuestionCounter(qc => qc + 1);
   }
 
   return (
     <Container maxWidth="md" style={{ marginTop: '2rem' }}>
+
+      {!isFinished && (
       <Paper elevation={3} style={{ padding: '2rem', textAlign: 'center' }}>
         <Typography variant="h4" gutterBottom>
           Saber y Ganar Juego
@@ -116,14 +172,23 @@ const Game = () => {
           ))}
         </div>
       </Paper>
+     )}
 
+      {!isFinished && (
+      <Button title="contador" onMouseEnter={null} variant="contained" color="primary" disabled={true}>
+        Preguntas restantes: {questionsToAnswer}
+      </Button>
+      )}
+      {!isFinished && (
       <Button title="contador" onMouseEnter={null} variant="contained" color="primary" disabled={true}>
         Correctas: {correctCounter}
       </Button>
-
+      )}
+      {!isFinished && (
       <Button title="contador" onMouseEnter={null} variant="contained" color="primary" disabled={true}>
         Incorrectas: {incorrectCounter}
       </Button>
+      )}
 
       <div>
         <svg data-testid="TimerIcon"></svg>
@@ -133,6 +198,29 @@ const Game = () => {
         </div>
       </div>
 
+
+
+      {isFinished && (
+        <div>
+        <Paper elevation={3} style={{ padding: '2rem', textAlign: 'center' }}>
+          <Typography variant="h4" gutterBottom>
+            Partida finalizada. ¡Gracias por jugar!
+          </Typography>
+          <div>
+            <Button title='puntuacion' onMouseEnter={null} variant="contained" color="primary" disabled={true}>
+              Puntuación: {percentage} % 
+            </Button>
+          </div>
+        </Paper>
+        </div>
+      )}
+
+
+      {/* <Button title="sigPreg" variant="contained" color="primary" onClick={handleShowQuestion}>
+        Siguiente pregunta
+      </Button> */}
+
+
     </Container>
   );
 };

diff --git a/webapp/src/components/MainPage.css b/webapp/src/components/MainPage.css
@@ -0,0 +1,12 @@
+div[title="main"]{
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+div[title="main"]>button{
+    margin: 1em;
+    padding: 0.5em;
+    background-color: rgba(31, 60, 134, 0.764);
+    color: white;
+    font-size: 1em;
+}
diff --git a/webapp/src/components/MainPage.js b/webapp/src/components/MainPage.js
@@ -1,5 +1,7 @@
-import { Container, Typography, Button} from '@mui/material';
-import { useNavigate} from 'react-router-dom';
+import React, { useState } from 'react';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { useNavigate, useParams } from 'react-router-dom';
+import './MainPage.css';
 
 const MainPage = () => {
     const navigate = useNavigate();
@@ -16,7 +18,7 @@ const MainPage = () => {
 
     return (
         <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-            <div>
+            <div title='main'>
                 <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
                 ¡Bienvenido a WIQ 2024!
                 </Typography>