Merge pull request #356 from Arquisoft/develop-hugo

Fix wise man stack timer
Arquisoft · Apr 28, 2024 · abd5122 · abd5122
2 parents e42350d + 434c0d5
commit abd5122
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 27 deletions.
diff --git a/webapp/src/__tests__/pages/games/WiseMenStackGame.test.js b/webapp/src/__tests__/pages/games/WiseMenStackGame.test.js
@@ -116,21 +116,6 @@ describe('Wise Men Stack Game component', () => {
 
   }, 4500);
 
-  it('should render pause & play buttons when answered', async () => {
-    await waitFor(() => screen.getByText('GAME CONFIGURATION'));
-    const button = screen.getByTestId('start-button');
-    fireEvent.click(button);
-
-    await waitFor(() => screen.getByText('Which is the capital of Spain?'.toUpperCase()));
-    const correctAnswer = screen.getByRole('button', { name: 'Madrid' });
-    fireEvent.click(correctAnswer);
-
-    const pauseButton = screen.getByTestId("pause");
-    expect(pauseButton);
-    fireEvent.click(pauseButton);
-    expect(screen.getByTestId("play"));
-  })
-
   it('should render progress bar', async () => {
     await waitFor(() => screen.getByText('GAME CONFIGURATION'));
     const button = screen.getByTestId('start-button');

diff --git a/webapp/src/pages/games/WiseMenStackGame.js b/webapp/src/pages/games/WiseMenStackGame.js
@@ -39,6 +39,7 @@ const WiseMenStackGame = () => {
     const [timerRunning, setTimerRunning] = React.useState(true); // indicate if the timer is working
     const [showConfetti, setShowConfetti] = React.useState(false); //indicates if the confetti must appear
     const [questionCountdownKey, ] = React.useState(60); //key to update question timer
+    const [targetTime, ] = React.useState(60);
     const [questionCountdownRunning, setQuestionCountdownRunning] = React.useState(false); //property to start and stop question timer
     const [userResponses, setUserResponses] = React.useState([]);
     const [language, setCurrentLanguage] = React.useState(i18n.language);
@@ -64,19 +65,22 @@ const WiseMenStackGame = () => {
 
     // hook to initiating new rounds if the current number of rounds is less than or equal to 3 
     React.useEffect(() => {
-        if (totalTimePlayed <= questionCountdownKey) {
+        if (totalTimePlayed <= targetTime) {
             startNewRound();
-            setQuestionCountdownRunning(true);
-        } else {
-            setTimerRunning(false);
-            setShouldRedirect(true);
-            setQuestionCountdownRunning(false);
-            updateStatistics();
-            updateQuestionsRecord();
+            setQuestionCountdownRunning(true)
         }
         // eslint-disable-next-line
     }, [round]);
 
+    const endGame = () => {
+        setTimerRunning(false);
+        setShouldRedirect(true);
+        setQuestionCountdownRunning(false);
+        updateStatistics();
+        updateQuestionsRecord();
+        // eslint-disable-next-line
+    }
+
     // stablish if the confetti must show or not
     React.useEffect(() => {
         if (correctlyAnsweredQuestions > incorrectlyAnsweredQuestions) {
@@ -108,7 +112,7 @@ const WiseMenStackGame = () => {
             setQuestionData(quest.data[0]);
             setButtonStates(new Array(2).fill(null));
             getPossibleOptions(quest.data[0]);
-
+           
         }).catch(error => {
             console.error("Could not get questions", error);
         }); 
@@ -182,6 +186,7 @@ const WiseMenStackGame = () => {
 
     // this function is called when a user selects a response. 
     const selectResponse = async (index, response) => {
+        setQuestionCountdownRunning(false);
         setAnswered(true);
         const newButtonStates = [...buttonStates];
 
@@ -332,7 +337,7 @@ const WiseMenStackGame = () => {
             <CssBaseline />
 
             <Container sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }} >
-                { answered ?
+                { false ?
                     // Pausa
                     <IconButton variant="contained" size="large" color="primary" aria-label={ paused ? t("Game.play") : t("Game.pause") }
                                 onClick={() => togglePause()} sx={{ height: 100, width: 100, border: `2px solid ${theme.palette.primary.main}` }} 
@@ -341,8 +346,8 @@ const WiseMenStackGame = () => {
                     </IconButton>
                     :
                     // Cronómetro
-                    <CountdownCircleTimer data-testid="circleTimer" key={questionCountdownKey} isPlaying = {questionCountdownRunning} duration={60} colorsTime={[10, 6, 3, 0]}
-                        colors={[theme.palette.success.main, "#F7B801", "#f50707", theme.palette.error.main]} size={100} onComplete={() => selectResponse(-1, "FAILED")}>
+                    <CountdownCircleTimer data-testid="circleTimer" key={questionCountdownKey} isPlaying = {questionCountdownRunning} duration={targetTime} colorsTime={[10, 6, 3, 0]}
+                        colors={[theme.palette.success.main, "#F7B801", "#f50707", theme.palette.error.main]} size={100} onComplete={() => endGame()}>
                         {({ remainingTime }) => {
                             return (
                                 <Box style={{ display: 'flex', alignItems: 'center' }}>