diff --git a/script.js b/script.js index 2c7cab20024ba7f8449c8db0eed4eb3ab61bc063..13115d8068deded83f104fe243c7e76a120d9582 100644 --- a/script.js +++ b/script.js @@ -226,22 +226,23 @@ function cargarJugadoresDesdeArchivo() { d3.csv(csvPath).then((data) => { const maximos = calcularMaximos(data); const colores = [ - "#FF0000", // Rojo vivo - "#FFFF00", // Amarillo brillante - "#00FF00", // Verde brillante - "#00FFFF", // Cyan brillante - "#0000FF", // Azul vivo - "#FF00FF", // Magenta vivo - "#FFA500", // Naranja vivo - "#800080", // Morado oscuro - "#FFC0CB", // Rosa brillante - "#FFD700", // Dorado brillante - "#8B4513", // Marrón - "#4B0082", // Ãndigo (reemplaza al Verde Azulado) - "#DC143C", // Carmesà - "#FF4500", // Naranja rojizo brillante (reemplaza al Azul Claro) - "#ADFF2F" // Verde amarillo + "#FF5733", // Rojo anaranjado brillante + "#33FF57", // Verde brillante + "#3357FF", // Azul brillante + "#F333FF", // Magenta + "#FFD733", // Amarillo brillante + "#33FFF5", // Cyan + "#FF33A1", // Rosa fuerte + "#A133FF", // Morado brillante + "#FF6F33", // Naranja fuerte + "#33FF94", // Verde agua + "#FF3333", // Rojo vivo + "#33A1FF", // Azul cielo + "#FF33D7", // Rosa intenso + "#6FFF33", // Verde limón + "#FF9333" // Naranja pastel ]; + // Asignar un color único a cada jugador @@ -365,16 +366,30 @@ function animatePoints(selector, finalValue, duration) { requestAnimationFrame((timestamp) => step(timestamp, timestamp)); } +// Ejecutar automáticamente la función de datos de temporada al cargar la página +document.addEventListener("DOMContentLoaded", () => { + restaurarFormaOriginal(); + datosTemporada(); + cargarDatosTemporada(); + resaltarBotonActivo("#div-superior"); +}); + +function resaltarBotonActivo(selector) { + d3.selectAll("#div-superior, #div-inferior").style("background-color", "#B3E5FC").style("color", "#333"); + d3.select(selector).style("background-color", "#0288D1").style("color", "#FFF").style("font-weight", "bold"); +} // Eventos de clic en los botones de datos d3.select("#div-superior").on("click", () => { restaurarFormaOriginal(); datosTemporada(); cargarDatosTemporada(); + resaltarBotonActivo("#div-superior"); }); d3.select("#div-inferior").on("click", () => { restaurarFormaOriginal(); rendimientoJugadores(); cargarJugadoresDesdeArchivo(); + resaltarBotonActivo("#div-inferior"); }); diff --git a/styles.css b/styles.css index 1899aadd97a2c4170f12a1b893919319ef0c68a9..0f40d62d0ce1b02134680a3d560adc5c408d1227 100644 --- a/styles.css +++ b/styles.css @@ -151,7 +151,7 @@ body { height: 100%; /* Asegura que ocupe toda la altura */ padding: 10px; /* Espaciado interno */ box-sizing: border-box; /* Incluye padding en el tamaño total */ - max-width: 70%; /* Garantiza que no exceda el 70% del ancho */ + max-width: 70%; /* Garantiza que no exceda el 70% del ancho */ }