Added Navigability from Login to Game Menu to Question View and fixed…

… some things. There is a need for fixing css files and internacionalizing Game Menu.

webapp/src/App.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import Container from '@mui/material/Container';
 import QuestionView from './components/questionView/QuestionView';
-import GameMenu from './components/GameMenu';
+import GameMenu from './components/GameMenu/GameMenu';
 import Navbar from './components/fragments/NavBar';
-import Home from './components/home/Home';
+import Home from './components/Home/Home';
 import Login from './components/loginAndRegistration/Login';
 import AddUser from './components/loginAndRegistration/AddUser';
 import Instructions from './components/Instructions'; 

webapp/src/components/GameMenu/GameMenu.css

@@ -1,22 +1,22 @@
-button{
-    width: 100%;
-    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;
-  }
+.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;
+}
 
-div{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
+.divMenu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
 }

webapp/src/components/GameMenu/GameMenu.js

@@ -1,8 +1,10 @@
 import './GameMenu.css';
+import { Link } from "react-router-dom";
+import QuestionView from '../questionView/QuestionView';
 export default function GameMenu() {
   return (
-    <div>
-      <h2>Game</h2>
+    <div className="divMenu">
+      <h2>Game Menu</h2>
       <ButtonHistoricalData />
       <ButtonNewGame />
     </div>
@@ -12,16 +14,18 @@ export default function GameMenu() {
   function ButtonHistoricalData() {
     function handleClick() {
       //ir a la vista de historical data
-      alert("Historical DAta");
+      alert("Historical Data");
     }
-    return <button onClick={handleClick}>Historical Data</button>;
+    return <button className="menuButton" onClick={handleClick}> View Historical Data</button>;
   }
 
   function ButtonNewGame() {
-    function handleClick() {
-      //ir a  la vista de la primera pregunta
-      alert("New game");
-    }
-    return <button onClick={handleClick}>Create New Game</button>;
+    return (
+      <>
+        <Link className="menuButton" to="/questions">
+        <button >Create New Game</button>
+        </Link>
+      </>
+      );
   }
 

webapp/src/components/questionView/QuestionView.css

@@ -1,4 +1,4 @@
-button{
+.answerButton {
     width: 100%;
     height: 45px;
     background: darkblue;
@@ -12,15 +12,15 @@ button{
     font-weight: 700;
 }
 
-div {
+.answerPanel  {
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* 2 columns */
     grid-template-rows: repeat(2, 1fr); /* 2 rows */
     gap: 10px; /* Adjust the gap between grid items */
 }
 
 /* Adjust width of child elements */
-div > * {
+.answerPanel div > * {
     width: 100%; /* Adjust as needed */
     margin:1em;
 }

webapp/src/components/questionView/QuestionView.js

@@ -3,6 +3,7 @@ import QuestionGenerator from './QuestionGenerator';
 import { useEffect, useState } from 'react';
 import './QuestionView.css';
 
+
 function QuestionView(){
     const questionGenerator = new QuestionGenerator();
     const [numQuestion, setnumQuestion] = useState(-1);
@@ -29,11 +30,11 @@ function QuestionView(){
     useEffect(() => {generateQuestions(numQuestion)}, []);
 
     return (
-    <div>
+    <div className="">
         {/*Nav*/}
         {numQuestion >= 0 ? 
         <QuestionComponent questions={questions} numQuestion={numQuestion} handleClick={handleClick}/> :
-        <h1>Please Wait a bit</h1> }
+        <h1>Please Wait a bit...</h1> }
 
 
     </div>);
@@ -42,20 +43,20 @@ function QuestionView(){
 function QuestionComponent({questions, numQuestion, handleClick}){
     return (
         <>
-        <p>{questions[numQuestion].getQuestion()}</p>
-        <div>
-        {questions[numQuestion].getAnswers().map((item, index) => (
-            <Answer key={index} text={item} onClick={handleClick}/>
-        ))}
-        <p>Question counter: {numQuestion}</p>
-        </div>
+            <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>
         </>
     );
 }
 
 function Answer({text, onClick}){
     return (
-        <button onClick={onClick}>{text}</button>
+        <button className="answerButton" onClick={onClick}>{text}</button>
     );
 }