{
+ const [error, setError] = useState("");
+ const [info, setInfo] = useState("");
+ const [clasicoTime, setClasicoTime] = useState(
+ localStorage.getItem("clasicoTime")
+ );
+ const [clasicoPreguntas, setClasicoPreguntas] = useState(
+ localStorage.getItem("clasicoPreguntas")
+ );
+ const [bateriaTime, setBateriaTime] = useState(
+ localStorage.getItem("bateriaTime")
+ );
+
+ const handleConfig = () => {
+ const checkboxes = document.querySelectorAll(
+ '.topicCheckboxes input[type="checkbox"]'
+ );
+ const selectedThemes = [];
+
+ checkboxes.forEach((checkbox) => {
+ if (checkbox.checked) {
+ selectedThemes.push(checkbox.id);
+ }
+ });
+
+ if (selectedThemes.length === 0) {
+ alert("Debe haber al menos una temática seleccionada");
+ } else {
+ localStorage.setItem("selectedThemes", JSON.stringify(selectedThemes));
+ localStorage.setItem("clasicoTime", clasicoTime);
+ localStorage.setItem("clasicoPreguntas", clasicoPreguntas);
+ localStorage.setItem("bateriaTime", bateriaTime);
+
+ alert("Cambios realizados satisfactoriamente");
+ }
+ };
+
+ const handleClasicoChange = (event) => {
+ setClasicoTime(parseInt(event.target.value));
+ };
+
+ const handleClasicoPreguntas = (event) => {
+ setClasicoPreguntas(parseInt(event.target.value));
+ };
+
+ const handleBateriaChange = (event) => {
+ setBateriaTime(parseInt(event.target.value));
+ };
+
+ return (
+ <>
+
+
+
+ >
+ );
+};
+
+export default Config;
diff --git a/webapp/src/pages/ConoceCiudades/ConoceCiudades.css b/webapp/src/pages/ConoceCiudades/ConoceCiudades.css
deleted file mode 100644
index 75c733e9..00000000
--- a/webapp/src/pages/ConoceCiudades/ConoceCiudades.css
+++ /dev/null
@@ -1,78 +0,0 @@
-body {
- font-family: "Consolas", sans-serif;
- }
-
- .menuContainer{
- display: flex;
- flex-direction: column;
- justify-content: center;
- border: 3px solid #0F0F0F;
- padding: 1rem;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
- border-radius: 1rem;
- }
-
- .menuContainer > *{
- text-align: center;
- margin: 1rem 0;
-
- }
-
- .container h1 {
- text-align: center;
- }
-
- .questionContainer {
- display: grid;
- justify-content: center;
- align-items: center;
- border: 3px solid #0F0F0F;
- border-radius: 1rem;
- padding: 1rem;
- -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
- box-shadow: 10px 10px 5px 0px rgba(0,255,192,1);
- }
-
- .responsesContainer {
- display: grid;
- justify-content: center;
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(2, 1fr);
- gap: 1rem;
- margin-bottom: 1rem;
- }
-
- button{
- margin: 0.25rem;
- }
-
- /* CSS */
- .responsesContainer button {
- appearance: none;
- background-color: transparent;
- border: 0.13rem solid #0f0f0f;
- border-radius: 15px;
- color: #0f0f0f;
- padding: 1rem;
- text-align: center;
- text-decoration: none;
- transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
- user-select: none;
- -webkit-user-select: none;
- touch-action: manipulation;
- width: 100%;
- will-change: transform;
- margin: 0;
- }
-
- img {
- border-radius: 50%;
- width: 250px;
- height: 250px;
-}
-
-
-
\ No newline at end of file
diff --git a/webapp/src/pages/ConoceCiudades/ConoceCiudades.js b/webapp/src/pages/ConoceCiudades/ConoceCiudades.js
deleted file mode 100644
index dbaab41b..00000000
--- a/webapp/src/pages/ConoceCiudades/ConoceCiudades.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./Clasico.css";
-import Preguntas from "../../components/PreguntasConoceCiudades";
-import { useNavigate } from "react-router-dom";
-import Nav from '../../components/Nav/Nav.js';
-import { Link } from 'react-router-dom';
-import Footer from "../../components/Footer/Footer.js";
-
-const JuegoPreguntas = () => {
- const [indicePregunta, setIndicePregunta] = useState(0);
- const [puntuacion, setPuntuacion] = useState(0);
- const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null);
- const [tiempoRestante, setTiempoRestante] = useState(10);
- const [juegoTerminado, setJuegoTerminado] = useState(false);
- const [mostrarMenu, setMostrarMenu] = useState(false); // Estado para mostrar el menú al finalizar el juego
- const preguntaActual = Preguntas[indicePregunta];
- const navigate = useNavigate();
-
- useEffect(() => {
- if (tiempoRestante === 0) {
- setTimeout(() => {
- handleSiguientePregunta();
- }, 3000);
- }
- const timer = setInterval(() => {
- setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1));
- }, 1000);
- return () => clearInterval(timer);
- }, [tiempoRestante, indicePregunta]);
-
- useEffect(() => {
- if (juegoTerminado) {
- setMostrarMenu(true);
- }
- }, [juegoTerminado]);
-
- const handleRespuestaSeleccionada = (respuesta) => {
- if (!juegoTerminado) {
- setRespuestaSeleccionada(respuesta);
- }
- };
-
- const estiloRespuesta = (respuesta) => {
- if (juegoTerminado) {
- if (respuesta === preguntaActual.respuestaCorrecta) {
- return { backgroundColor: "green" };
- } else if (respuesta === respuestaSeleccionada) {
- return { backgroundColor: "red" };
- }
- } else {
- if (respuesta === respuestaSeleccionada) {
- return { backgroundColor: "#0F0F0F", color: "#F0F0F0" };
- }
- }
- return {};
- };
-
- const handleSiguientePregunta = () => {
- if (respuestaSeleccionada === preguntaActual.respuestaCorrecta) {
- setPuntuacion(puntuacion + 1);
- }
- setRespuestaSeleccionada(null);
- setTiempoRestante(10);
- if (indicePregunta + 1 < Preguntas.length) {
- setIndicePregunta(indicePregunta + 1);
- } else {
- setJuegoTerminado(true);
- }
- };
-
- const handleRepetirJuego = () => {
- // Reiniciar el estado para repetir el juego
- setIndicePregunta(0);
- setPuntuacion(0);
- setRespuestaSeleccionada(null);
- setTiempoRestante(10);
- setJuegoTerminado(false);
- setMostrarMenu(false);
- };
-
- if (mostrarMenu) {
- return (
- <>
-
-
-
¡Juego terminado!
-
- Tu puntuación: {puntuacion}/{Preguntas.length}
-
-
-
Volver al Menú Principal
-
-
- >
- );
- }
-
- return (
- <>
-
-
-
Pregunta {indicePregunta + 1}:
-
{preguntaActual.pregunta}
-
-
- {preguntaActual.respuestas.map((respuesta, index) => (
-
- ))}
-
-
Tiempo restante: {tiempoRestante}
-
Puntuación: {puntuacion}
-
-
- >
- );
-};
-
-export default JuegoPreguntas;