From a5fd3b4c3285e8a6b2178c5b102ad65cac9cfeb0 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sat, 27 Apr 2024 11:47:25 +0200 Subject: [PATCH] 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) => (