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

function clearMap() {
  const mapnote = document.getElementById('mapnote');
  if (mapnote) {
    mapnote.textContent = '';
  }
  document.getElementById('mapgrid').removeAttribute('style');
}

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 = 16 - (bl_y.charCodeAt(0) - 65);
  tr_y = 16 - (tr_y.charCodeAt(0) - 65);
  
  renderMap([bl_x, tr_x], [tr_y, bl_y]);
}