const mapSettings = document.getElementById('map-settings');
//const board = document.getElementById('board');
const map = document.getElementById('map');
const spinner = document.getElementById('spinner');

function generate() {
  spinner.classList.remove('d-none');
  const formData = new FormData(mapSettings)
  if (!formData.get('seed')) {
    formData.set('seed', (new Date()).getTime() % 1e5);
  }
  const queryString = new URLSearchParams(formData).toString()
  map.src = '/map?' + queryString;
  map.classList.add('d-none');
  //map.width = formData.get('width');
}

mapSettings.addEventListener('submit', (e) => {
  e.preventDefault();

  generate()
});

generate()

map.addEventListener('load', () => {
  spinner.classList.add('d-none');
  map.classList.remove('d-none');
});