-
-
-
+ <>
+
-
-
-
+
+
| Pregunta | -Opción correcta | -Opción incorrecta 1 | -Opción incorrecta 2 | -Opción incorrecta 3 | -
|---|---|---|---|---|
| {cell} | +
-
-
-
+
+ Historial de Partidas:
-| Fecha | -Tiempo de partida (s) | -Porcentaje de Aciertos | -Número de Preguntas | -Número de Aciertos | -Número de Fallos | -|||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {game.date} | -{game.duration} | -{game.percentage}% | -{game.totalQuestions} | -{game.correctAnswers} | -{game.incorrectAnswers} | -|||||||||||||
|
- Pregunta {index + 1}: {question.question} -Respuesta Correcta: {question.correctAnswer} -Respuesta del Usuario: {question.userAnswer} -La respuesta fue: {question.correctAnswer === question.userAnswer ? 'Correcta' : 'Incorrecta'} - |
+ <>
+ ||||||||||||||||||
| + | Fecha | +Tiempo de partida | +Porcentaje de Aciertos | +Número de Preguntas | +Número de Aciertos | +Número de Fallos | +
|---|---|---|---|---|---|---|
| {formatDate(game.date)} | +{game.duration} segundos | +{game.percentage.toFixed(2)}% | +{game.totalQuestions} | +{game.correctAnswers} | +{game.incorrectAnswers} |
Pregunta {qIndex + 1}: {question.question}
+Respuesta Correcta: {question.correctAnswer}
+Respuesta del Usuario: {question.userAnswer}
+La respuesta fue: {question.correctAnswer === question.userAnswer ? 'Correcta' : 'Incorrecta'}
+
-
- Inicio de sesión
-
- setUsername(e.target.value)}
- />
- setPassword(e.target.value)}
- />
-
- setError('')} message={`Error: ${error}`} />
- )}
-
- )}
+
+
+ Inicio de sesión
+
+ setUsername(e.target.value)}
+ />
+ setPassword(e.target.value)}
+ />
+
+ setError('')} message={`Error: ${error}`} />
+ )}
+
-
- ¡Bienvenido a WIQ 2024!
-
+ <>
+
- Puedes comenzar la partida o ver tu historial.
+
+
+
+
+
+
+
+
+
+
)
}
-export default MainPage;
\ No newline at end of file
+export default MainPage;
diff --git a/webapp/src/components/MainPage.test.js b/webapp/src/components/MainPage.test.js
new file mode 100644
index 00000000..68dc9eca
--- /dev/null
+++ b/webapp/src/components/MainPage.test.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import MainPage from './MainPage';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+const mockAxios = new MockAdapter(axios);
+
+describe('MainPage component', () => {
+ beforeEach(() => {
+ mockAxios.reset();
+ });
+
+ it('muestra la página principal correctamente', async () => {
+
+ render(
+ );
+
+ const element1 = screen.getByText(/¡Bienvenido a/);
+ const element2 = screen.getByText(/WIQ 2024!/);
+ const newGameButton = screen.getByRole('button', { name: 'Nuevo juego' });
+ const historicalQuestionsButton = screen.getByRole('button', { name: 'Historial de preguntas' });
+ const historialUserDataButton = screen.getByRole('button', { name: 'Historial de usuario' });
+ const registerUsersButton = screen.getByRole('button', { name: 'Usuarios registrados' });
+
+ // Verifica si el elemento se encuentra en el DOM
+ expect(element1).toBeInTheDocument();
+ expect(element2).toBeInTheDocument();
+
+ // Simulate user input
+ await act(async () => {
+ fireEvent.click(newGameButton);
+ fireEvent.click(historicalQuestionsButton);
+ fireEvent.click(historialUserDataButton);
+ fireEvent.click(registerUsersButton);
+ });
+ });
+});
+
+
diff --git a/webapp/src/components/Navbar.css b/webapp/src/components/Navbar.css
new file mode 100644
index 00000000..8323e580
--- /dev/null
+++ b/webapp/src/components/Navbar.css
@@ -0,0 +1,25 @@
+.nav-link {
+ color: #4c8dbf;
+ font-weight: 400;
+}
+
+.nav-link:hover {
+ color: #BCC3C5;
+ font-weight: 400;
+}
+
+.navbar-brand {
+ color: #0c3667;
+ font-weight: 900;
+ font-size: 2rem;
+}
+
+nav, .dropdown-menu, .dropdown-item {
+ background-color: #4c8dbf;
+ border: none;
+}
+
+
+.dropdown-item {
+ color: #4c8dbf;
+}
diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js
new file mode 100644
index 00000000..9ebb3bb3
--- /dev/null
+++ b/webapp/src/components/Navbar.js
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { Link ,useNavigate} from 'react-router-dom';
+import './Navbar.css';
+
+const Navbar = () => {
+ const [historialDropdownOpen, setHistorialDropdownOpen] = useState(false);
+ const navigate = useNavigate();
+ const toggleHistorialDropdown = () => {
+ setHistorialDropdownOpen(!historialDropdownOpen);
+ };
+
+ const handleLogout = () => {
+ localStorage.removeItem('username');
+ navigate("/");
+ };
+
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/webapp/src/components/RegisteredUsers.js b/webapp/src/components/RegisteredUsers.js
new file mode 100644
index 00000000..ed4347da
--- /dev/null
+++ b/webapp/src/components/RegisteredUsers.js
@@ -0,0 +1,60 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { Container, Typography} from '@mui/material';
+import Navbar from './Navbar';
+
+const RegisteredUsers = () => {
+ const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+ const [registeredUsers, setRegisteredUsers] = useState([]);
+
+ useEffect(() => {
+ handleShowHistory();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const handleShowHistory = async () => {
+ try{
+ // It makes a petition to the api and store the response
+ const response = await axios.get(`${apiEndpoint}/getregisteredusers`, { });
+ setRegisteredUsers(response.data);
+ }catch (error){
+ console.error('Error:', error);
+ }
+ }
+
+ return (
+
+ <>
+
+
+
+
+
+ );
+};
+
+export default RegisteredUsers;
\ No newline at end of file
diff --git a/webapp/src/components/ScoreBoard.js b/webapp/src/components/ScoreBoard.js
new file mode 100644
index 00000000..de897b24
--- /dev/null
+++ b/webapp/src/components/ScoreBoard.js
@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Container, Typography } from '@mui/material';
+import Navbar from './Navbar';
+
+const ScoreBoard = () => {
+ const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+ const [scoreboard, setScoreboard] = useState([]);
+
+ useEffect(() => {
+ loadScoreboard();
+ // eslint-disable-next-line
+ }, []);
+
+ const loadScoreboard = async () => {
+ try {
+ const response = await axios.get(`${apiEndpoint}/getScoreBoard`);
+ setScoreboard(response.data);
+ } catch (error) {
+ console.error('Error:', error);
+ }
+ };
+
+ return (
+
+ <>
+
+
+
+ );
+};
+
+export default ScoreBoard;
diff --git a/webapp/src/index.css b/webapp/src/index.css
index ec2585e8..43a50eba 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -1,3 +1,10 @@
+html, body, main, #root {
+ background-color: #a5b8d4;
+ overflow: hidden;
+}
+
+
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,9 +12,42 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ overflow: hidden;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+
+div[title="main"]>h1{
+ color: white;
+}
+
+
+.btn-show-more {
+ background-color: #1f3c86c3;
+ color: white;
+ font-weight: 600;
+ border-radius: 20%;
+ margin: 0.5rem;
+}
+
+
+.containerTable {
+ overflow-y: auto;
+}
+
+
+.custom-td{
+ background-color: #1f3c86c3;
+ color: white;
+ font-weight: 600;
+}
+
+.custom-td th{
+ background-color: #1f3c86c3;
+ color: white;
+ font-weight: 600;
+}
\ No newline at end of file
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 9f794123..b2d639f9 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -2,23 +2,32 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import {Route, Routes, MemoryRouter as Router} from "react-router-dom";
-import './index.css';
import App from './App';
import Game from './components/Game';
import HistoricalData from './components/HistoricalData';
import MainPage from './components/MainPage';
import HistoricalUserData from './components/HistoricalUserData';
+import RegisteredUsers from './components/RegisteredUsers';
+import ScoreBoard from './components/ScoreBoard';
+
+import './index.css';
+import 'animate.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
}>
+
+ ¡Bienvenido a
+
+
+ WIQ 2024!
-
-
-
-
-
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ Usuarios registrados
+
+
+
+
+
+ | Nombre de usuario | +Fecha de registro | +
|---|---|
| {cell} | + ))} +
+
+ Ranking de Puntuaciones
+
+
+
+
+
+ | Puesto | +Usuario | +Preguntas Totales Acertadas | +Preguntas Totales Falladas | +Puntos | +
|---|---|---|---|---|
| {index + 1} | +{user.username} | +{user.totalCorrect} | +{user.totalIncorrect} | +{user.points} | +