From d7f3362124e24529b8b1d0c931a4d8eedad1f440 Mon Sep 17 00:00:00 2001 From: Alfonso Date: Tue, 23 Apr 2024 23:40:21 +0200 Subject: [PATCH 1/8] Adding more graphics --- gameservice/game-service.js | 3 +++ webapp/src/components/Participation.jsx | 11 ++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/gameservice/game-service.js b/gameservice/game-service.js index 03607c9d..12d09d0d 100644 --- a/gameservice/game-service.js +++ b/gameservice/game-service.js @@ -152,6 +152,9 @@ app.get('/getParticipation/:userId', async (req, res) => { correctAnswers: { $sum: "$pAcertadas" }, incorrectAnswers: { $sum: "$pFalladas" }, totalTime: { $sum: "$totalTime" }, + gameModes: { + $push: { gameMode: "$gameMode", totalGames: 1 } // Guarda el modo de juego y el número de partidas en un array + } }, }, ]); diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx index 7b0a727c..1e79df66 100644 --- a/webapp/src/components/Participation.jsx +++ b/webapp/src/components/Participation.jsx @@ -9,7 +9,7 @@ import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; -import { PieChart, Pie, Tooltip, Cell } from 'recharts'; +import { PieChart, Pie, Tooltip, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend } from 'recharts'; const gatewayUrl = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"; @@ -92,6 +92,15 @@ export const Participation = ({ goTo }) => { + + + + + + + + + ) : ( From df41f84b822183504400a8c1ca6873f33286a9c7 Mon Sep 17 00:00:00 2001 From: Alfonso Date: Thu, 25 Apr 2024 17:31:27 +0200 Subject: [PATCH 2/8] updated bar graphic --- gameservice/game-service.js | 20 ++++++++++++++++---- webapp/src/components/Participation.jsx | 15 ++++++++++----- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/gameservice/game-service.js b/gameservice/game-service.js index 12d09d0d..f5ee1a04 100644 --- a/gameservice/game-service.js +++ b/gameservice/game-service.js @@ -148,16 +148,28 @@ app.get('/getParticipation/:userId', async (req, res) => { { $group: { _id: null, - totalGames: { $sum: 1 }, //$sum -> Retorna la suma de los valores numéricos + totalGames: { $sum: 1 }, correctAnswers: { $sum: "$pAcertadas" }, incorrectAnswers: { $sum: "$pFalladas" }, totalTime: { $sum: "$totalTime" }, - gameModes: { - $push: { gameMode: "$gameMode", totalGames: 1 } // Guarda el modo de juego y el número de partidas en un array + classic: { + $sum: { $cond: [{ $eq: ["$gameMode", "classic"] }, 1, 0] } + }, + infinite: { + $sum: { $cond: [{ $eq: ["$gameMode", "infinite"] }, 1, 0] } + }, + threeLife: { + $sum: { $cond: [{ $eq: ["$gameMode", "threeLife"] }, 1, 0] } + }, + category: { + $sum: { $cond: [{ $eq: ["$gameMode", "category"] }, 1, 0] } + }, + custom: { + $sum: { $cond: [{ $eq: ["$gameMode", "custom"] }, 1, 0] } } }, }, - ]); + ]); if (participationData.length === 0 || (participationData.length > 0 && participationData[0].totalGames === 0)) { // No se encontraron datos para el usuario diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx index 1e79df66..a96f330a 100644 --- a/webapp/src/components/Participation.jsx +++ b/webapp/src/components/Participation.jsx @@ -92,14 +92,19 @@ export const Participation = ({ goTo }) => { - - + , value: participationData.classic, fill: "#82ca9d" }, + { name: , value: participationData.infinite, fill: "#ff6b6b" }, + { name: , value: participationData.threeLife, fill: "#ffc658" }, + { name: , value: participationData.category, fill: "#8884d8" }, + { name: , value: participationData.custom, fill: "#8884d8" }, + ]}> - + - - + + From d732a7416cd825437eb731549332ea6098dae165 Mon Sep 17 00:00:00 2001 From: Alfonso Date: Fri, 26 Apr 2024 17:57:35 +0200 Subject: [PATCH 3/8] updating participation --- webapp/src/components/Participation.jsx | 140 ++++++++++++------------ webapp/src/test/Participation.test.js | 2 +- 2 files changed, 74 insertions(+), 68 deletions(-) diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx index a96f330a..8d93c71a 100644 --- a/webapp/src/components/Participation.jsx +++ b/webapp/src/components/Participation.jsx @@ -3,6 +3,7 @@ import axios from 'axios'; import '../css/participation.css'; import { SessionContext } from '../SessionContext'; import { FormattedMessage } from 'react-intl'; +import Typography from '@mui/material/Typography'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; @@ -10,6 +11,7 @@ import TableContainer from '@mui/material/TableContainer'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import { PieChart, Pie, Tooltip, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend } from 'recharts'; +import { Card } from '@mui/material'; const gatewayUrl = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"; @@ -43,75 +45,79 @@ export const Participation = ({ goTo }) => { return (
-

+ + + - {loading ? ( -

- ) : ( - participationData !== null ? ( -
- - - - - - {participationData.totalGames} - - - - {participationData.correctAnswers} - - - - {participationData.incorrectAnswers} - - - - {participationData.totalTime} - - -
-
-
- - , value: participationData.correctAnswers }, - { name: , value: participationData.incorrectAnswers } - ]} - dataKey="value" - nameKey="name" - cx="50%" - cy="50%" - outerRadius={80} - label - labelLine={false} - > - {/* Color verde para Respuestas Correctas */} - {/* Color rojo para Respuestas Incorrectas */} - - - - , value: participationData.classic, fill: "#82ca9d" }, - { name: , value: participationData.infinite, fill: "#ff6b6b" }, - { name: , value: participationData.threeLife, fill: "#ffc658" }, - { name: , value: participationData.category, fill: "#8884d8" }, - { name: , value: participationData.custom, fill: "#8884d8" }, - ]}> - - - - - - - -
-
+ {loading ? ( +

) : ( -

- ) - )} + participationData !== null ? ( +
+ + + + + + + {participationData.totalGames} + + + + {participationData.correctAnswers} + + + + {participationData.incorrectAnswers} + + + + {participationData.totalTime} + + +
+
+
+ + , value: participationData.correctAnswers }, + { name: , value: participationData.incorrectAnswers } + ]} + dataKey="value" + nameKey="name" + cx="50%" + cy="50%" + outerRadius={80} + label + labelLine={false} + > + {/* Color verde para Respuestas Correctas */} + {/* Color rojo para Respuestas Incorrectas */} + + + +
+
+ , value: participationData.classic, fill: "#82ca9d" }, + { name: , value: participationData.infinite, fill: "#ff6b6b" }, + { name: , value: participationData.threeLife, fill: "#ffc658" }, + { name: , value: participationData.category, fill: "#8884d8" }, + { name: , value: participationData.custom, fill: "#8884d8" }, + ]}> + + + + + +
+
+
+ ) : ( +

+ ) + )}
); diff --git a/webapp/src/test/Participation.test.js b/webapp/src/test/Participation.test.js index 14b61768..99ed6330 100644 --- a/webapp/src/test/Participation.test.js +++ b/webapp/src/test/Participation.test.js @@ -5,7 +5,6 @@ import { Participation } from '../components/Participation'; import { SessionContext } from '../SessionContext'; import { IntlProvider } from 'react-intl'; import messages_en from '../messages/messages_en.json'; -import { FormattedMessage } from 'react-intl'; jest.mock('axios'); @@ -53,6 +52,7 @@ describe('Participation component', () => { expect(screen.getByText(/Total Time/i)).toBeInTheDocument(); expect(screen.getByTestId('pie-chart')).toBeInTheDocument(); + expect(screen.getByTestId('bar-chart')).toBeInTheDocument(); }); }); }); \ No newline at end of file From 1efd841f9784e1ea47c55fdc8f361b72d0e04da4 Mon Sep 17 00:00:00 2001 From: Alfonso Date: Fri, 26 Apr 2024 18:03:40 +0200 Subject: [PATCH 4/8] game service test update --- gameservice/game-service.test.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/gameservice/game-service.test.js b/gameservice/game-service.test.js index bd5ec42d..6169ce6c 100644 --- a/gameservice/game-service.test.js +++ b/gameservice/game-service.test.js @@ -37,7 +37,7 @@ beforeEach(async () => { pAcertadas: 5, pFalladas: 3, totalTime: 1200, - gameMode: 'normal' + gameMode: 'classic' }); }); @@ -54,7 +54,7 @@ describe('Game Service', () => { pAcertadas: 5, pFalladas: 3, totalTime: 1200, - gameMode: 'normal' + gameMode: 'classic' }; const response = await request(app).post('/addgame').send(newGame); @@ -79,8 +79,15 @@ describe('Game Service', () => { correctAnswers: 5, incorrectAnswers: 3, totalTime: 1200, + classic: 1, + infinite: 0, + threeLife: 0, + category: 0, + custom: 0, }; + + const response = await request(app).get(`/getParticipation/${userId}`); expect(response.status).toBe(200); From ffc7a3ab264b618b90cf7599daa61ad09f0b6432 Mon Sep 17 00:00:00 2001 From: Alfonso Date: Fri, 26 Apr 2024 18:43:17 +0200 Subject: [PATCH 5/8] fixing participation --- webapp/src/components/Participation.jsx | 118 ++++++++++++------------ 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx index 8d93c71a..f10a3488 100644 --- a/webapp/src/components/Participation.jsx +++ b/webapp/src/components/Participation.jsx @@ -54,65 +54,65 @@ export const Participation = ({ goTo }) => { ) : ( participationData !== null ? (
- - - - - - - {participationData.totalGames} - - - - {participationData.correctAnswers} - - - - {participationData.incorrectAnswers} - - - - {participationData.totalTime} - - -
-
-
- - , value: participationData.correctAnswers }, - { name: , value: participationData.incorrectAnswers } - ]} - dataKey="value" - nameKey="name" - cx="50%" - cy="50%" - outerRadius={80} - label - labelLine={false} - > - {/* Color verde para Respuestas Correctas */} - {/* Color rojo para Respuestas Incorrectas */} - - - -
-
- , value: participationData.classic, fill: "#82ca9d" }, - { name: , value: participationData.infinite, fill: "#ff6b6b" }, - { name: , value: participationData.threeLife, fill: "#ffc658" }, - { name: , value: participationData.category, fill: "#8884d8" }, - { name: , value: participationData.custom, fill: "#8884d8" }, - ]}> - - - - - -
-
+ + + + + + {participationData.totalGames} + + + + {participationData.correctAnswers} + + + + {participationData.incorrectAnswers} + + + + {participationData.totalTime} + + +
+
+
+ + , value: participationData.correctAnswers }, + { name: , value: participationData.incorrectAnswers } + ]} + dataKey="value" + nameKey="name" + cx="50%" + cy="50%" + outerRadius={80} + label + labelLine={false} + > + {/* Color verde para Respuestas Correctas */} + {/* Color rojo para Respuestas Incorrectas */} + + + +
+
+ , value: participationData.classic, fill: "#82ca9d" }, + { name: , value: participationData.infinite, fill: "#ff6b6b" }, + { name: , value: participationData.threeLife, fill: "#ffc658" }, + { name: , value: participationData.category, fill: "#8884d8" }, + { name: , value: participationData.custom, fill: "#8884d8" }, + ]}> + + + + + + + +
) : (

From a5ca370c53a2fd0848353acb3985142d6a81232f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20M=C3=A9ndez=20Murias?= Date: Sat, 27 Apr 2024 00:20:48 +0200 Subject: [PATCH 6/8] Table adapted to mobiles --- webapp/src/components/Participation.jsx | 7 ++++--- webapp/src/css/participation.css | 9 ++++++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx index f10a3488..9d878026 100644 --- a/webapp/src/components/Participation.jsx +++ b/webapp/src/components/Participation.jsx @@ -54,7 +54,7 @@ export const Participation = ({ goTo }) => { ) : ( participationData !== null ? (
- + @@ -98,7 +98,7 @@ export const Participation = ({ goTo }) => {
- , value: participationData.classic, fill: "#82ca9d" }, { name: , value: participationData.infinite, fill: "#ff6b6b" }, { name: , value: participationData.threeLife, fill: "#ffc658" }, @@ -109,7 +109,8 @@ export const Participation = ({ goTo }) => { - +
diff --git a/webapp/src/css/participation.css b/webapp/src/css/participation.css index 54e1d680..91240dd7 100644 --- a/webapp/src/css/participation.css +++ b/webapp/src/css/participation.css @@ -17,4 +17,11 @@ text-align: center; line-height: 1; } - \ No newline at end of file +@media screen and (max-width: 768px) { + .tablePost { + font-size: 0.8rem; + } + .Participation-text{ + width: 100vmin; + } +} From efde1d5e21439d5622206e8d18882c00b8bf2377 Mon Sep 17 00:00:00 2001 From: Alfonso Date: Sat, 27 Apr 2024 18:32:24 +0200 Subject: [PATCH 7/8] Deleted bar graphic --- webapp/src/components/Participation.jsx | 20 +------------------- webapp/src/test/Participation.test.js | 1 - 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx index 9d878026..eea2a3d7 100644 --- a/webapp/src/components/Participation.jsx +++ b/webapp/src/components/Participation.jsx @@ -10,8 +10,7 @@ import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; -import { PieChart, Pie, Tooltip, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend } from 'recharts'; -import { Card } from '@mui/material'; +import { PieChart, Pie, Tooltip, Cell } from 'recharts'; const gatewayUrl = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"; @@ -97,23 +96,6 @@ export const Participation = ({ goTo }) => { -
- , value: participationData.classic, fill: "#82ca9d" }, - { name: , value: participationData.infinite, fill: "#ff6b6b" }, - { name: , value: participationData.threeLife, fill: "#ffc658" }, - { name: , value: participationData.category, fill: "#8884d8" }, - { name: , value: participationData.custom, fill: "#8884d8" }, - ]}> - - - - - - - -
) : (

diff --git a/webapp/src/test/Participation.test.js b/webapp/src/test/Participation.test.js index 99ed6330..379e23e3 100644 --- a/webapp/src/test/Participation.test.js +++ b/webapp/src/test/Participation.test.js @@ -52,7 +52,6 @@ describe('Participation component', () => { expect(screen.getByText(/Total Time/i)).toBeInTheDocument(); expect(screen.getByTestId('pie-chart')).toBeInTheDocument(); - expect(screen.getByTestId('bar-chart')).toBeInTheDocument(); }); }); }); \ No newline at end of file From 584733da3313449c17a81cb6b6cd4a57db4ad377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20M=C3=A9ndez=20Murias?= Date: Sat, 27 Apr 2024 18:59:28 +0200 Subject: [PATCH 8/8] css change --- webapp/src/components/Participation.jsx | 2 +- webapp/src/css/participation.css | 24 ++++-------------------- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx index eea2a3d7..4d40194c 100644 --- a/webapp/src/components/Participation.jsx +++ b/webapp/src/components/Participation.jsx @@ -44,7 +44,7 @@ export const Participation = ({ goTo }) => { return (
- + diff --git a/webapp/src/css/participation.css b/webapp/src/css/participation.css index 91240dd7..08155cb8 100644 --- a/webapp/src/css/participation.css +++ b/webapp/src/css/participation.css @@ -1,27 +1,11 @@ -.Participation-container { - margin-top: 50px; - display: flex; - flex-direction: column; - gap: 10px; - } - - .Participation-title { - color: #8f95fd; - padding: 0 1em; - text-align: center; - font-size: 1.4em; - } - - .Participation-text { - font-size: 1.4em; - text-align: center; - line-height: 1; - } -@media screen and (max-width: 768px) { + @media screen and (max-width: 768px) { .tablePost { font-size: 0.8rem; } .Participation-text{ width: 100vmin; } + #participationTitle{ + padding-top: 60px; + } }