105 añadir enlace a openapi y a la info de las preguntas

gatewayservice/gateway-service.js

@@ -73,6 +73,10 @@ app.get("/friends", async (req, res) => {
   handleRequest(req, res, userServiceUrl + "/friends");
 });
 
+app.get("/userGames", async (req, res) => {
+  handleRequest(req, res, userServiceUrl + "/userGames");
+});
+
 app.post("/saveGameList", async (req, res) => {
   try {
     // Forward the save game request to the stats service

users/userservice/user-model.js

@@ -18,7 +18,18 @@ const userSchema = new mongoose.Schema({
       correctAnswers: Number,
       incorrectAnswers: Number,
       points: Number,
-      avgTime: Number
+      avgTime: Number,
+      questions: [{
+        pregunta: String,
+        respuestas: [
+          String,
+          String,
+          String,
+          String
+        ],
+        correcta: String,
+        respuesta: String
+      }]
     }],
     friends: [{
       type: String,

users/userservice/user-service.js

@@ -208,18 +208,38 @@
   }
 });
 
+app.get("/userGames", async (req, res) => {
+  try {
+    const username = req.query.user;
+    if(!username){
+      return res.status(400).json({ error: "Nombre inválido" });
+    }
+    const user = await User.findOne({ username:
+      username,
+    });
+    if (!user) {
+      return res.status(404).json({ error: "Usuario no encontrado" });
+    }
+    res.json(user.games);
+  } catch (error) {
+    res.status(400).json({ error: error.message });
+  }
+});
+
 app.post("/saveGameList", async (req, res) => {
   try {
     const username = checkInput(req.body.username);
     const gamemode = checkInput(req.body.gameMode);
     const gameData = req.body.gameData;
+    const questions = req.body.questions;
 
     let user = await User.findOne({ username: username });
 
     if (!user) {
       return res.status(404).json({ error: "Usuario no encontrado" });
     }
-    const gameDataWithGamemode = { ...gameData, gamemode };
+    const gameDataWithGamemode = { ...gameData, gamemode, questions };
+    console.log(gameDataWithGamemode);
     user.games.push(gameDataWithGamemode);
 
     await user.save();

webapp/src/App.css

@@ -7,3 +7,4 @@
   text-align: center;
   justify-content: space-between;
 }
+

webapp/src/App.js

@@ -16,6 +16,7 @@ import Perfil from "./pages/Perfil/Perfil.js";
 import CalculadoraHumana from "./pages/Calculadora/Calculadora.js";
 import UsersPage from "./pages/Social/UsersPage.js";
 import FriendList from "./pages/Social/FriendsList.js";
+import History from "./pages/History/History.js";
 
 function App() {
   useEffect(() => {
@@ -40,6 +41,7 @@ function App() {
           <Route path="/social/usuarios" element={<UsersPage />} />
           <Route path="/social/amigos" element={<FriendList />} />
           <Route path="/perfil" element={<Perfil />} />
+          <Route path="/history" element={<History />} />
           <Route path="/config" element={<Config />} />
         </Route>
 

webapp/src/components/Footer/Footer.js

@@ -9,10 +9,23 @@ const Footer = () => {
     const bgColor = { light: 'gray.200', dark: 'gray.700' };
     const textColor = { light: 'black', dark: 'white' };
 
-    return(
-        <Box as="footer" textAlign="center" p={4} bg={bgColor[colorMode]} color={textColor[colorMode]} position="sticky" bottom="0" width="100%">
-            <Heading as="h2" fontSize="xl">WIQ!</Heading>
-            <Text fontSize="sm" mt={2}>{t('components.footer.copyright')}</Text>
+    return (
+        <Box
+            as="footer"
+            textAlign="center"
+            position="relative"
+            bottom="0"
+            width="100%"
+            p={4}
+            bg={bgColor[colorMode]}
+            color={textColor[colorMode]}
+        >
+            <Heading as="h2" fontSize="xl">
+                WIQ!
+            </Heading>
+            <Text fontSize="sm" mt={2}>
+                {t('components.footer.copyright')}
+            </Text>
         </Box>
     );
 }

webapp/src/components/Nav/Nav.js

@@ -232,6 +232,9 @@ const Nav = () => {
               <MenuItem onClick={() => handleNavigate("/perfil")}>
                 {t("components.nav.myprofile")}
               </MenuItem>
+              <MenuItem onClick={() => handleNavigate("/history")}>
+                {t("components.nav.history")}
+              </MenuItem>
               <MenuItem onClick={() => handleNavigate("/config")}>
                 {t("components.nav.options")}
               </MenuItem>

webapp/src/locales/en.json

@@ -30,7 +30,8 @@
       "about": "About Us",
       "options": "Options",
       "disconnect": "Disconnect",
-      "api": "API docs"
+      "api": "API docs",
+      "history": "History"
     },
     "register": {
       "title": "Sign up",
@@ -124,6 +125,12 @@
       "seconds": "seconds",
       "noGames": "You haven't played any games yet."
     },
+    "history": {
+      "title": "Game history",
+      "name": "Username",
+      "dateLabel": "Account creation date:",
+      "ngame": "Game"
+    },
     "ranking": {
       "loading": "Loading...",
       "loadingText": "Ranking is being queried, please wait a moment.",

webapp/src/locales/es.json

@@ -30,7 +30,8 @@
       "about": "Sobre nosotros",
       "options": "Opciones",
       "disconnect": "Desconectar",
-      "api": "API docs"
+      "api": "API docs",
+      "history": "Historial"
     },
     "register": {
       "title": "Regístrate",
@@ -124,6 +125,12 @@
       "seconds": "segundos",
       "noGames": "No has jugado ninguna partida aún."
     },
+    "history": {
+      "title": "Historial de partidas",
+      "name": "Nombre de usuario",
+      "dateLabel": "Fecha de creación de la cuenta:",
+      "ngame": "Partida"
+    },
     "ranking": {
       "loading": "Cargando ...",
       "loadingText": "Se está consultando el ranking, espere unos instantes.",

webapp/src/pages/Bateria/Bateria.js

@@ -3,7 +3,7 @@ import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 import { Link, useNavigate } from "react-router-dom";
 import { Box, Flex, Heading, Button, Grid, Spinner } from "@chakra-ui/react";
-import axios from 'axios';
+import axios from "axios";
 import { useTranslation } from "react-i18next";
 
 const JuegoPreguntas = () => {
@@ -27,13 +27,42 @@ const JuegoPreguntas = () => {
   const [preguntasFalladas, setPreguntasFalladas] = useState(0);
   const [tiempoMedio, setTiempoMedio] = useState(0);
 
+  const questionsToSave = [];
+
   useEffect(() => {
     setProgressPercent(100);
     fetchQuestions();
-    handleTimer();
     // eslint-disable-next-line
   }, []);
 
+  useEffect(() => {
+    const roundedProgressPercent = (
+      (tiempoRestante / TIME) *
+      100
+    ).toFixed(2);
+    setProgressPercent(roundedProgressPercent);
+
+    const timer = setInterval(() => {
+      setTiempoRestante((prevTiempo) =>
+        prevTiempo <= 0 ? 0 : prevTiempo - 0.01
+      );
+    }, 10);
+
+    return () => clearInterval(timer);
+    // eslint-disable-next-line
+  }, [tiempoRestante]);
+
+  useEffect(() => {
+    if (tiempoRestante === 0) {
+      setJuegoTerminado(true);
+    }
+    const timer = setInterval(() => {
+      setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1));
+    }, 1000);
+    return () => clearInterval(timer);
+    // eslint-disable-next-line
+  }, [tiempoRestante]);
+
   useEffect(() => {
     if (juegoTerminado && tiempoMedio !== 0) {
       guardarPartida();
@@ -44,7 +73,7 @@ const JuegoPreguntas = () => {
   useEffect(() => {
     if (tiempoRestante === 0) {
       setJuegoTerminado(true);
-      if(preguntasCorrectas + preguntasFalladas > 0) {
+      if (preguntasCorrectas + preguntasFalladas > 0) {
         const preguntasTotales = preguntasCorrectas + preguntasFalladas;
         const tMedio = TIME / preguntasTotales;
         setTiempoMedio(tMedio);
@@ -59,7 +88,11 @@ const JuegoPreguntas = () => {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ tematicas: localStorage.getItem("selectedThemes") || "paises", n: 9000, locale: i18n.language }),
+      body: JSON.stringify({
+        tematicas: localStorage.getItem("selectedThemes") || "paises",
+        n: 9000,
+        locale: i18n.language,
+      }),
     })
       .then((response) => {
         if (!response.ok) {
@@ -81,7 +114,7 @@ const JuegoPreguntas = () => {
 
   const handleTimer = () => {
     const timer = setInterval(() => {
-      setTiempoRestante(prevTiempo => (prevTiempo <= 0 ? 0 : prevTiempo - 1));
+      setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1));
     }, 1000);
     return () => clearInterval(timer);
   };
@@ -97,6 +130,7 @@ const JuegoPreguntas = () => {
         points: puntuacion,
         avgTime: tiempoMedio,
       },
+      questions: questionsToSave,
     };
 
     saveGame("/saveGame", newGame);
@@ -108,9 +142,9 @@ const JuegoPreguntas = () => {
       const response = await axios.post(URL + endpoint, newGame);
       console.log("Solicitud exitosa:", response.data);
     } catch (error) {
-      console.error('Error al guardar el juego:', error);
+      console.error("Error al guardar el juego:", error);
     }
-  }
+  };
 
   const handleSiguientePregunta = async (respuesta) => {
     if (respuesta === preguntaActual.correcta) {
@@ -119,6 +153,15 @@ const JuegoPreguntas = () => {
     } else {
       setPreguntasFalladas(preguntasFalladas + 1);
     }
+
+    const pregunta = {
+      pregunta: preguntaActual.pregunta,
+      respuestas: preguntaActual.respuestas,
+      correcta: preguntaActual.correcta,
+      respuesta: respuesta,
+    };
+    questionsToSave.push(pregunta);
+
     if (indicePregunta + 1 < preguntas.length) {
       setIndicePregunta(indicePregunta + 1);
       setPreguntaActual(preguntas[indicePregunta + 1]);
@@ -140,12 +183,12 @@ const JuegoPreguntas = () => {
         <Nav />
         <Spinner
           data-testid="spinner"
-          thickness='4px'
-          speed='0.65s'
-          emptyColor='gray.200'
-          color='teal.500'
-          size='xl'
-          margin='auto'
+          thickness="4px"
+          speed="0.65s"
+          emptyColor="gray.200"
+          color="teal.500"
+          size="xl"
+          margin="auto"
         />
         <Footer />
       </>
@@ -156,26 +199,32 @@ const JuegoPreguntas = () => {
     <>
       <Nav />
       <Flex justify="center" align="center" h="70vh">
-        <Box p={6} borderWidth="1px" maxWidth={"90%"} borderRadius="lg" boxShadow="lg">
+        <Box
+          p={6}
+          borderWidth="1px"
+          maxWidth={"90%"}
+          borderRadius="lg"
+          boxShadow="lg"
+        >
           {juegoTerminado ? (
             <Box textAlign="center">
-              <Heading as="h2">{t('pages.wisebattery.finished')}</Heading>
+              <Heading as="h2">{t("pages.wisebattery.finished")}</Heading>
               <p p={2}>
-                {t('pages.wisebattery.score')} {puntuacion}
+                {t("pages.wisebattery.score")} {puntuacion}
               </p>
               <Flex flexDirection={"column"}>
                 <Button onClick={handleRepetirJuego} colorScheme="teal" m={2}>
-                  {t('pages.wisebattery.playAgain')}
+                  {t("pages.wisebattery.playAgain")}
                 </Button>
                 <Link to="/home" style={{ marginLeft: "10px" }}>
-                  {t('pages.wisebattery.back')}
+                  {t("pages.wisebattery.back")}
                 </Link>
               </Flex>
             </Box>
           ) : (
             <Box>
               <Heading as="h2" mb={4}>
-              {t('pages.wisebattery.question')} {indicePregunta + 1}
+                {t("pages.wisebattery.question")} {indicePregunta + 1}
               </Heading>
               <p>{preguntaActual.pregunta}</p>
               <Grid templateColumns="repeat(2, 1fr)" gap={4} mt={4}>
@@ -195,8 +244,12 @@ const JuegoPreguntas = () => {
               </Grid>
 
               <Box textAlign="center" mt={4}>
-                <p>{t('pages.wisebattery.time')} {Math.floor(tiempoRestante)}</p>
-                <p>{t('pages.wisebattery.score')} {puntuacion}</p>
+                <p>
+                  {t("pages.wisebattery.time")} {Math.floor(tiempoRestante)}
+                </p>
+                <p>
+                  {t("pages.wisebattery.score")} {puntuacion}
+                </p>
                 <Box w="100%" bg="gray.100" borderRadius="lg" mt={4}>
                   <Box
                     bg="teal.500"

webapp/src/pages/Bateria/a.js

@@ -0,0 +1,23 @@
+<Box p={6} borderWidth="1px" maxWidth={"90%"} borderRadius="lg" boxShadow="lg">
+  <Box>
+    <Heading as="h2" mb={4}>
+      {t("pages.wisebattery.question")} {indicePregunta + 1}
+    </Heading>
+    <p>{preguntaActual.pregunta}</p>
+    <Grid templateColumns="repeat(2, 1fr)" gap={4} mt={4}>
+      {preguntaActual.respuestas.map((respuesta, index) => (
+        <Button
+          key={index}
+          onClick={() => handleSiguientePregunta(respuesta)}
+          disabled={tiempoRestante === 0 || juegoTerminado}
+          whiteSpace={"normal"}
+          padding={"1rem"}
+          height={"fit-content"}
+          minHeight={"3rem"}
+        >
+          {respuesta}
+        </Button>
+      ))}
+    </Grid>
+  </Box>
+</Box>;