//my personal variables
let w = 10;
let h = 10;
let lgrid = new Array(w);
let rgrid = new Array(w);
let waux = 10;
let haux = 10;
let x = "✔";
let o = "⬤";
let randomize = true;
let lauxgrid = new Array(w);
let rauxgrid = 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 writeauxgrid(){
    for (let i = 0; i < waux; i++) {
        for (let j = 0; j < haux; j++) {
            $('#lac' + i + '-' + j).html(lauxgrid[i][j]);
            $('#rac' + i + '-' + j).html(rauxgrid[i][j]);
        }
    }
}

function inittable(){
    for (let i = 0; i < w; i++) {
        //create rows
        $('#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 localcellx" id="lcx' + i + '-' + j + '"></td>');
            $('#rt' + i).append('<td class="cellx remotecellx" id="rcx' + i + '-' + j + '"></td>');
            //add divs to cells
            $('#lcx' + i + '-' + j).append('<div class="cell localcell" id="lc' + i + '-' + j + '"></div>');
            $('#rcx' + i + '-' + j).append('<div class="cell remotecell" id="rc' + i + '-' + j + '"></div>');
            //add arrays to grids
            lgrid[i] = new Array(h);
            rgrid[i] = new Array(h);

        }
    }
}

function initauxtable(){
    for (let i = 0; i < waux; i++) {
        //create rows
        $('#localaux').append('<tr class="column" id="lax' + i + '"></tr>');
        $('#remoteaux').append('<tr class="column" id="rax' + i + '"></tr>');
        for (let j = 0; j < haux; j++) {
            //create cells
            $('#lax' + i).append('<td class="cellx localauxcellx" id="lacx' + i + '-' + j + '"></td>');
            $('#rax' + i).append('<td class="cellx remoteauxcellx" id="racx' + i + '-' + j + '"></td>');
            //add divs to cells
            $('#lacx' + i + '-' + j).append('<div class="cell localauxcell" id="lac' + i + '-' + j + '"></div>');
            $('#racx' + i + '-' + j).append('<div class="cell remoteauxcell" id="rac' + i + '-' + j + '"></div>');
            //add arrays to grids
            lauxgrid[i] = new Array(haux);
            rauxgrid[i] = new Array(haux);
        }
    }
}

function randomizetable(){
    for (let i = 0; i < w; i++) {
        for (let j = 0; j < h; j++) {
            let r = Math.floor(Math.random() * 2);
            if (r == 0) {
                rgrid[i][j] = o;
            } else {
                rgrid[i][j] = x;
            }
            r = Math.floor(Math.random() * 2);
            if (r == 0) {
                lgrid[i][j] = o;
            } else {
                lgrid[i][j] = x;
            }
        }
    }
}

function randomizeaux(){
    for (let i = 0; i < waux; i++) {
        for (let j = 0; j < haux; j++) {
            let r = Math.floor(Math.random() * 2);
            if (r == 0) {
                rauxgrid[i][j] = o;
            } else {
                rauxgrid[i][j] = x;
            }
            r = Math.floor(Math.random() * 2);
            if (r == 0) {
                lauxgrid[i][j] = o;
            }  else {
                lauxgrid[i][j] = x;
            }
        }
    }
}

function randomizeall(){
    randomizetable();
    writegrid();
    randomizeaux();
    writeauxgrid();
}

function main() {
    inittable();
    initauxtable();
    if (randomize) {
        setInterval(randomizeall, 500);
    }
}

$(function () {
    main();
});