Merge branch 'FrontEnd-Integration' into front-end-laura

package.json

@@ -4,6 +4,7 @@
     "@material-ui/icons": "^4.11.3",
     "asciidoctor-emoji": "^0.5.0",
     "i18n": "^0.15.1",
+    "react-countdown": "^2.3.5",
     "react-router-dom": "^6.22.1"
   }
 }

webapp/src/components/GameMenu/GameMenu.css

@@ -0,0 +1,33 @@
+.menuButton {
+  width: 40%;
+  height: 45px;
+  background: darkblue;
+  border: none;
+  outline: none;
+  border-radius: 40px;
+  box-shadow: 0 0 10px black;
+  cursor:pointer;
+  font-size: 16px;
+  color: white;
+  font-weight: 700;
+  margin: 0.5em;
+  text-align: center;
+}
+
+.countdown {
+  font-weight: 500;
+  margin: 3em;
+}
+
+.topPanel{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.divMenu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}

webapp/src/components/GameMenu/GameMenu.js

@@ -1,28 +1,32 @@
 import "../../custom.css";
 import { Link } from "react-router-dom";
+import {useTranslation} from "react-i18next";
+
 export default function GameMenu() {
+  const[t, i18n] = useTranslation("global");
+
   return (
     <div className="divMenu">
-      <h2>Game Menu</h2>
-      <ButtonHistoricalData />
-      <ButtonNewGame />
+      <h2>{t("gameMenu.title")}</h2>
+      <ButtonHistoricalData t={t} />
+      <ButtonNewGame t={t}  />
     </div>
   );
   }
 
-  function ButtonHistoricalData() {
+  function ButtonHistoricalData({ t }) {
     function handleClick() {
       //ir a la vista de historical data
       alert("Historical Data");
     }
-    return <button className="menuButton" onClick={handleClick}> View Historical Data</button>;
+    return <button className="menuButton" onClick={handleClick}> {t("gameMenu.history_button")}</button>;
   }
 
-  function ButtonNewGame() {
+  function ButtonNewGame({t}) {
     return (
       <>
-        <Link  to="/questions">
-          <button className='create-game'>Create New Game</button>
+        <Link className="menuButton" to="/questions">
+        <h3> {t("gameMenu.new_game_button")}</h3>
         </Link>
       </>
       );

webapp/src/components/questionView/QuestionView.js

@@ -1,12 +1,15 @@
 import QuestionGenerator from './QuestionGenerator';
 import { useEffect, useState } from 'react';
 import "../../custom.css";
-
+import React from "react";
+import Countdown from "react-countdown";
+import {useTranslation} from "react-i18next";
 
 function QuestionView(){
     const questionGenerator = new QuestionGenerator();
     const [numQuestion, setnumQuestion] = useState(-1);
     const [questions, setQuestions] = useState([]);
+    const[t, i18n] = useTranslation("global");
 
     const generateQuestions = async (numQuestion) => {
         if (numQuestion < 0) {
@@ -32,23 +35,36 @@ function QuestionView(){
     <div className="question-view-container">
         {/*Nav*/}
         {numQuestion >= 0 ? 
-        <QuestionComponent questions={questions} numQuestion={numQuestion} handleClick={handleClick}/> :
+        <QuestionComponent t={t} questions={questions} numQuestion={numQuestion} handleClick={handleClick}/> :
         <h1>Please Wait a bit...</h1> }
-
-
     </div>);
 }
 
-function QuestionComponent({questions, numQuestion, handleClick}){
+function QuestionComponent({questions, numQuestion, handleClick, t}){
+    const renderer = ({seconds, completed }) => {
+        if (completed) {
+
+            return <span>{t("questionView.end_countdown")}</span>; // Rendered when countdown completes
+        } else {
+            return <span>{seconds} {t("questionView.seconds")}</span>; // Render countdown
+        }
+    };
+
     return (
         <>
+        <div className='topPanel'>
             <h2>{questions[numQuestion].getQuestion()}</h2>
-                <div className="answerPanel">
-                    {questions[numQuestion].getAnswers().map((item, index) => (
-                        <Answer key={index} text={item} onClick={handleClick}/>
-                    ))}
-                    <p>Question counter: {numQuestion}</p>
+                <div className="countdown">
+                            <Countdown date={Date.now() + 10000} renderer={renderer} />
                 </div>
+        </div>
+        <div className="answerPanel">
+            {questions[numQuestion].getAnswers().map((item, index) => (
+                <Answer key={index} text={item} onClick={handleClick}/>
+            ))}
+
+        </div>
+        <p>{t("questionView.question_counter")} {numQuestion}</p>
         </>
     );
 }

webapp/src/locales/en/messages_en.properties

@@ -0,0 +1,18 @@
+# messages_en.properties
+navbar.title = Know and Win!
+button.language = Español
+instructionsTitle=WIQ Instructions
+objective=Objective:
+objectiveDescription=The objective of the game is to answer as many questions correctly as possible.
+howToPlay=How to Play:
+howToPlayDescription1=The game consists of a series of questions.
+howToPlayDescription2=Read each question carefully.
+howToPlayDescription3=Choose the correct answer from the options provided.
+howToPlayDescription4=Click or tap on your selected answer to submit it.
+scoring=Scoring:
+scoringDescription1=Each correct answer earns you x points.
+scoringDescription2=Incorrect answers do not deduct points.
+timeLimit=Time Limit:
+timeLimitDescription=Some game modes may have a time limit for answering each question. Be quick and accurate to maximize your score.
+haveFun=Have Fun!:
+haveFunDescription=Enjoy the game and test your knowledge. Good luck!

webapp/src/translations/en/global.json

@@ -41,6 +41,16 @@
         "repeat_password_placeholder": "Repeat password",
         "register_button": "Register",
         "login_link": "Do you have an account? Login here."
+      },
+      "gameMenu":{
+        "history_button":"View Historical Data",
+        "new_game_button":"Create New Game",
+        "title":"Game Menu"
+      },
+      "questionView":{
+        "seconds":"seconds",
+        "question_counter":"Question counter :",
+        "end_countdown":"Time's up!"
       }
 }
 

webapp/src/translations/es/global.json

@@ -45,6 +45,15 @@
           "repeat_password_placeholder": "Repetir contraseña",
           "register_button": "Registrarse",
           "login_link": "¿Ya tienes una cuenta? Inicia sesión aquí."
+    },
+     "gameMenu":{
+      "history_button":"Ver Historial",
+      "new_game_button":"Crear nuevo juego",
+      "title":"Menú del Juego"
+    },"questionView":{
+      "seconds":"segundos",
+      "question_counter":"Número de pregunta : ",
+      "end_countdown":"¡Se acabó el tiempo!"
     }