commit checkBox jugadores js

script.js

@@ -89,7 +89,7 @@ function cargarJugadoresDesdeArchivo() {
     // Limpia cualquier contenido previo
     ladoIzquierdo.selectAll("*").remove();
 
-    // Configuración del contenedor para que los elementos hijos se distribuyan uniformemente
+    // Configuración del contenedor
     ladoIzquierdo
         .style("display", "flex")
         .style("flex-direction", "column")
@@ -111,15 +111,37 @@ function cargarJugadoresDesdeArchivo() {
             .style("color", "#000") // Color de texto
             .style("display", "flex") // Para alinear el contenido
             .style("align-items", "center") // Centrar contenido verticalmente
-            .style("justify-content", "center") // Centrar contenido horizontalmente
+            .style("justify-content", "space-between") // Espacio entre los elementos
             .each(function (d) {
-                // Mostrar solo el número y nombre del jugador
+                // Mostrar el número del jugador en el lado izquierdo
                 d3.select(this)
                     .append("div")
-                    .attr("class", "jugador-nombre")
+                    .attr("class", "jugador-numero")
                     .style("font-weight", "bold")
                     .style("font-size", "1.2em")
-                    .text(`${d.Nº}. ${d.Nombre}`);
+                    .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);
+
+                // Añadir un checkbox a la derecha
+                d3.select(this)
+                    .append("input")
+                    .attr("type", "checkbox")
+                    .attr("class", "jugador-checkbox") // Clase para aplicar estilos
+                    .style("flex", "0 0 auto") // No permite que se expanda
+                    .style("width", "20px") // Ancho del checkbox
+                    .style("height", "20px") // Alto del checkbox
+                    .style("border-radius", "50%") // Hace que sea circular
+                    .style("cursor", "pointer"); // Cambia el cursor a pointer
             });
     });
 }

styles.css

@@ -132,7 +132,7 @@ body {
         justify-content: center;
         font-weight: bold;
         font-size: 1.2em;
-    }
+        }
 }
 
 /* Div derecho (ocupa el resto del espacio) */