diff --git a/webapp/src/App.js b/webapp/src/App.js index 12edaa06..36fc5c07 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -19,6 +19,7 @@ import PrincipalView from './components/principalView/PrincipalView'; import Room from './components/rooms/Room'; // Importa el componente de sala import CreateRoomForm from './components/rooms/CreateRoom'; // Importa el componente para crear sala import JoinRoomForm from './components/rooms/JoinRoom'; // Importa el componente para unirse a sala +import { Ranking } from './components/ranking/Ranking'; const App = () => { @@ -62,6 +63,11 @@ const App = () => { } /> + + + + } /> } /> } /> diff --git a/webapp/src/components/navbar/NavBar.js b/webapp/src/components/navbar/NavBar.js index 72b2f4fa..dcf37cc5 100644 --- a/webapp/src/components/navbar/NavBar.js +++ b/webapp/src/components/navbar/NavBar.js @@ -1,5 +1,5 @@ import React, { useContext, useState } from 'react'; -import { AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem, ListItemIcon , Switch } from '@mui/material'; +import { Divider, AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem, ListItemIcon , Switch } from '@mui/material'; import { styled } from '@mui/system'; import { Link } from 'react-router-dom'; import { AuthContext } from '../authcontext'; @@ -113,12 +113,17 @@ const NavBar = ({ setDarkMode, darkMode}) => { {username} - - {t('logout')} - + {t('history')} + + {t('ranking')} + + + + {t('logout')} + diff --git a/webapp/src/components/ranking/Ranking.js b/webapp/src/components/ranking/Ranking.js new file mode 100644 index 00000000..f38ad9ce --- /dev/null +++ b/webapp/src/components/ranking/Ranking.js @@ -0,0 +1,27 @@ +import React from 'react'; + +export function Ranking({darkMode}){ + // Aquí puedes agregar la lógica para obtener los datos del ranking de usuarios + const users = [ + { name: 'Usuario 1', dailyQuestions: 10 }, + { name: 'Usuario 2', dailyQuestions: 8 }, + { name: 'Usuario 3', dailyQuestions: 5 }, + // Agrega más usuarios según sea necesario + ]; + + // Ordenar los usuarios por número de preguntas diarias acertadas + users.sort((a, b) => b.dailyQuestions - a.dailyQuestions); + + return ( +
+

Ranking de Usuarios

+
    + {users.map((user, index) => ( +
  1. + {user.name} - {user.dailyQuestions} preguntas acertadas +
  2. + ))} +
+
+ ); +} \ No newline at end of file diff --git a/webapp/src/internacionalizacion/locales/en/translation.json b/webapp/src/internacionalizacion/locales/en/translation.json index 01799f20..9a00913e 100644 --- a/webapp/src/internacionalizacion/locales/en/translation.json +++ b/webapp/src/internacionalizacion/locales/en/translation.json @@ -39,6 +39,8 @@ "timeUnitHours" : " hours ", "questionsPercentage": " %", + "ranking": "Ranking", + "loginWelcomeMessage": "Welcome ", "loginDate": "Your account was created on ", "loginMessage": "Log in", diff --git a/webapp/src/internacionalizacion/locales/es/translation.json b/webapp/src/internacionalizacion/locales/es/translation.json index a83a9e5d..09a0fe34 100644 --- a/webapp/src/internacionalizacion/locales/es/translation.json +++ b/webapp/src/internacionalizacion/locales/es/translation.json @@ -39,6 +39,8 @@ "timeUnitHours" : " horas ", "questionsPercentage": " %", + "ranking": "Ranking", + "loginWelcomeMessage": "Bienvenido ", "loginDate": "Tu cuenta fue creada el ", "loginMessage": "Inicia sesión",