From 40b1a51338fe49cb3a6bac07f24b3825504fbdcc Mon Sep 17 00:00:00 2001
From: rodpena <rodrigo.pena22@estudiantes.uva.es>
Date: Sat, 30 Nov 2024 19:34:47 +0100
Subject: [PATCH] colores

---
 script.js  | 55 ++++++++++++++++++++++++++++++++++++++++++++++++------
 styles.css |  2 +-
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/script.js b/script.js
index a0d84b6..5c7f0fa 100644
--- a/script.js
+++ b/script.js
@@ -204,13 +204,14 @@ function crearGraficoRadar(containerSelector, jugadoresSeleccionados = [], maxim
 
         svg.append("path")
             .attr("d", polygonPath(pathData))
-            .style("fill", "rgba(255, 0, 0, 0.4)")
-            .style("stroke", "red")
+            .style("fill", jugador.color)
+            .style("fill-opacity", 0.4)
+            .style("stroke", jugador.color)
             .style("stroke-width", 2);
     });
 }
 
-// Modificar cargarJugadoresDesdeArchivo para calcular máximos
+// Modificar cargarJugadoresDesdeArchivo para calcular máximos y añadir evento al contenedor
 function cargarJugadoresDesdeArchivo() {
     const csvPath = "assets/estadisticasRendimientoJugadores.csv";
     const ladoIzquierdo = d3.select("#lado-izquierdo");
@@ -224,6 +225,29 @@ 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
+        ];
+        
+
+        // Asignar un color único a cada jugador
+        data.forEach((d, i) => {
+            d.color = colores[i % colores.length];
+        });
 
         ladoIzquierdo
             .selectAll(".jugador-rect")
@@ -234,30 +258,49 @@ function cargarJugadoresDesdeArchivo() {
             .style("flex", "1")
             .style("margin", "2px 0")
             .style("padding", "10px")
-            .style("background-color", "#FFC107")
+            .style("background-color", " #B3E5FC")
             .style("color", "#000")
             .style("display", "flex")
             .style("align-items", "center")
-            .style("justify-content", "space-between")
+            .style("justify-content", "center")
+            .style("border", "2px solid transparent") // Inicialmente sin color en el borde
+            .on("click", function (event, d) {
+                // Alternar selección del jugador
+                const checkbox = d3.select(this).select(".jugador-checkbox");
+                const isChecked = checkbox.property("checked");
+                checkbox.property("checked", !isChecked);
+
+                // Cambiar borde según selección
+                d3.select(this)
+                    .style("border", !isChecked ? `3px solid ${d.color}` : "2px solid transparent");
+
+                gestionarCheckboxes(data, maximos);
+            })
             .each(function (d) {
                 d3.select(this)
                     .append("div")
                     .attr("class", "jugador-numero")
                     .style("font-weight", "bold")
                     .style("font-size", "1.2em")
+                    .style("flex", "0 0 auto") // Mantiene el número fijo en la izquierda
+                    .style("text-align", "left")
                     .text(`${d.Nº}º`);
 
+                // Mostrar el nombre del jugador
                 d3.select(this)
                     .append("div")
                     .attr("class", "jugador-nombre")
                     .style("font-size", "1.2em")
+                    .style("text-align", "center")
+                    .style("flex", "1") // Permite que el nombre ocupe el resto del espacio
                     .text(d.Nombre);
 
+
                 d3.select(this)
                     .append("input")
                     .attr("type", "checkbox")
                     .attr("class", "jugador-checkbox")
-                    .on("change", () => gestionarCheckboxes(data, maximos));
+                    .style("display", "none"); // Ocultar el checkbox visualmente
             });
     });
 }
diff --git a/styles.css b/styles.css
index 3276e21..4c4a32a 100644
--- a/styles.css
+++ b/styles.css
@@ -113,7 +113,7 @@ body {
 /* Div izquierdo (ocupa de arriba a abajo) */
 #lado-izquierdo {
     flex: 1; /* Ocupa el 30% del espacio */
-    background-color: #D1C4E9; /* Fondo lila claro */
+    background-color: #0288D1; /* Fondo lila claro */
     border: 1px solid black; /* Borde de separación */
     display: flex; /* Si tiene contenido, lo organiza con flex */
     flex-direction: column; /* Coloca los elementos en columna */
-- 
GitLab