the main panel

A separate function, draw() will be used to position the cards on the screen according to what is in the g_main_cols arrays. CSS grid will make this very easy.

draw()
function draw() {
  for (var c=1;c<9;c++) {
    var ids=g_main_cols[c];
    for (var i=0;i<ids.length;i++) {
      var id=ids[i]; var r=i+1;
      var el=document.getElementById(id);
      el.style.gridRowStart=r;
      el.style.gridColumnStart=c;
    }
  }
}

But, of course, we're going to need 48 card images (ids 0 to 51 but with no image for 0, 13, 26 or 39) already on the screen.