círculo.js

const circuloFondo = d3.arc()
    .innerRadius(0)
    .outerRadius(radioCirculo)
    .startAngle(0)
    .endAngle(Math.PI * 2);

const circuloCentral = d3.arc()
    .innerRadius(0)
    .outerRadius(radioCirculoCentral)
    .startAngle(0)
    .endAngle(Math.PI * 2);

const $svg = d3.select("#contenedorJuego")
    .append("svg")
    .attr('width', 400)
    .attr('height', 400);

$svg.append("g")
    .attr("transform", `translate(${centroX},${centroY})`)
    .append("path")
    .attr("d", circuloFondo)
    .attr("fill", negro);


const superiorIzquierda = $svg.append("g")
    .attr("transform", `translate(${centroX - distancia},${centroY - distancia})`)
    .attr("class", "boton")
    .append("path")
    .attr("d",
        d3.arc()
            .innerRadius(0)
            .outerRadius(radioCuarto)
            .startAngle(partidoEn16 * 12)
            .endAngle(partidoEn16 * 16)
    )
    .attr("fill", verde);


const superiorDerecha = $svg.append("g")
    .attr("transform", `translate(${centroX + distancia},${centroY - distancia})`)
    .attr("class", "boton")
    .append("path")
    .attr("d",
        d3.arc()
            .innerRadius(0)
            .outerRadius(radioCuarto)
            .startAngle(0)
            .endAngle(partidoEn16 * 4)
    )
    .attr("fill", rojo);
const inferiorIzquierda = $svg.append("g")
    .attr("transform", `translate(${centroX - distancia},${centroY + distancia})`)
    .attr("class", "boton")
    .append("path")
    .attr("d",
        d3.arc()
            .innerRadius(0)
            .outerRadius(radioCuarto)
            .startAngle(partidoEn16 * 8)
            .endAngle(partidoEn16 * 12)
    )
    .attr("fill", amarillo);

const inferiorDerecha = $svg.append("g")
    .attr("transform", `translate(${centroX + distancia},${centroY + distancia})`)
    .attr("class", "boton")
    .append("path")
    .attr("d",
        d3.arc()
            .innerRadius(0)
            .outerRadius(radioCuarto)
            .startAngle(partidoEn16 * 4)
            .endAngle(partidoEn16 * 8)
    )
    .attr("fill", azul);

// Encima de los otros círculos, el círculo central
$svg.append("g")
    .attr("transform", `translate(${centroX},${centroY})`)
    .append("path")
    .attr("d", circuloCentral)
    .attr("fill", negro);

const textoPuntaje = $svg.append("text")
    .attr("transform", `translate(${centroX},${centroY})`)
    .attr("fill", "#ffffff")
    .attr("font-size", 30)
    .attr("font-weight", "bold")
    .attr("font-family", "Courier")
    .style("text-anchor", "middle")
    .style("dominant-baseline", "central")
    .text("0")