function buildBoards() {
const ele = document.getElementById('rowBoards');
const eled3 = d3.select(ele);
for (var i = 0; i < mutable playerCount; i++) {
const ci = eled3.append('div')
.attr('class','col');
ci.append('div')
.attr('class','card-header text-center')
.style('background-color',playerColorsHex[i])
.text(playerColorsText[i]);
const cb = ci.append('div')
.attr('class','card-body')
.style('border-color','#000')
.style('border-width','thick')
.style('border-style','solid')
.style('border-radius','25px');
for (var j = 0; j < 6; j++) {
const rj = cb.append('div')
.attr('class','row');
for (var k = 0; k < 6; k++) {
const ck = rj.append('div')
.attr('class','col-2');
if (k < trackAvailability[j]) {
ck.append('button')
.attr('class','btn btn-primary shadow-none trackbtn trackbtn-'+trackColorsText[j])
.attr('data-bs-toggle','button')
.attr('autocomplete','off')
.attr('id','trackbtn-'+trackColorsText[j]+'-pl-'+i+'-n-'+k)
.attr('value',0);
}
}
}
$('.trackbtn').unbind('click').bind('click', function (e) {
var state = ($(this).val());
state ^= true;
$(this).val(state);
});
}
}