Merge pull request #202 from Arquisoft/EliminarPantallaResultado

Eliminar pantalla resultado
Arquisoft · Apr 17, 2024 · 884b8d6 · 884b8d6
2 parents d8aaa2b + 9354cfb
commit 884b8d6
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 15 deletions.
diff --git a/src/main/java/com/uniovi/controllers/GameController.java b/src/main/java/com/uniovi/controllers/GameController.java
@@ -79,32 +79,33 @@ public String getCheckResult(@PathVariable Long idQuestion, @PathVariable Long i
 
         if(idAnswer == -1
             || getRemainingTime(gameSession) <= 0) {
-            model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer());
-            model.addAttribute("messageKey", "timeRunOut.result");
-            model.addAttribute("logoImage", "/images/logo_incorrect.svg");
+            //model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer());
+            //model.addAttribute("messageKey", "timeRunOut.result");
+            //model.addAttribute("logoImage", "/images/logo_incorrect.svg");
             gameSession.addAnsweredQuestion(gameSession.getCurrentQuestion());
             gameSession.addQuestion(false, 0);
         }
         else if(questionService.checkAnswer(idQuestion, idAnswer)) {
-            model.addAttribute("messageKey", "correctAnswer.result");
-            model.addAttribute("logoImage", "/images/logo_correct.svg");
+            //model.addAttribute("messageKey", "correctAnswer.result");
+            //model.addAttribute("logoImage", "/images/logo_correct.svg");
 
             if (!gameSession.isAnswered(gameSession.getCurrentQuestion())) {
                 gameSession.addQuestion(true, getRemainingTime(gameSession));
                 gameSession.addAnsweredQuestion(gameSession.getCurrentQuestion());
             }
 
         } else {
-            model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer());
-            model.addAttribute("messageKey", "failedAnswer.result");
-            model.addAttribute("logoImage", "/images/logo_incorrect.svg");
+            //model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer());
+            //model.addAttribute("messageKey", "failedAnswer.result");
+            //model.addAttribute("logoImage", "/images/logo_incorrect.svg");
             gameSession.addAnsweredQuestion(gameSession.getCurrentQuestion());
             gameSession.addQuestion(false, 0);
         }
 
         session.setAttribute("hasJustAnswered", true);
         gameSession.getNextQuestion();
-        return "game/fragments/questionResult";
+        //return "game/fragments/questionResult";
+        return updateGame(model, session);
     }
 
     @GetMapping("/game/update")

diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css
@@ -62,4 +62,8 @@ footer {
 
 .nav .nav-link:hover {
     color: rgba(255, 255, 255, 0.7) !important; /* Cambia el color del texto del enlace cuando se pasa el mouse */
+}
+
+.prueba {
+    font-weight: bold;
 }
diff --git a/src/main/resources/templates/game/basicGame.html b/src/main/resources/templates/game/basicGame.html
@@ -32,7 +32,19 @@
         });
     }
 
+    function updateQuestionCounter() {
+        $.ajax({
+            type: "GET",
+            url: "/game/currentQuestion",
+            success: function (response) {
+                if (!isNaN(response))
+                    $("#currentQuestion").text(response);
+            }
+        });
+    }
+
     setInterval(updatePoints, 1000);
+    setInterval(updateQuestionCounter, 1000);
 </script>
 </body>
 </html>
diff --git a/src/main/resources/templates/game/fragments/gameFrame.html b/src/main/resources/templates/game/fragments/gameFrame.html
@@ -8,6 +8,7 @@ <h1 class="text-center" th:text="${question.statement}"></h1>
                     <button th:id="${'btn' + answer.id}" class="btn btn-primary btn-block m-2 rounded" th:text="${answer.text}" th:value="${answer}"></button>
                 </div>
         </div>
+        <button id="continueBtn" class="prueba btn btn-primary btn-block m-2 rounded" th:text="#{game.continue}"></button>
     </div>
     <div id="bottomGamePart">
         <div th:replace="~{game/fragments/stopwatch}"></div>
