diff --git a/backend/src/controllers/user.controller.js b/backend/src/controllers/user.controller.js index cf5e59b..8c82d9a 100644 --- a/backend/src/controllers/user.controller.js +++ b/backend/src/controllers/user.controller.js @@ -9,6 +9,21 @@ module.exports = { createUser, loginUser, updateUserById, + getTopScores: async (_req, res) => { + try { + const scores = await userService.getScores(); + + return res.status(200).send({ + data: scores, + msg: "Se encontró el top 3 de resultados", + status: 200, + }); + } catch (e) { + return res + .status(500) + .send({ error: e, msg: "Hubo un error al conseguir los puntajes." }); + } + }, updateUserScore: async (req, res) => { const { userEmail } = req.headers; const { score } = req.body; diff --git a/backend/src/controllers/user/login.js b/backend/src/controllers/user/login.js index ec01b00..79a14e2 100644 --- a/backend/src/controllers/user/login.js +++ b/backend/src/controllers/user/login.js @@ -42,6 +42,7 @@ const loginUser = async (req, res) => { data: { name: findUser.name, lastName: findUser.lastName, + score: findUser.score, email, }, token: makeToken({ email }), diff --git a/backend/src/routes/user.routes.js b/backend/src/routes/user.routes.js index 7f6c6da..4505e4d 100644 --- a/backend/src/routes/user.routes.js +++ b/backend/src/routes/user.routes.js @@ -4,6 +4,7 @@ const { loginUser, updateUserScore, getUserScore, + getTopScores, } = require("../controllers/user.controller"); const { checkToken } = require("../middleware"); @@ -17,5 +18,6 @@ router.put("/update/:iduser", updateUserById); router.post("/login", loginUser); router.post("/updateScore", [checkToken, updateUserScore]); +router.get("/getTopScores", getTopScores); module.exports = router; diff --git a/backend/src/services/user.service.js b/backend/src/services/user.service.js index f2edae7..b8bffa8 100644 --- a/backend/src/services/user.service.js +++ b/backend/src/services/user.service.js @@ -15,6 +15,18 @@ const userService = { try { const result = await User.updateOne({ _id }, params); + return result; + } catch (e) { + console.error(e); + return undefined; + } + }, + getScores: async () => { + try { + const result = await User.find({ score: { $gt: 0 } }) + .sort({ score: -1 }) + .limit(3); + return result; } catch (e) { console.error(e); diff --git a/myboya-project/src/components/InicioQuiz/InicioQuiz.css b/myboya-project/src/components/InicioQuiz/InicioQuiz.css index cffc923..0b4910e 100644 --- a/myboya-project/src/components/InicioQuiz/InicioQuiz.css +++ b/myboya-project/src/components/InicioQuiz/InicioQuiz.css @@ -6,8 +6,6 @@ body { background-color: #032d59; } - - .container { display: flex; background-color: #032d59; @@ -56,7 +54,7 @@ body { padding: auto; border-radius: 2.5rem; justify-content: center; - align-items: center; + align-items: center; cursor: pointer; position: relative; overflow: hidden; @@ -64,10 +62,14 @@ body { transition: transform 0.3s ease; } -.btnplay:after{ +.btnplay:after { content: ""; position: absolute; - background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); + background: radial-gradient( + circle, + rgba(255, 255, 255, 0.8) 0%, + rgba(255, 255, 255, 0) 70% + ); width: 100%; height: 300%; top: -100%; @@ -76,7 +78,7 @@ body { transition: opacity 0.3s; } -.btnplay:active{ +.btnplay:active { transform: translateY(0.25rem); transform: scale(1.1); } @@ -95,7 +97,7 @@ body { align-items: center; transition: transform 0.3s ease; } -.btnwho:active{ +.btnwho:active { transform: translateY(0.25rem); transform: scale(1.1); } @@ -202,14 +204,14 @@ body { width: 60%; max-width: 50rem; } -@media screen and (max-width:1024px) { - .InicioQuiz{ +@media screen and (max-width: 1024px) { + .InicioQuiz { margin-top: 80px; } .container { margin-left: 20px; } - .rank{ + .rank { margin-top: 50px; } .btnwho { @@ -222,15 +224,28 @@ body { height: 4.8125rem; font-size: 30px; } - .fondo-olas{ + .fondo-olas { display: none; } - .foto-ola{ + .foto-ola { display: none; } - .datocurioso{ + .datocurioso { display: none; } } +.pop-over { + display: none; + position: absolute; + border-radius: 3rem; + background-color: rgba(0, 78, 151, 0.9); + padding: 10px; + right: 7%; + transform: translateX(-100%); +} + +.pop-over.visible { + display: block; +} diff --git a/myboya-project/src/components/InicioQuiz/InicioQuiz.jsx b/myboya-project/src/components/InicioQuiz/InicioQuiz.jsx index 35737ba..3c5a0e9 100644 --- a/myboya-project/src/components/InicioQuiz/InicioQuiz.jsx +++ b/myboya-project/src/components/InicioQuiz/InicioQuiz.jsx @@ -1,28 +1,73 @@ import "./InicioQuiz.css"; +import { useEffect, useState } from "react"; import foto_ranking from "../../assets/Icons/ranking.png"; import foto_pezpregunta from "../../assets/Images/pezpregunta.png"; import foto_olas from "../../assets/Icons/ola+algas.png"; import { useNavigate } from "react-router-dom"; +import { getTopScores } from "../../services/getTopScore"; const InicioQuiz = () => { + const [topScores, setTopScores] = useState([]); + const [popOverVisible, setPopOverVisible] = useState(false); const navigate = useNavigate(); + const getScores = async () => { + const result = await getTopScores(); + setTopScores(result.data); + }; + const startQuiz = () => navigate("/quiz"); const comoJugar = () => navigate("/instrucciones"); const cuenta = () => navigate("/cuenta"); + const togglePopOver = () => { + setPopOverVisible(!popOverVisible); + }; + + useEffect(() => { + getScores(); + }, []); + return ( <>
- +
+

Ranking de Puntos

+ {topScores.map((score, idx) => ( +
+

+ {score.score} puntos +

+

+ + #{idx + 1} + + {score.name} +

+
+ ))} +
@@ -31,11 +76,13 @@ const InicioQuiz = () => {
- +
@@ -55,4 +102,4 @@ const InicioQuiz = () => { ); }; -export default InicioQuiz; \ No newline at end of file +export default InicioQuiz; diff --git a/myboya-project/src/global.css b/myboya-project/src/global.css index 220a50f..f20c249 100644 --- a/myboya-project/src/global.css +++ b/myboya-project/src/global.css @@ -1,13 +1,15 @@ -@import url('https://fonts.cdnfonts.com/css/nats'); -@import url('https://fonts.cdnfonts.com/css/roboto'); +@import url("https://fonts.cdnfonts.com/css/nats"); +@import url("https://fonts.cdnfonts.com/css/roboto"); -*,*::before,*::after{ +*, +*::before, +*::after { box-sizing: border-box; } -*{ +* { margin: 0; padding: 0; - font-family: 'NATS', sans-serif; + font-family: "NATS", sans-serif; } *, @@ -41,6 +43,7 @@ video { /* COLORS */ --clr-white: #ffffff; --clr-orange: #ff8c00; + --clr-orange-dark: #d36500; --clr-blue: #032d59; --clr-deep-blue: #00214b; /* FONTS */ @@ -52,7 +55,6 @@ video { --font-sm: 0.75rem; } - .text-center { text-align: center; } @@ -66,4 +68,3 @@ video { display: flex; justify-content: center; } - diff --git a/myboya-project/src/services/getTopScore.js b/myboya-project/src/services/getTopScore.js new file mode 100644 index 0000000..d9524f5 --- /dev/null +++ b/myboya-project/src/services/getTopScore.js @@ -0,0 +1,12 @@ +export const getTopScores = async () => { + const base = import.meta.env.VITE_BACKEND_URL; + + const response = await fetch(`${base}/user/getTopScores`, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + + return response.json(); +};