Merge pull request #142 from Arquisoft/Implementation-David

Arreglados componentes visuales y ranking
Arquisoft · Apr 24, 2024 · 3bf7180 · 3bf7180
2 parents bdded39 + 77c552c
commit 3bf7180
Show file tree

Hide file tree

Showing 17 changed files with 365 additions and 178 deletions.
diff --git a/gamehistoryservice/gamehistory.js b/gamehistoryservice/gamehistory.js
@@ -201,6 +201,31 @@ async function getEndGameStats(userId) {
     }
 }
 
+app.get('/ranking', async (req, res) => {
+    try {
+        const sortBy = req.query.sortBy || 'ratio'; 
+        const limit = req.query.userLimit || 10; 
+
+        const topUsers = await GameHistory.find()
+            .sort({ [sortBy]: -1 }) 
+            .limit(limit); 
+
+        const response = topUsers.map(user => ({
+            userId: user.userId,
+            totalGamesPlayed: user.totalGamesPlayed,
+            totalQuestionsAnswered: user.totalQuestionsAnswered,
+            totalRightQuestions: user.totalRightQuestions,
+            ratio: `${user.ratio}%`,
+            totalTime: `${user.totalTime}s`
+        }));
+
+        res.json(response);
+
+    } catch (error) {
+        res.status(400).json({ error: `Error al obtener el ranking: ${error.message}` });
+    }
+});
+
 
 const server = app.listen(port, () => {
     console.log(`Stats Service listening at http://localhost:${port}`);

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
@@ -141,6 +141,15 @@ app.get('/topUsers', async (req, res) => {
   }
 });
 
+app.get('/ranking', async (req, res) => {
+  try {
+    const response = await axios.get(gamehistoryUrl+'/ranking?sortBy=' + req.query.sortBy + "&userLimit=" +  req.query.userLimit, req.body);
+    res.json(response.data);
+  } catch (error) {
+    res.status(error.response.status).json({ error: error.response.data.error });
+  }
+});
+
 app.get('/endgamestats', async (req, res) => {
   try {
     const URL = gamehistoryUrl + '/endgamestats?username=' + req.query.username;

diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -7,7 +7,6 @@ import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
 import './App.css';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import {Button, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
 
@@ -19,8 +18,6 @@ const theme = createTheme({
   },
 });
 
-
-
 function App() {
 
   const [t, i18n] = useTranslation("global");
@@ -55,23 +52,6 @@ function App() {
               </Link>
             )}
           </Typography>
-          <div style={{ position: 'absolute', top: 0, right: 0 }}>
-            {/* Aquí coloca tus dos botones */}
-            <Tooltip title="Español">
-            <Button variant="contained" color="inherit" 
-              style={{ background: 'white', border: 'none', padding: 0, marginRight: '10px' }} 
-              onClick={() => i18n.changeLanguage('es')}>
-                <img src={require('./components/images/esp.png')} style={{ width: '50px', height: '50px' }} alt="Imagen español"/>
-            </Button>
-            </Tooltip>
-            <Tooltip title="Inglés">
-            <Button variant="contained" color="inherit" 
-              style={{ background: 'white', border: 'none', padding: 0, marginRight: '10px' }} 
-              onClick={() => i18n.changeLanguage('en')}>
-                <img src={require('./components/images/ing.png')} style={{ width: '50px', height: '50px' }} alt="Imagen español"/>
-            </Button>
-            </Tooltip>
-          </div>
         </Container>
     </ThemeProvider>
   );

diff --git a/webapp/src/components/AllQuestions.js b/webapp/src/components/AllQuestions.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 import React, { useState, useEffect, useCallback } from 'react';
 import { Container, Typography, TableContainer, Table, TableHead, TableBody, TableRow, TableCell, Paper, Snackbar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import '../App.css';
 
 const AllQuestions = () => {
 
@@ -31,7 +32,6 @@ const AllQuestions = () => {
         <Container component="main" maxWidth="xxl"
         sx={{
             backgroundColor: '#F3D3FA',
-            borderRadius: '10px',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',

diff --git a/webapp/src/components/AllUsers.js b/webapp/src/components/AllUsers.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 import React, { useState, useEffect, useCallback } from 'react';
 import { Container, Typography, TableContainer, Table, TableHead, TableBody, TableRow, TableCell, Paper, Snackbar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import '../App.css';
 
 const AllUsers = () => {
 
@@ -34,7 +35,6 @@ const AllUsers = () => {
         <Container component="main" maxWidth="xxl"
         sx={{
             backgroundColor: '#F3D3FA',
-            borderRadius: '10px',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',

diff --git a/webapp/src/components/EndGame.js b/webapp/src/components/EndGame.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
-import { Container, Box, Typography, Grid, Button} from '@mui/material';
+import { Container, Box, Typography, Grid, Button, Snackbar} from '@mui/material';
 import { useUser } from './UserContext';
 import { useNavigate } from 'react-router-dom';
 import HomeIcon from '@mui/icons-material/Home';
@@ -50,6 +50,7 @@ const EndGame = () => {
   return (
     <Container component="main" maxWidth="xl"
     sx={{
+      marginTop: 10,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',

diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
@@ -25,6 +25,7 @@ const Game = () => {
   const [answerCorrect, setAnswerCorrect] = useState(false);
   const [answeredQuestions,setAnsweredQuestions] = useState(0);
   const [isTimeRunning, setIsTimeRunning] = useState(true);
+  const [highlightedCorrectOption, setHighlightedCorrectOption] = useState('');
   const [waiting, setWaiting] = useState(false);
 
   const location = useLocation();
@@ -122,6 +123,11 @@ const Game = () => {
       setError(error.response.data.error);
     }
 
+    if (!answerCorrect) {
+      setHighlightedCorrectOption(correctOption);
+    } else {
+        setHighlightedCorrectOption('');  
+    }
 
     if (answeredQuestions>= MAX_PREGUNTAS) {
       setTimeout(() => {
@@ -140,6 +146,7 @@ const Game = () => {
   return (
     <Container component="main" maxWidth="xxl"
             sx={{
+                marginTop: 10,
                 backgroundColor: '#F3D3FA',
                 borderRadius: '10px',
                 display: 'flex',
@@ -175,13 +182,25 @@ const Game = () => {
         </div>
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px', alignItems: 'center', marginTop: '20px' }}>
           {options.map((option, index) => (
-            <Button key={index } style={{ 
+            <Button
+              key={index}
+              style={{
                 width: '100%',
                 height: '17vh',
-                backgroundColor: selectedOption === option ? (answerCorrect ? '#00C853' : '#FF1744') : '#FCF5B8',
-                color: '#413C3C', 
-                fontWeight: 'bold'
-              }} variant="contained" onClick={!isTimeRunning ? null : () => {handleOptionClick(option);}}>
+                backgroundColor:
+                  selectedOption === option
+                    ? answerCorrect
+                      ? '#00C853' // Green for correct answer
+                      : '#FF1744' // Red for incorrect answer
+                    : highlightedCorrectOption === option
+                    ? '#00C853' // Green for correct option if user was wrong
+                    : '#FCF5B8', // Default background color
+                color: '#413C3C',
+                fontWeight: 'bold',
+              }}
+              variant="contained"
+              onClick={!isTimeRunning ? null : () => handleOptionClick(option)}
+            >
               {option}
             </Button>
           ))}

diff --git a/webapp/src/components/GameConfiguration.js b/webapp/src/components/GameConfiguration.js
@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { useNavigate} from 'react-router-dom';
-import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { Container, Typography, TextField, Button, Snackbar, FormControl, InputLabel, Select, MenuItem} from '@mui/material';
 import '../App.css';
 import { useTranslation } from 'react-i18next';
 
@@ -77,12 +77,14 @@ const GameConfiguration = () => {
     return (
         <Container component="main" maxWidth="xl"
                 sx={{
-                    marginTop: 25,
+                    marginTop: 10,
                     borderRadius: '10px',
                     display: 'flex',
                     flexDirection: 'column',
                     justifyContent: 'center',
                     alignItems: 'center',
+                    height: '100vh', 
+                    width: '100%',
                 }}>
             <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
                 <Typography component="h1" variant="h5" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
@@ -97,8 +99,8 @@ const GameConfiguration = () => {
                     value={valueQuestion}
                     type="number"
                     step="1"
+                    sx={{  width: '50vh', marginBottom: 4, marginTop: 3, backgroundColor: '#FFFFFF'}}
                     sx={{ width: '40vh',marginBottom: 4, marginTop: 3, backgroundColor: '#FFFFFF'}}
-
                 inputProps={{
                     inputMode: 'numeric',
                     pattern: '[0-9]*',
@@ -126,15 +128,21 @@ const GameConfiguration = () => {
             <Typography component="p" variant="p" align="center" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
                 {t("textoTematicas")}
             </Typography>
-            <div>
-                <select onChange={handleOptionSelect}>
-                    <option value="Todas">{t("tematicaTodas")}</option>
-                    <option value="Geografia">{t("tematicaGeo")}</option>
-                    <option value="Cultura">{t("tematicaCult")}</option>
-                    <option value="Informatica">{t("tematicaInf")}</option>
-                    <option value="Personajes">{t("tematicaPersonajes")}</option>
-                </select>
-            </div>
+            <FormControl fullWidth sx={{ width: '50vh', marginBottom: 2, backgroundColor: '#FFFFFF'}}> 
+                <InputLabel id="themes">Temáticas</InputLabel>
+                <Select
+                    defaultValue="Todas"
+                    onChange={handleOptionSelect}
+                    label="Temáticas"
+                    labelId="themes"
+                >
+                    <MenuItem value="Todas">{t("tematicaTodas")}</MenuItem>
+                    <MenuItem value="Geografia">{t("tematicaGeo")}</MenuItem>
+                    <MenuItem value="Cultura">{t("tematicaCult")}</MenuItem>
+                    <MenuItem value="Informatica">{t("tematicaInf")}</MenuItem>
+                    <MenuItem value="Personajes">{t("tematicaPersonajes")}</MenuItem>
+                </Select>
+            </FormControl>
             <Button variant="contained" color="primary" sx={{marginTop: 4,marginBottom: 4, backgroundColor: '#FCF5B8',  color: '#413C3C',  fontWeight: 'bold'}}
                 onClick={configureAndStart}>
                 {t("botonJugar")}

diff --git a/webapp/src/components/PantallaInicioAdmin.js b/webapp/src/components/PantallaInicioAdmin.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Container, Button, Box, Snackbar } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import '../App.css';
 
 
 const PantallaInicio = () => {
@@ -31,7 +32,6 @@ const PantallaInicio = () => {
         <Container component="main" maxWidth="xxl"
             sx={{
                 backgroundColor: '#F3D3FA',
-                borderRadius: '10px',
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'center',

diff --git a/webapp/src/components/Perfil.js b/webapp/src/components/Perfil.js
@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Container, Typography, TableContainer, Table, TableHead, TableBody, TableRow, TableCell, Paper, Snackbar } from '@mui/material';
 import { useUser } from './UserContext';
 import { useTranslation } from 'react-i18next';
+import '../App.css';
 
 
 const Perfil = () => {
@@ -40,7 +41,6 @@ const Perfil = () => {
         <Container component="main" maxWidth="xxl"
         sx={{
             backgroundColor: '#F3D3FA',
-            borderRadius: '10px',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',