@@ -16,28 +17,48 @@ <h1 class="text-center" th:text="${question.statement}"></h1>
             function initiateGameCounters() {
                 let timeoutId = -1;
                 let interval = -1;
+                let questionId = [[${question.id}]];
+                let corrAnswerId = [[${question.correctAnswer.id}]];
+                let answers = /*[[${question.options}]]*/ [];
+
+                $("#continueBtn").hide();
 
                 function setupAnswers() {
-                    let questionId = [[${question.id}]];
-                    let answers = /*[[${question.options}]]*/ [];
+                    //let questionId = [[${question.id}]];
+                    //let answers = /*[[${question.options}]]*/ [];
 
                     answers.forEach(answer => {
                         $("#btn" + answer.id).click(function () {
                             clearTimeout(timeoutId);
                             clearInterval(interval);
-                            $("#gameFrame").load("/game/" + questionId + "/" + answer.id);
+                            //$("#gameFrame").load("/game/" + questionId + "/" + answer.id);
+                            if (!(corrAnswerId == answer.id)) {
+                                $("#btn" + answer.id).css("background-color", "red");
+                            }
+                            respuesta(questionId, answer.id);
                         });
                     });
                 }
 
                 setupAnswers();
 
+                function respuesta(qId, aId) {
+                    answers.forEach(answer => {
+                        if (corrAnswerId == answer.id) {
+                            $("#btn" + answer.id).css("background-color", "green");
+                        }
+                        $("#btn" + answer.id).off("click");
+                    });
+
+                    initiateTimeout(qId, aId);
+                }
+
                 let timeoutPeriod = [[${questionDuration}]] * 1000; // Timeout period in milliseconds (e.g., 8000ms for 8 seconds)
                 let updateInterval = 100; // How often to update the progress bar (in milliseconds)
 
                 timeoutId = setTimeout(() => {
-                    $("#gameFrame").load('/game/[[${question.id}]]/-1');
-                    clearTimeout(timeoutId);
+                    //$("#gameFrame").load('/game/[[${question.id}]]/-1');
+                    respuesta(questionId, -1);
                 }, timeoutPeriod);
 
                 initStopwatch(timeoutPeriod / 1000);
@@ -62,6 +83,38 @@ <h1 class="text-center" th:text="${question.statement}"></h1>
                         clearInterval(interval);
                     }
                 }
+
+                function initiateTimeout(qId, aId) {
+                    if (timeoutId) {
+                        clearTimeout(timeoutId);
+                        clearInterval(interval);
+                    }
+                    timeoutPeriod = 12000; // Timeout period in milliseconds (e.g., 8000ms for 8 seconds)
+                    updateInterval = 100; // How often to update the progress bar (in milliseconds)
+                    let progressBar = $('#progressBar');
+                    progressBar.attr('aria-valuenow', 100);
+
+                    timeoutId = setTimeout(function () {
+                        if (timeoutId) {
+                            clearTimeout(timeoutId);
+                            clearInterval(interval);
+                        }
+                        $("#gameFrame").load("/game/" + qId + "/" + aId);
+                    }, timeoutPeriod);
+
+                    initStopwatch(timeoutPeriod / 1000);
+                    timeoutPeriod = timeoutPeriod - updateInterval * 2; // Adjust the timeout period to account for the update interval
+                    interval = setInterval(updateProgressBar, updateInterval);
+
+                    $("#continueBtn").show();
+                    $("#continueBtn").off('click').on('click', function () {
+                        if (timeoutId) {
+                            clearTimeout(timeoutId);
+                            clearInterval(interval);
+                        }
+                        $("#gameFrame").load("/game/" + qId + "/" + aId);
+                    });
+                }
             }
 
             initiateGameCounters();

diff --git a/src/main/resources/templates/game/fragments/stopwatch.html b/src/main/resources/templates/game/fragments/stopwatch.html
@@ -7,11 +7,19 @@
 
 <script th:inline="javascript">
     /*<![CDATA[*/
+    activeIntervalId = null;
+
     function initStopwatch(timer) {
+        // Si ya hay un contador activo, lo limpiamos
+        if (activeIntervalId !== null) {
+            clearInterval(activeIntervalId);
+        }
+
         let countdown = timer - 1;
         const display = document.getElementById('stopwatch');
 
-        setInterval(() => {
+        // Creamos un nuevo intervalo
+        activeIntervalId = setInterval(() => {
             countdown -= 1;
             if (countdown < 0) {
                 countdown = 0;