Add instructions

Arquisoft · Apr 28, 2024 · 8f7afda · 8f7afda
1 parent c8288fa
commit 8f7afda
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 5 deletions.
diff --git a/src/main/java/com/uniovi/controllers/HomeController.java b/src/main/java/com/uniovi/controllers/HomeController.java
@@ -47,4 +47,9 @@ public String createApiKey(Authentication auth) {
         }
         return "redirect:/home/apikey";
     }
+
+    @GetMapping("/instructions")
+    public String instructions(){
+        return "instructions";
+    }
 }
diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
@@ -166,4 +166,10 @@ admin.monitoring=Monitorización de la aplicación
 
 # -------------------Statements for the page management---------------------
 page.first=Primera
-page.last=Última
+page.last=Última
+
+# -------------------Statements for the instructions ---------------------
+instructions.nav=Instrucciones
+instructions.heading=Como jugar a WIQ
+instructions.subtitle= ¡Sigue estos pasos para jugar a WIQ!
+instructions.text= WIQ es un juego de preguntas y respuestas en el que tendrás que responder correctamente a una serie de preguntas para ganar puntos. Sigue estos pasos para jugar:\n\n1. Regístrate en la aplicación si aún no lo has hecho.\n2. Inicia sesión con tu usuario y contraseña.\n3. Pulsa en el botón "Jugar" para comenzar una partida.\n4. Responde a las preguntas correctamente para ganar puntos.\n5. ¡Diviértete y compite con tus amigos para ver quién es el mejor!\n\nPor cada pregunta correcta, recibirás 10 puntos más el tiempo restante para contestarla, es decir, si contestas una pregunta correctamente y te quedan 15 segundos, tu puntuación de esa pregunta será de 25!\n\n¡Buena suerte y que empiece el juego!
diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
@@ -170,4 +170,10 @@ admin.monitoring=Monitoring
 page.first=First
 page.last=Last
 
+# -------------------Statements for the instructions ---------------------
+instructions.heading=How to Play WIQ
+instructions.subtitle=Follow These Steps to Play WIQ!
+instructions.text=WIQ is a quiz game where you'll need to correctly answer a series of questions to earn points. Follow these steps to play:\n\n1. Register on the app if you haven't done so already.\n2. Log in with your username and password.\n3. Click the "Play" button to start a game.\n4. Answer the questions correctly to win points.\n5. Have fun and compete with your friends to see who is the best!\n\nFor each correct answer, you will receive 10 points plus the remaining time to answer it. For example, if you answer a question correctly and have 15 seconds left, your score for that question will be 25!\n\nGood luck and let the game begin!
+instructions.nav=Instructions
+
 
diff --git a/src/main/resources/messages_es.properties b/src/main/resources/messages_es.properties
@@ -165,4 +165,10 @@ modal.confirm=Confirmar
 
 # -------------------Statements for the page management---------------------
 page.first=Primera
-page.last=Última
+page.last=Última
+
+# -------------------Statements for the instructions ---------------------
+instructions.nav=Instrucciones
+instructions.heading=Como jugar a WIQ
+instructions.subtitle= ¡Sigue estos pasos para jugar a WIQ!
+instructions.text= WIQ es un juego de preguntas y respuestas en el que tendrás que responder correctamente a una serie de preguntas para ganar puntos. Sigue estos pasos para jugar:\n\n1. Regístrate en la aplicación si aún no lo has hecho.\n2. Inicia sesión con tu usuario y contraseña.\n3. Pulsa en el botón "Jugar" para comenzar una partida.\n4. Responde a las preguntas correctamente para ganar puntos.\n5. ¡Diviértete y compite con tus amigos para ver quién es el mejor!\n\nPor cada pregunta correcta, recibirás 10 puntos más el tiempo restante para contestarla, es decir, si contestas una pregunta correctamente y te quedan 15 segundos, tu puntuación de esa pregunta será de 25!\n\n¡Buena suerte y que empiece el juego!
diff --git a/src/main/resources/messages_fr.properties b/src/main/resources/messages_fr.properties
@@ -163,3 +163,9 @@ admin.monitoring=Surveillance
 page.first=Première
 page.last=Dernière
 
