$("#button_start_single").click(function() {
    $("#game").show();
    $("#menu").hide();
});

$("#button_about").click(function() {
    $("#about").show();
    $("#menu").hide();
});

$(".button_back").click(function() {
    $("#menu").show();
    $("#game").hide();
    $("#about").hide();
});

let width = 10;
let height = 10;

function createTable(name) {
    $("#game").append("<table id='field-" + name + "'></table>");
    for (let i = 0; i < height; i++) {
        $("#field-" + name).append("<tr id='row" + i + "'></tr>");
        for (let j = 0; j < width; j++) {
            $("#field-" + name + " #row" + i).append("<td id='data" + j + "'></td>");
            $("#field-" + name + " #row" + i + " #data" + j)
                .append(`<button data-i="${i}" data-j="${j}" class="field-button"></button>`);
        }
    }
    // $(".field-button").each(function () {
    //     let button = $(this);
    //     button.on("contextmenu", handleClick);
    //     button.on("click", handleClick);
    // });
}

createTable("player1");
createTable("player2");