diff --git a/src/main/java/com/uniovi/controllers/GameController.java b/src/main/java/com/uniovi/controllers/GameController.java index 59c20083..ad8a7506 100644 --- a/src/main/java/com/uniovi/controllers/GameController.java +++ b/src/main/java/com/uniovi/controllers/GameController.java @@ -79,15 +79,15 @@ 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)); @@ -95,16 +95,17 @@ else if(questionService.checkAnswer(idQuestion, idAnswer)) { } } 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 index 37ab4183..1499a864 100644 --- 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; } \ No newline at end of file diff --git a/src/main/resources/templates/game/basicGame.html b/src/main/resources/templates/game/basicGame.html index 52236c9c..7223b6da 100644 --- 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> \ No newline at end of file diff --git a/src/main/resources/templates/game/fragments/gameFrame.html b/src/main/resources/templates/game/fragments/gameFrame.html index 8f81a3ec..b5d3afcb 100644 --- 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 index 1282f055..5d51ef9a 100644 --- 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;