diff --git a/webapp/src/App.js b/webapp/src/App.js index 6c402cbf..29e0f7fe 100644 --- a/webapp/src/App.js +++ b/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'; diff --git a/webapp/src/components/GameMenu/GameMenu.css b/webapp/src/components/GameMenu/GameMenu.css index 6d193db1..db52042c 100644 --- a/webapp/src/components/GameMenu/GameMenu.css +++ b/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; } \ No newline at end of file diff --git a/webapp/src/components/GameMenu/GameMenu.js b/webapp/src/components/GameMenu/GameMenu.js index 587c6453..c5b1169d 100644 --- a/webapp/src/components/GameMenu/GameMenu.js +++ b/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 ( -
-

Game

+
+

Game Menu

@@ -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 ; + return ; } function ButtonNewGame() { - function handleClick() { - //ir a la vista de la primera pregunta - alert("New game"); - } - return ; + return ( + <> + + + + + ); } \ No newline at end of file diff --git a/webapp/src/components/questionView/QuestionView.css b/webapp/src/components/questionView/QuestionView.css index d823940f..035cd898 100644 --- a/webapp/src/components/questionView/QuestionView.css +++ b/webapp/src/components/questionView/QuestionView.css @@ -1,4 +1,4 @@ -button{ +.answerButton { width: 100%; height: 45px; background: darkblue; @@ -12,7 +12,7 @@ button{ font-weight: 700; } -div { +.answerPanel { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 columns */ grid-template-rows: repeat(2, 1fr); /* 2 rows */ @@ -20,7 +20,7 @@ div { } /* Adjust width of child elements */ -div > * { +.answerPanel div > * { width: 100%; /* Adjust as needed */ margin:1em; } diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js index c939763f..e116f32b 100644 --- a/webapp/src/components/questionView/QuestionView.js +++ b/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 ( -
+
{/*Nav*/} {numQuestion >= 0 ? : -

Please Wait a bit

} +

Please Wait a bit...

}
); @@ -42,20 +43,20 @@ function QuestionView(){ function QuestionComponent({questions, numQuestion, handleClick}){ return ( <> -

{questions[numQuestion].getQuestion()}

-
- {questions[numQuestion].getAnswers().map((item, index) => ( - - ))} -

Question counter: {numQuestion}

-
+

{questions[numQuestion].getQuestion()}

+
+ {questions[numQuestion].getAnswers().map((item, index) => ( + + ))} +

Question counter: {numQuestion}

+
); } function Answer({text, onClick}){ return ( - + ); }