Merge pull request #122 from dsereycamus/feat/score

Feat/score
dsereycamus · Nov 22, 2023 · e5dc47e · e5dc47e
2 parents d47e34b + fec66d0
commit e5dc47e
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -6,8 +6,6 @@ body {
   background-color: #032d59;
 }
 
-
-
 .container {
   display: flex;
   background-color: #032d59;
@@ -56,18 +54,22 @@ body {
   padding: auto;
   border-radius: 2.5rem;
   justify-content: center;
-  align-items: center; 
+  align-items: center;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   z-index: 1;
   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
@@ -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 (
     <>
       <div className="container">
         <div className="rank">
-          <button className="ranking ranking-insignia">
-            Ranking
-            <img src={foto_ranking} alt="icono del ranking" />
+          <button className="ranking ranking-insignia" onClick={togglePopOver}>
+            Ranking <img src={foto_ranking} alt="icono del ranking" />
           </button>
+          <div className={`pop-over ${popOverVisible ? "visible" : ""}`}>
+            <p>Ranking de Puntos</p>
+            {topScores.map((score, idx) => (
+              <div
+                key={score.email}
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "50% 50%",
+                  width: "250px",
+                }}
+              >
+                <p style={{ color: "var(--clr-orange)" }}>
+                  {score.score} puntos
+                </p>
+                <p
+                  style={{
+                    display: "flex",
+                    gap: "8px",
+                    justifyContent: "flex-start",
+                  }}
+                >
+                  <span style={{ color: "var(--clr-orange-dark)" }}>
+                    #{idx + 1}
+                  </span>
+                  {score.name}
+                </p>
+              </div>
+            ))}
+          </div>
           <button onClick={cuenta} className="insignia ranking-insigniaa">
-          Desbloquea
-          <br /> 
-          insignias
+            Desbloquea
+            <br />
+            insignias
             <img src={foto_pezpregunta} alt="icono de la insignia" />
           </button>
         </div>
@@ -31,11 +76,13 @@ const InicioQuiz = () => {
         <div className="InicioQuiz">
           <div>
             <button onClick={startQuiz} className="btnplay">
-            Jugar
+              Jugar
             </button>
           </div>
           <div>
-            <button onClick={comoJugar} className="btnwho">¿Cómo Jugar?</button>
+            <button onClick={comoJugar} className="btnwho">
+              ¿Cómo Jugar?
+            </button>
           </div>
         </div>
       </div>
@@ -55,4 +102,4 @@ const InicioQuiz = () => {
   );
 };
 
-export default InicioQuiz;
+export default InicioQuiz;
diff --git 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
@@ -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();
+};