From 226c8ff6a0cb19245581e4f3cac054db138b98f8 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sat, 27 Apr 2024 11:29:50 +0200 Subject: [PATCH 1/3] =?UTF-8?q?Todo=20en=20ingl=C3=A9s=20menos=20webapp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data/{tematicas.json => topics.json} | 0 questionservice/question-service.js | 17 ++-- .../questionGen/GeneratorChooser.js | 48 +++++------ .../questionGen/GenericGenerator.js | 84 ++++++++++--------- statsservice/stats-service.js | 4 +- users/userservice/user-service.js | 26 +++--- users/userservice/user-service.test.js | 13 --- 7 files changed, 91 insertions(+), 101 deletions(-) rename questionservice/data/{tematicas.json => topics.json} (100%) diff --git a/questionservice/data/tematicas.json b/questionservice/data/topics.json similarity index 100% rename from questionservice/data/tematicas.json rename to questionservice/data/topics.json diff --git a/questionservice/question-service.js b/questionservice/question-service.js index d14a3f65..db077b36 100644 --- a/questionservice/question-service.js +++ b/questionservice/question-service.js @@ -43,10 +43,10 @@ app.get("/questions", async (req, res) => { req.query.locale = "es"; } try { - var tematica = req.query.tematica ? req.query.tematica : "all"; + var topic = req.query.tematica ? req.query.tematica : "all"; var n = req.query.n ? req.query.n : 10; var locale = req.query.locale; - var data = gen.getQuestions(tematica, n, locale); + var data = gen.getQuestions(topic, n, locale); res.json(data); } catch (error) { res.status(400).json({ error: error.message }); @@ -65,13 +65,13 @@ app.post("/questions", async (req, res) => { return; } try { - const temas = tematicas ? JSON.parse(tematicas) : []; - const tematicasValidas = - temas.length !== 0 - ? temas + const topics = tematicas ? JSON.parse(tematicas) : []; + const validTopics = + topics.length !== 0 + ? topics : ["paises", "literatura", "cine", "arte", "programacion", "futbolistas", "clubes", "baloncestistas", "politica", "videojuegos"]; - const cantidadPreguntas = parseInt(n, 10); - const data = gen.getQuestionsPost(tematicasValidas, cantidadPreguntas, locale); + const questionCount = parseInt(n, 10); + const data = gen.getQuestionsPost(validTopics, questionCount, locale); res.json(data); } catch (error) { res.status(400).json({ error: error.message }); @@ -91,6 +91,7 @@ const server = app.listen(port, async () => { }); }); +// Schedule to reload generators data every day at 3:00 AM cron.schedule("0 3 * * *", async () => { await gen.loadGenerators(); }); diff --git a/questionservice/questionGen/GeneratorChooser.js b/questionservice/questionGen/GeneratorChooser.js index 24d25522..cfd30c38 100644 --- a/questionservice/questionGen/GeneratorChooser.js +++ b/questionservice/questionGen/GeneratorChooser.js @@ -4,59 +4,59 @@ const fs = require("fs"); class GeneratorChooser { constructor() { this.generators = new Map(); - this.tematicas = []; - this.leer_json("./data/tematicas.json"); + this.topics = []; + this.read_json("./data/topics.json"); } - leer_json(ruta) { + read_json(ruta) { const datos = fs.readFileSync(ruta); - var tematicas = JSON.parse(datos); + var topics = JSON.parse(datos); - for (let i in tematicas) { - var tematica = tematicas[i]; - this.tematicas.push(i); + for (let i in topics) { + var topic = topics[i]; + this.topics.push(i); this.generators.set( i, new GenericGenerator( - tematica.entity, - tematica.props, - tematica.types, - tematica.preguntas + topic.entity, + topic.props, + topic.types, + topic.preguntas ) ); } } - getQuestions(tematica, n, locale) { - if (tematica === "all") { + getQuestions(topic, n, locale) { + if (topic === "all") { var questions = []; for (let i = 0; i < n; i++) { - let rand = Math.floor(Math.random() * this.tematicas.length); - let randTematica = this.tematicas[rand]; - let q = this.generators.get(randTematica).generateRandomQuestions(1, locale); + let rand = Math.floor(Math.random() * this.topics.length); + let randTopic = this.topics[rand]; + let q = this.generators.get(randTopic).generateRandomQuestions(1, locale); questions.push(q); } return questions.flat(); } else { - return this.generators.get(tematica).generateRandomQuestions(n, locale); + return this.generators.get(topic).generateRandomQuestions(n, locale); } } - getQuestionsPost(tematicas, n, locale) { + getQuestionsPost(topics, n, locale) { var questions = []; for (let i = 0; i < n; i++) { - let rand = Math.floor(Math.random() * tematicas.length); - let randTematica = tematicas[rand]; - let q = this.generators.get(randTematica).generateRandomQuestions(1, locale); + let rand = Math.floor(Math.random() * topics.length); + let randTopic = topics[rand]; + let q = this.generators.get(randTopic).generateRandomQuestions(1, locale); questions.push(q); } return questions.flat(); } async loadGenerators() { - for (let i = 0; i < this.tematicas.length; i++) { - var gen = this.generators.get(this.tematicas[i]); - console.log("Cargando temática: " + this.tematicas[i]); + for (let i = 0; i < this.topics.length; i++) { + var gen = this.generators.get(this.topics[i]); + console.log("Loading topic: " + this.topics[i]); await gen.getData(); await this.#sleep(10000); } diff --git a/questionservice/questionGen/GenericGenerator.js b/questionservice/questionGen/GenericGenerator.js index 0a4fa690..16bc19d1 100644 --- a/questionservice/questionGen/GenericGenerator.js +++ b/questionservice/questionGen/GenericGenerator.js @@ -20,26 +20,26 @@ class GenericGenerator { this.preguntasMap = this.#generateQuestionLabels(preguntas); Array.prototype.groupByEntity = function () { - return this.reduce((acumulador, actual) => { + return this.reduce((acc, actual) => { const entity = actual.entityLabel.value; if (!/^Q\d+/.test(entity)) { - if (!acumulador[entity]) { - acumulador[entity] = {}; + if (!acc[entity]) { + acc[entity] = {}; } for (const key in actual) { if (key !== "entityLabel") { const valor = actual[key].value; - if (!acumulador[entity][key]) { - acumulador[entity][key] = [valor]; - } else if (!acumulador[entity][key].includes(valor)) { - acumulador[entity][key].push(valor); + if (!acc[entity][key]) { + acc[entity][key] = [valor]; + } else if (!acc[entity][key].includes(valor)) { + acc[entity][key].push(valor); } } } } - return acumulador; + return acc; }, {}); }; } @@ -68,7 +68,6 @@ class GenericGenerator { return map; } - // Función para realizar la consulta SPARQL y obtener los datos de Wikidata async getData() { for (let i = 0; i < LANGUAGES.length; i++) { const sparqlQuery = ` @@ -96,60 +95,61 @@ class GenericGenerator { this.data[LANGUAGES[i]] = data.results.bindings.groupByEntity(); }) .catch((error) => { - console.error("Error fetching data: " + error.message); + console.error("Error fetching data: " + error.monthsage); }); } } generateRandomQuestion(locale) { - // Elegir aleatoriamente una entidad del array - var entidades = Object.keys(this.data[locale]); - const entidadLabel = - entidades[Math.floor(Math.random() * entidades.length)]; + // Choose a random entity + var entities = Object.keys(this.data[locale]); + const entityLabel = + entities[Math.floor(Math.random() * entities.length)]; - const entidad = this.data[locale][entidadLabel]; + const entity = this.data[locale][entityLabel]; - // Elegir aleatoriamente una propiedad de la entidad para hacer la pregunta - const propiedades = this.propLabels; + // Choose a random property + const props = this.propLabels; - var respuestaCorrecta = ""; + var correctAnswer = ""; var propIndex = 0; do { - propIndex = Math.floor(Math.random() * propiedades.length); - var propiedadPregunta = propiedades[propIndex]; + propIndex = Math.floor(Math.random() * props.length); + var questionProp = props[propIndex]; - // Obtener la respuesta correcta - respuestaCorrecta = - entidad[propiedadPregunta][entidad[propiedadPregunta].length - 1]; - } while (/^Q\d+/.test(respuestaCorrecta)); + // Choose correct answer + correctAnswer = + entity[questionProp][entity[questionProp].length - 1]; + } while (/^Q\d+/.test(correctAnswer)); var questionObj = { pregunta: "", - respuestas: [respuestaCorrecta], - correcta: respuestaCorrecta, + respuestas: [correctAnswer], + correcta: correctAnswer, }; - // Obtener respuestas incorrectas + // Generate incorrect answers while (questionObj.respuestas.length < 4) { const otroPaisLabel = - entidades[Math.floor(Math.random() * entidades.length)]; + entities[Math.floor(Math.random() * entities.length)]; const otroPais = this.data[locale][otroPaisLabel]; - let prop = otroPais[propiedadPregunta][0]; + let prop = otroPais[questionProp][0]; - // Si no está en las propiedades de la entidad de la pregunta + // If the property is already in the answers array, choose another one if ( !questionObj.respuestas.includes(prop) && - !entidad[propiedadPregunta].includes(prop) && + !entity[questionProp].includes(prop) && !/^Q\d+/.test(prop) && - entidadLabel != prop + entityLabel != prop ) { questionObj.respuestas.push(prop); } } - // Barajar las opciones de respuesta + // Shuffle answers questionObj.respuestas.sort(() => Math.random() - 0.5); + // Format answers switch (this.types[propIndex]) { case "date": questionObj.respuestas = questionObj.respuestas.map((x) => @@ -166,9 +166,11 @@ class GenericGenerator { default: break; } + + // Generate question questionObj.pregunta = this.preguntasMap - .get(propiedadPregunta) - [locale].replace("%", entidadLabel); + .get(questionProp) + [locale].replace("%", entityLabel); return questionObj; } @@ -184,21 +186,21 @@ class GenericGenerator { return questions; } - #dateFormatter(fecha) { + #dateFormatter(date) { var isAC = false; - if (fecha.startsWith("-")) { + if (date.startsWith("-")) { isAC = true; - fecha = fecha.substring(1); + date = date.substring(1); } - const [año, mes, dia] = fecha + const [year, month, day] = date .split("T")[0] .split("-") .map((n) => Number.parseInt(n).toFixed()); - const fechaFormateada = `${dia}/${mes}/${año}${isAC ? " a.C." : ""}`; + const dateFormat = `${day}/${month}/${year}${isAC ? " a.C." : ""}`; - return fechaFormateada; + return dateFormat; } } diff --git a/statsservice/stats-service.js b/statsservice/stats-service.js index d6c177de..a9b3cce7 100644 --- a/statsservice/stats-service.js +++ b/statsservice/stats-service.js @@ -43,7 +43,7 @@ app.post("/saveGame", async (req, res) => { gamemode == "bateria" || gamemode == "calculadora" ) { - // Buscar las estadísticas existentes del usuario y modo de juego + // Search for existing stats let stats = await Stats.findOne({ username: username, gamemode: gamemode, @@ -56,7 +56,7 @@ app.post("/saveGame", async (req, res) => { (gameData.incorrectAnswers + gameData.correctAnswers)) * 100; } - // Si no existen estadísticas, crear un nuevo documento + // If no stats found, create new stats stats = new Stats({ username: username, gamemode: gamemode, diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js index fe96feca..56fec433 100644 --- a/users/userservice/user-service.js +++ b/users/userservice/user-service.js @@ -111,17 +111,17 @@ app.get("/users", async (req, res) => { app.get("/users/search", async (req, res) => { try { const { username } = req.query; - // Encuentra al usuario actual + // Search for the user by username const currentUser = await User.findOne({ username }); if (!currentUser) { return res.status(404).json({ error: "User not found" }); } - // Encuentra los amigos del usuario actual + // Find all users that are not friends of the current user const un = username; const currentUserFriends = currentUser.friends; - // Encuentra todos los usuarios que no son amigos del usuario actual + // Find all users that are not friends of the current user const users = await User.find({ username: { $ne: un, $nin: currentUserFriends }, }); @@ -168,20 +168,20 @@ app.post("/users/remove-friend", async (req, res) => { const username = req.body.username; const friendUsername = req.body.friendUsername; - // Buscar el usuario por su nombre de usuario + // Search for the user by username const user = await User.findOne({ username: username }); if (!user) { return res.status(404).json({ error: "User not found" }); } - // Verificar si el amigo está en la lista de amigos del usuario + // Verify if the friend is in the user's friend list if (!user.friends.includes(friendUsername)) { return res .status(400) .json({ error: "Friend not found in the user's friend list" }); } - // Eliminar al amigo de la lista de amigos del usuario + // Delete the friend from the user's friend list user.friends = user.friends.filter((friend) => friend !== friendUsername); await user.save(); @@ -190,14 +190,14 @@ app.post("/users/remove-friend", async (req, res) => { return res.status(404).json({ error: "User not found" }); } - // Verificar si el amigo está en la lista de amigos del usuario + // Verify if the user is in the friend's friend list if (!friend.friends.includes(username)) { return res .status(400) .json({ error: "Friend not found in the user's friend list" }); } - // Eliminar al amigo de la lista de amigos del usuario + // Delete the user from the friend's friend list friend.friends = friend.friends.filter((friend) => friend !== username); await friend.save(); @@ -213,12 +213,12 @@ app.get("/friends", async (req, res) => { try { const username = checkInput(req.query.user); - // Buscar al usuario por su nombre de usuario + // Search for the user by username const user = await User.findOne({ username:username }); if (!user) { return res.status(404).json({ error: "User not found" }); } - // Devuelve la lista de amigos + // Return the friends of the user res.status(200).json({ friends: user.friends }); } catch (error) { @@ -297,7 +297,7 @@ app.get('/group/list', async (req, res) => { } }); -// Obtener un grupo por su nombre +// Get group by name app.get('/group/:groupName', async (req, res) => { try { const groupName = req.params.groupName; @@ -314,7 +314,7 @@ app.get('/group/:groupName', async (req, res) => { }); -// Crear un nuevo grupo +// Create a new group app.post('/group/add', async (req, res) => { try { validateRequiredFields(req, ['name', 'username']); @@ -347,7 +347,7 @@ app.post('/group/add', async (req, res) => { } }); -// Unirse a un grupo existente +// Join a group app.post('/group/join', async (req, res) => { try { validateRequiredFields(req, ['groupId', 'username']); diff --git a/users/userservice/user-service.test.js b/users/userservice/user-service.test.js index 87cb723e..1afc7b7c 100644 --- a/users/userservice/user-service.test.js +++ b/users/userservice/user-service.test.js @@ -72,26 +72,21 @@ describe("User Service", () => { }); it("should return user info on GET /userInfo", async () => { - // Realizar la solicitud GET /userInfo const response = await request(app) .get("/userInfo/testuser"); - // Verificar la respuesta expect(response.status).toBe(200); expect(response.body).toHaveProperty("username", "testuser"); }); it("should return error on GET /userInfo", async () => { - // Realizar la solicitud GET /userInfo sin parámetros const response = await request(app).get("/userInfo"); - // Verificar la respuesta expect(response.status).toBe(404); expect(response.body).toEqual({ }); }); it("should save game data for the user on POST /saveGameList", async () => { - // Datos de la partida a guardar const gameData = { username: "testuser", gameMode: "clasico", @@ -103,16 +98,13 @@ describe("User Service", () => { }, }; - // Realizar la solicitud POST /saveGameList const response = await request(app).post("/saveGameList").send(gameData); - // Verificar la respuesta expect(response.status).toBe(200); expect(response.body).toEqual({ message: "Game saved successfully" }); }); it("should send error POST /saveGameList", async () => { - // Datos de la partida a guardar const gameData = { username: "testuseraaa", gameMode: "clasico", @@ -124,16 +116,13 @@ describe("User Service", () => { }, }; - // Realizar la solicitud POST /saveGameList const response = await request(app).post("/saveGameList").send(gameData); - // Verificar la respuesta expect(response.status).toBe(404); expect(response.body).toEqual({ error: "User not found" }); }); it("should send error POST /saveGameList for invalid gamemode", async () => { - // Datos de la partida a guardar const gameData = { username: "testuser", gameMode: "a", @@ -145,10 +134,8 @@ describe("User Service", () => { }, }; - // Realizar la solicitud POST /saveGameList const response = await request(app).post("/saveGameList").send(gameData); - // Verificar la respuesta expect(response.status).toBe(422); expect(response.body).toEqual({ error: "Invalid gamemode" }); }); From a5fd3b4c3285e8a6b2178c5b102ad65cac9cfeb0 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sat, 27 Apr 2024 11:47:25 +0200 Subject: [PATCH 2/3] Modos de juego --- webapp/src/pages/Bateria/Bateria.js | 133 +++++++------ webapp/src/pages/Calculadora/Calculadora.js | 83 ++++---- webapp/src/pages/Clasico/Clasico.js | 201 ++++++++++---------- webapp/src/pages/Config/Config.js | 10 +- 4 files changed, 209 insertions(+), 218 deletions(-) diff --git a/webapp/src/pages/Bateria/Bateria.js b/webapp/src/pages/Bateria/Bateria.js index babd88ec..7c561a47 100644 --- a/webapp/src/pages/Bateria/Bateria.js +++ b/webapp/src/pages/Bateria/Bateria.js @@ -14,18 +14,18 @@ const JuegoPreguntas = () => { const navigate = useNavigate(); const [isLoading, setIsLoading] = useState(true); - const [indicePregunta, setIndicePregunta] = useState(0); - const [puntuacion, setPuntuacion] = useState(0); - const [tiempoRestante, setTiempoRestante] = useState(TIME); - const [juegoTerminado, setJuegoTerminado] = useState(false); - const [preguntas, setPreguntas] = useState([]); - const [preguntaActual, setPreguntaActual] = useState(null); + const [questionIndex, setQuestionIndex] = useState(0); + const [points, setPoints] = useState(0); + const [timeLeft, setTimeLeft] = useState(TIME); + const [endgame, setEndgame] = useState(false); + const [questions, setQuestions] = useState([]); + const [actualQuestion, setActualQuestion] = useState(null); const [progressPercent, setProgressPercent] = useState(100); //Used for user stats - const [preguntasCorrectas, setPreguntasCorrectas] = useState(0); - const [preguntasFalladas, setPreguntasFalladas] = useState(0); - const [tiempoMedio, setTiempoMedio] = useState(0); + const [correctAnswers, setCorrectAnswers] = useState(0); + const [incorrectAnswers, setIncorrectAnswers] = useState(0); + const [averageTime, setAverageTime] = useState(0); const questionsToSave = []; @@ -37,50 +37,50 @@ const JuegoPreguntas = () => { useEffect(() => { const roundedProgressPercent = ( - (tiempoRestante / TIME) * + (timeLeft / TIME) * 100 ).toFixed(2); setProgressPercent(roundedProgressPercent); const timer = setInterval(() => { - setTiempoRestante((prevTiempo) => + setTimeLeft((prevTiempo) => prevTiempo <= 0 ? 0 : prevTiempo - 0.01 ); }, 10); return () => clearInterval(timer); // eslint-disable-next-line - }, [tiempoRestante]); + }, [timeLeft]); useEffect(() => { - if (tiempoRestante === 0) { - setJuegoTerminado(true); + if (timeLeft === 0) { + setEndgame(true); } const timer = setInterval(() => { - setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1)); + setTimeLeft((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1)); }, 1000); return () => clearInterval(timer); // eslint-disable-next-line - }, [tiempoRestante]); + }, [timeLeft]); useEffect(() => { - if (juegoTerminado && tiempoMedio !== 0) { - guardarPartida(); + if (endgame && averageTime !== 0) { + saveGame(); } // eslint-disable-next-line - }, [juegoTerminado, tiempoMedio]); + }, [endgame, averageTime]); useEffect(() => { - if (tiempoRestante === 0) { - setJuegoTerminado(true); - if (preguntasCorrectas + preguntasFalladas > 0) { - const preguntasTotales = preguntasCorrectas + preguntasFalladas; + if (timeLeft === 0) { + setEndgame(true); + if (correctAnswers + incorrectAnswers > 0) { + const preguntasTotales = correctAnswers + incorrectAnswers; const tMedio = TIME / preguntasTotales; - setTiempoMedio(tMedio); + setAverageTime(tMedio); } } // eslint-disable-next-line - }, [tiempoRestante]); + }, [timeLeft]); const fetchQuestions = () => { fetch(URL + "/questions", { @@ -102,72 +102,71 @@ const JuegoPreguntas = () => { return response.json(); }) .then((data) => { - setPreguntas(data); - setPreguntaActual(data[0]); + setQuestions(data); + setActualQuestion(data[0]); setIsLoading(false); }) .catch((error) => { - console.error("Error al obtener las preguntas:", error); + console.error("Error al obtener las questions:", error); navigate("/home?error=1"); }); }; - const guardarPartida = async () => { + const saveGame = async () => { const username = localStorage.getItem("username"); const newGame = { username: username, gameMode: "bateria", gameData: { - correctAnswers: preguntasCorrectas, - incorrectAnswers: preguntasFalladas, - points: puntuacion, - avgTime: tiempoMedio, + correctAnswers: correctAnswers, + incorrectAnswers: incorrectAnswers, + points: points, + avgTime: averageTime, }, questions: questionsToSave, }; - saveGame("/saveGame", newGame); - saveGame("/saveGameList", newGame); + save("/save", newGame); + save("/saveGameList", newGame); }; - const saveGame = async (endpoint, newGame) => { + const save = async (endpoint, newGame) => { try { - const response = await axios.post(URL + endpoint, newGame); - console.log("Solicitud exitosa:", response.data); + await axios.post(URL + endpoint, newGame); } catch (error) { - console.error("Error al guardar el juego:", error); + console.error(error); } }; - const handleSiguientePregunta = async (respuesta) => { - if (respuesta === preguntaActual.correcta) { - setPuntuacion(puntuacion + 1); - setPreguntasCorrectas(preguntasCorrectas + 1); + const handleNextQuestion = async (answer) => { + if (answer === actualQuestion.correcta) { + setPoints(points + 1); + setCorrectAnswers(correctAnswers + 1); } else { - setPreguntasFalladas(preguntasFalladas + 1); + setIncorrectAnswers(incorrectAnswers + 1); } const pregunta = { - pregunta: preguntaActual.pregunta, - respuestas: preguntaActual.respuestas, - correcta: preguntaActual.correcta, - respuesta: respuesta, + pregunta: actualQuestion.pregunta, + respuestas: actualQuestion.respuestas, + correcta: actualQuestion.correcta, + respuesta: answer, }; questionsToSave.push(pregunta); - if (indicePregunta + 1 < preguntas.length) { - setIndicePregunta(indicePregunta + 1); - setPreguntaActual(preguntas[indicePregunta + 1]); + if (questionIndex + 1 < questions.length) { + setQuestionIndex(questionIndex + 1); + setActualQuestion(questions[questionIndex + 1]); } else { - setJuegoTerminado(true); + setEndgame(true); } }; - const handleRepetirJuego = () => { - setIndicePregunta(0); - setPuntuacion(0); - setTiempoRestante(180); - setJuegoTerminado(false); + const handleRematch = () => { + setQuestionIndex(0); + setPoints(0); + setTimeLeft(180); + setEndgame(false); }; if (isLoading) { @@ -199,14 +198,14 @@ const JuegoPreguntas = () => { borderRadius="lg" boxShadow="lg" > - {juegoTerminado ? ( + {endgame ? ( {t("pages.wisebattery.finished")}

- {t("pages.wisebattery.score")} {puntuacion} + {t("pages.wisebattery.score")} {points}

- @@ -217,14 +216,14 @@ const JuegoPreguntas = () => { ) : ( - {t("pages.wisebattery.question")} {indicePregunta + 1} + {t("pages.wisebattery.question")} {questionIndex + 1} -

{preguntaActual.pregunta}

+

{actualQuestion.pregunta}

- {preguntaActual.respuestas.map((respuesta, index) => ( + {actualQuestion.respuestas.map((respuesta, index) => ( @@ -201,8 +198,8 @@ const CalculadoraHumana = () => { Enviar{" "} -

{t('pages.humancalculator.time')} {Math.floor(tiempoRestante)}

-

{t('pages.humancalculator.score')} {puntuacion}

+

{t('pages.humancalculator.time')} {Math.floor(timeLeft)}

+

{t('pages.humancalculator.score')} {points}

{ const { t, i18n } = useTranslation(); const [isLoading, setIsLoading] = useState(true); - const [indicePregunta, setIndicePregunta] = useState(0); - const [puntuacion, setPuntuacion] = useState(0); - const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); - const [tiempoRestante, setTiempoRestante] = useState(SECS_PER_QUESTION); - const [juegoTerminado, setJuegoTerminado] = useState(false); - const [preguntaTerminada, setPreguntaTerminada] = useState(false); - const [mostrarMenu, setMostrarMenu] = useState(false); // Estado para mostrar el menú al finalizar el juego - const [preguntas, setPreguntas] = useState([]); - const [preguntaActual, setPreguntaActual] = useState(""); + const [questionIndex, setQuestionIndex] = useState(0); + const [points, setPoints] = useState(0); + const [selectedAnswers, setSelectedAnswer] = useState(null); + const [timeLeft, setTimeLeft] = useState(SECS_PER_QUESTION); + const [endgame, setEndgame] = useState(false); + const [endQuestion, setEndQuestion] = useState(false); + const [showMenu, setShowMenu] = useState(false); + const [questions, setQuestions] = useState([]); + const [actualQuestion, setActualQuestion] = useState(""); const [progressPercent, setProgressPercent] = useState(100); const navigate = useNavigate(); //Used for user stats - const [preguntasCorrectas, setPreguntasCorrectas] = useState(0); - const [preguntasFalladas, setPreguntasFalladas] = useState(0); - const [tiempoTotal, setTiempoTotal] = useState(0); - const [tiempoMedio, setTiempoMedio] = useState(0); + const [correctAnswers, setCorrectAnswers] = useState(0); + const [incorrectAnswers, setIncorrectAnswers] = useState(0); + const [totalTime, setTotalTime] = useState(0); + const [averageTime, setAverageTime] = useState(0); const [questionsToSave, setQuestionsToSave] = useState([]); useEffect(() => { @@ -64,8 +64,8 @@ const JuegoPreguntas = () => { return response.json(); }) .then((data) => { - setPreguntas(data); - setPreguntaActual(data[0]); + setQuestions(data); + setActualQuestion(data[0]); setIsLoading(false); }) .catch((error) => { @@ -76,59 +76,59 @@ const JuegoPreguntas = () => { useEffect(() => { const roundedProgressPercent = ( - (tiempoRestante / SECS_PER_QUESTION) * + (timeLeft / SECS_PER_QUESTION) * 100 ).toFixed(2); setProgressPercent(roundedProgressPercent); const timer = setInterval(() => { - setTiempoRestante((prevTiempo) => + setTimeLeft((prevTiempo) => prevTiempo <= 0 ? 0 : prevTiempo - 0.01 ); }, 10); return () => clearInterval(timer); // eslint-disable-next-line - }, [tiempoRestante]); + }, [timeLeft]); useEffect(() => { - if (tiempoRestante === 0) { - const newTTotal = tiempoTotal + SECS_PER_QUESTION; - setTiempoTotal(newTTotal); - setPreguntaTerminada(true); + if (timeLeft === 0) { + const newTTotal = totalTime + SECS_PER_QUESTION; + setTotalTime(newTTotal); + setEndQuestion(true); setTimeout(() => { - setPreguntaTerminada(false); - handleSiguientePregunta(); + setEndQuestion(false); + handleNextQuestion(); }, 3000); } const timer = setInterval(() => { - setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1)); + setTimeLeft((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1)); }, 1000); return () => clearInterval(timer); // eslint-disable-next-line - }, [tiempoRestante]); + }, [timeLeft]); useEffect(() => { - if (juegoTerminado) { - setMostrarMenu(true); + if (endgame) { + setShowMenu(true); } // eslint-disable-next-line - }, [juegoTerminado]); + }, [endgame]); - const handleRespuestaSeleccionada = (respuesta) => { - if (!juegoTerminado) { - setRespuestaSeleccionada(respuesta); + const handleAnsweredQuestion = (respuesta) => { + if (!endgame) { + setSelectedAnswer(respuesta); } }; - const estiloRespuesta = (respuesta) => { - if (preguntaTerminada) { - if (respuesta === preguntaActual.correcta) { + const answerStyle = (answer) => { + if (endQuestion) { + if (answer === actualQuestion.correcta) { return { backgroundColor: "#10FF00" }; - } else if (respuesta === respuestaSeleccionada) { + } else if (answer === selectedAnswers) { return { backgroundColor: "red" }; } - } else if (respuesta === respuestaSeleccionada) { + } else if (answer === selectedAnswers) { return isDarkTheme ? { color: "#333333", backgroundColor: "#F0F0F0" } : { backgroundColor: "#333333", color: "#F0F0F0" }; @@ -136,93 +136,88 @@ const JuegoPreguntas = () => { return {}; }; - const handleSiguientePregunta = () => { - if (respuestaSeleccionada === preguntaActual.correcta) { - const newCorrectQuestions = preguntasCorrectas + 1; - setPuntuacion(puntuacion + 1); - setPreguntasCorrectas(newCorrectQuestions); + const handleNextQuestion = () => { + if (selectedAnswers === actualQuestion.correcta) { + const newCorrectQuestions = correctAnswers + 1; + setPoints(points + 1); + setCorrectAnswers(newCorrectQuestions); } else { - const newIncorrectQuestions = preguntasFalladas + 1; - setPreguntasFalladas(newIncorrectQuestions); + const newIncorrectQuestions = incorrectAnswers + 1; + setIncorrectAnswers(newIncorrectQuestions); } - const pregunta = { - pregunta: preguntaActual.pregunta, - respuestas: preguntaActual.respuestas, - correcta: preguntaActual.correcta, - respuesta: respuestaSeleccionada, + const question = { + pregunta: actualQuestion.pregunta, + respuestas: actualQuestion.respuestas, + correcta: actualQuestion.correcta, + respuesta: selectedAnswers, }; - setQuestionsToSave([...questionsToSave, pregunta]); + setQuestionsToSave([...questionsToSave, question]); - setTiempoTotal(tiempoTotal + tiempoRestante); - setRespuestaSeleccionada(null); - setTiempoRestante(10); + setTotalTime(totalTime + timeLeft); + setSelectedAnswer(null); + setTimeLeft(10); setProgressPercent(100); - if (indicePregunta + 1 < preguntas.length) { - setIndicePregunta(indicePregunta + 1); - setPreguntaActual(preguntas[indicePregunta + 1]); + if (questionIndex + 1 < questions.length) { + setQuestionIndex(questionIndex + 1); + setActualQuestion(questions[questionIndex + 1]); } else { - setJuegoTerminado(true); - if (preguntasCorrectas + preguntasFalladas > 0) { - const preguntasTotales = preguntasCorrectas + preguntasFalladas; - const tMedio = tiempoTotal / preguntasTotales; - setTiempoMedio(tMedio); + setEndgame(true); + if (correctAnswers + incorrectAnswers > 0) { + const totalAnswers = correctAnswers + incorrectAnswers; + const avgTime = totalTime / totalAnswers; + setAverageTime(avgTime); } } }; useEffect(() => { - if (juegoTerminado && tiempoMedio !== 0) { - guardarPartida(); + if (endgame && averageTime !== 0) { + saveGame(); } // eslint-disable-next-line - }, [juegoTerminado]); + }, [endgame]); - const guardarPartida = async () => { + const saveGame = async () => { //Now we store the game in the stats DB const username = localStorage.getItem("username"); const newGame = { username: username, gameMode: "clasico", gameData: { - correctAnswers: preguntasCorrectas, - incorrectAnswers: preguntasFalladas, - points: puntuacion, - avgTime: tiempoMedio, + correctAnswers: correctAnswers, + incorrectAnswers: incorrectAnswers, + points: points, + avgTime: averageTime, }, questions: questionsToSave, }; try { - const response = await axios.post(URL + "/saveGameList", newGame); - console.log("Solicitud exitosa:", response.data); + await axios.post(URL + "/saveGameList", newGame); } catch (error) { - console.error( - "Error al guardar el juego en la lista de partidas:", - error - ); + console.error(error); } try { - const response = await axios.post(URL + "/saveGame", newGame); - console.log("Solicitud exitosa:", response.data); + await axios.post(URL + "/saveGame", newGame); } catch (error) { console.error("Error al guardar el juego:", error); } }; const handleRepetirJuego = () => { - // Reiniciar el estado para repetir el juego - setIndicePregunta(0); - setPuntuacion(0); - setRespuestaSeleccionada(null); - setTiempoRestante(10); - setJuegoTerminado(false); - setMostrarMenu(false); - setPreguntasCorrectas(0); - setPreguntasFalladas(0); - setTiempoMedio(0); - setTiempoTotal(0); + // Reset all the game variables + setQuestionIndex(0); + setPoints(0); + setSelectedAnswer(null); + setTimeLeft(10); + setEndgame(false); + setShowMenu(false); + setCorrectAnswers(0); + setIncorrectAnswers(0); + setAverageTime(0); + setTotalTime(0); }; if (isLoading) { @@ -254,13 +249,13 @@ const JuegoPreguntas = () => { borderRadius="lg" boxShadow="lg" > - {mostrarMenu ? ( + {showMenu ? ( {t("pages.classic.finished")}

- {t("pages.classic.score")} {puntuacion}/{preguntas.length} + {t("pages.classic.score")} {points}/{questions.length}

- {preguntasFalladas === 0 ? ( + {incorrectAnswers === 0 ? ( Jordi Hurtado {t("pages.classic.easterEgg")} @@ -278,15 +273,15 @@ const JuegoPreguntas = () => { ) : ( - {t("pages.classic.question")} {indicePregunta + 1} + {t("pages.classic.question")} {questionIndex + 1} -

{preguntaActual.pregunta}

+

{actualQuestion.pregunta}

- {preguntaActual.respuestas.map((respuesta, index) => ( + {actualQuestion.respuestas.map((respuesta, index) => (