//my personal variables
let w = 10;
let h = 10;
let x = "✔";
let o = "⬤";
let lgrid = new Array(w);
let rgrid = new Array(w);
//Write arrays to html
function writegrid() {
    for (let i = 0; i < w; i++) {
        for (let j = 0; j < h; j++) {
            $('#lc' + i + '-' + j).html(lgrid[i][j]);
            $('#rc' + i + '-' + j).html(rgrid[i][j]);
        }
    }
}

$(function () {
    for (let i = 0; i < w; i++) {
        //create columns
        $('#local').append('<tr class="column" id="lt' + i + '"></tr>');
        $('#remote').append('<tr class="column" id="rt' + i + '"></tr>');
        for (let j = 0; j < h; j++) {
            //create cells
            $('#lt' + i).append('<td class="cellx" id="lcx' + i + '-' + j + '"></td>');
            $('#rt' + i).append('<td class="cellx" id="rcx' + i + '-' + j + '"></td>');
            //add divs to cells
            $('#lcx' + i + '-' + j).append('<div class="cell" id="lc' + i + '-' + j + '"></div>');
            $('#rcx' + i + '-' + j).append('<div class="cell" id="rc' + i + '-' + j + '"></div>');
            //add arrays to grids
            lgrid[i] = new Array(h);
            rgrid[i] = new Array(h);

        }
    }
    for (let i = 0; i < w; i++) {
        for (let j = 0; j < h; j++) {
            //randomly choose between o and x
            let rand = Math.floor(Math.random() * 2);
            if (rand == 0) {
                lgrid[i][j] = x;
                rgrid[i][j] = o;
            } else {
                lgrid[i][j] = o;
                rgrid[i][j] = x;
            }
        }
    }
    //sync grid
    writegrid();
});