function renderMap(xx, yy) {
  if (xx[0] > 0 && xx[0] < 31 && yy[0] > 0 && yy[0] < 9 &&
      xx[1] > 0 && xx[1] < 31 && yy[1] > 0 && yy[1] < 9 &&
      xx[1] >= xx[0] && yy[1] >= yy[0]) {
    let grid = document.getElementById('grid');
    grid.style.top = `${yy[0]*10}%`;
    grid.style.left = `${100/31*xx[0]}%`;
    grid.style.height = `${(yy[1] - yy[0] + 1) * 10}%`;
    grid.style.width = `${100/31*(xx[1] - xx[0] + 1)}%`;
  } else {
    alert(`invalid coordinates x=${xx} y=${yy}`);
  }
}

function coordsToMap(coords_bl, coords_tr) {
  let bl_y = coords_bl[0];
  let tr_y = coords_tr[0];
  let bl_x = parseInt(coords_bl.slice(1));
  let tr_x = parseInt(coords_tr.slice(1));
  
  bl_y = 8 - (bl_y.charCodeAt(0) - 65);
  tr_y = 8 - (tr_y.charCodeAt(0) - 65);
  
  renderMap([bl_x, tr_x], [tr_y, bl_y]);
}