+# -------------------Statements for the instructions ---------------------
+instructions.heading=Comment jouer à WIQ
+instructions.subtitle=Suivez ces étapes pour jouer à WIQ !
+instructions.text=WIQ est un jeu de quiz où vous devez répondre correctement à une série de questions pour gagner des points. Suivez ces étapes pour jouer :\n\n1. Inscrivez-vous sur l'application si ce n'est pas déjà fait.\n2. Connectez-vous avec votre nom d'utilisateur et votre mot de passe.\n3. Cliquez sur le bouton "Jouer" pour commencer une partie.\n4. Répondez correctement aux questions pour gagner des points.\n5. Amusez-vous et compétissez avec vos amis pour voir qui est le meilleur !\n\nPour chaque réponse correcte, vous recevrez 10 points plus le temps restant pour répondre. Par exemple, si vous répondez correctement à une question et qu'il vous reste 15 secondes, votre score pour cette question sera de 25 !\n\nBonne chance et que le jeu commence !
+instructions.nav=Instructions
+
diff --git a/src/main/resources/templates/fragments/nav.html b/src/main/resources/templates/fragments/nav.html
@@ -28,6 +28,9 @@
                     <a sec:authorize="isAuthenticated()" class="dropdown-item" href="/ranking/playerRanking" th:text="#{navbar.ranking.player}"></a>
                 </div>
             </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/instructions" th:text="#{instructions.nav}"></a>
+            </li>
         </ul>
         <ul class="navbar-nav justify-content-end">
             <!-- Botones para cambiar de idioma -->
@@ -39,15 +42,15 @@
                 </a>
                 <div id="languageDropdownMenuButton" class="dropdown-menu" aria-labelledby="navbarDropdown">
                     <!-- Botón para cambiar a inglés -->
-                    <a class="dropdown-item" id="btnEnglish" value="EN">
+                    <a class="dropdown-item" id="btnEnglish" value="EN" style="cursor:pointer;">
                         <span th:text="#{navbar.toEnglish}"></span>
                     </a>
                     <!-- Botón para cambiar a español -->
-                    <a class="dropdown-item" id="btnSpanish" value="ES">
+                    <a class="dropdown-item" id="btnSpanish" value="ES" style="cursor:pointer;">
                         <span th:text="#{navbar.toSpanish}"></span>
                     </a>
                     <!-- Botón para cambiar a francés -->
-                    <a class="dropdown-item" id="btnFrench" value="FR">
+                    <a class="dropdown-item" id="btnFrench" value="FR" style="cursor:pointer;">
                         <span th:text="#{navbar.toFrench}"></span>
                     </a>
                 </div>

diff --git a/src/main/resources/templates/instructions.html b/src/main/resources/templates/instructions.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/head}"></head>
+<body class="d-flex flex-column min-vh-100">
+<nav th:replace="~{fragments/nav}"></nav>
+<canvas th:replace="~{fragments/background}"></canvas>
+<div class="mb-4 container-fluid d-flex justify-content-center align-items-center text-center text-white" style="height: 80vh;">
+    <div class="row">
+        <div class="col-md-12" id="textBlock">
+            <h2 class="display-3 mb-4" th:text="#{instructions.heading}"></h2>
+            <p class="lead mb-4" th:text="#{instructions.subtitle}"></p>
+        </div>
+    </div>
+</div>
+<footer th:replace="~{fragments/footer}"></footer>
+<script th:inline="javascript">
+/*<![CDATA[*/
+    $(document).ready(function(){
+        let message = /*[[#{instructions.text}]]*/ 'default message';
+        message.split('\n').forEach(function (line) {
+            $('#textBlock').append($('<p></p>').text(line));
+        });
+
+        $('#textBlock p:last').addClass('mb-4');
+    });
+/*]]>*/
+</script>
+</body>
+</html>