JSFiddle - React, Tailwind, and code Playground

by bgrins

CSS

.row {}
.col {width: 20px; height: 20px; border: solid 1px #ccc; display: inline-block;}
.col.selected { background: black; }
.col.scored { background: black; }

JavaScript

var MAX_WIDTH = 10;
var MAX_HEIGHT = 10;

var html = [];
for (var i = 0; i < MAX_WIDTH; i++) {
    grid.push(0);
    html.push("<div class='row' data-i="+i+">");
    for (var j = 0; j < MAX_HEIGHT; j++) {
        
        html.push("<div class='col' data-j="+j+"></div>");    
    }
    html.push("</div>");
}

$("body").html(html.join(""));

$(".row:last-child .col:first-child").toggleClass("selected");
$(".row:last-child .col:last-child").toggleClass("selected");
  
$("body").on("click", ".col", function(e) {
    $(e.target).toggleClass("selected");
    rescore();
});

rescore();

function domToArray() {
    var grid = [];
    for (var i = 0; i < MAX_WIDTH; i++) {
        
    }
    
}
function rescore() {
    for (var i = 0; i < grid.length; i++) {
        var selectedCols = $(".row[data-i=" + i + "] .col.selected");
        if (selectedCols.length == 0) { grid[i] = 0; }
        else {
             grid[i] = $(selectedCols[selectedCols.length-1]).data("j");   
        }
    }
    console.log(grid);
}