Added a counter for the questions and internacionalized manu and ques…

…tion views

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

@@ -11,8 +11,19 @@
   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;

webapp/src/components/GameMenu/GameMenu.js

@@ -1,29 +1,32 @@
 import './GameMenu.css';
 import { Link } from "react-router-dom";
-import QuestionView from '../questionView/QuestionView';
+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 className="menuButton" to="/questions">
-        <button >Create New Game</button>
+        <h3> {t("gameMenu.new_game_button")}</h3>
         </Link>
       </>
       );

webapp/src/components/questionView/QuestionView.js

@@ -2,12 +2,15 @@ import Question from './Question';
 import QuestionGenerator from './QuestionGenerator';
 import { useEffect, useState } from 'react';
 import './QuestionView.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) {
@@ -33,23 +36,36 @@ function QuestionView(){
     <div className="">
         {/*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

@@ -16,4 +16,3 @@ 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!"
     }