diff --git a/script.js b/script.js index 4d304afc0de46050c7252b5dc54130286967f570..a0c371e49f5eff932ec712ecec9e6dc725b53f6f 100644 --- a/script.js +++ b/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 }); }); } diff --git a/styles.css b/styles.css index 6fef86aad340f6d3885a8e331bd2da088ceeacf4..3276e21a1a925946b86318cb4cdf874b89a114ee 100644 --- a/styles.css +++ b/styles.css @@ -132,7 +132,7 @@ body { justify-content: center; font-weight: bold; font-size: 1.2em; - } + } } /* Div derecho (ocupa el resto del espacio) */