/**
 * Dom Declaration
 * Global option variables declaration
 */
const dom = {
  intro: document.getElementById('intro'),
  game: document.getElementById('game'),
  results: document.getElementById('results'),
  numbers: document.getElementsByClassName('number'),
  start: document.getElementById('start'),
  replay: document.getElementById('replay'),
  result: document.getElementById('result'),
  avg: document.getElementById('avg')
};
let w, h, opts = {}, game = {};



/**
 * Global setup function
 */
function setup() {
  w = window.innerWidth;
  h = window.innerHeight;
  opts.grid = Math.floor(Math.min(w, h)/8);
  opts.margin = 20;
  game.gamesWon = 0;
  game.gamesPlayed = 0;
  
  for (let i=0; i<dom.numbers.length; i++) {
    dom.numbers[i].style.width = opts.grid + 'px';
    dom.numbers[i].style.height = opts.grid + 'px';
    // Need to set number attribute because I can't rely on innerHTML
    dom.numbers[i].setAttribute('number', i+1);
    dom.numbers[i].onclick = function() { step(this); };
  }
}



/**
 * Reset
 */
function reset() {
  // Game variables
  game.currentNumber = 0;
  ++game.gamesPlayed;
  
  // Show the game
  dom.game.scrollIntoView({ 
    behavior: 'smooth'
  });
  
  // Lock buttons during animation and show them and add numbers
  for (let i=0; i<dom.numbers.length; i++) {
    dom.numbers[i].disabled = true;
    dom.numbers[i].classList.remove('hide');
    dom.numbers[i].innerHTML = i+1;
  }
  
  // Game setup animation
  setTimeout(function() {
    // Button animation
    let spots = [];

    // Generate possible spots
    for (let x=opts.grid/2+opts.margin*2; x<w-opts.grid/2-opts.margin*2; x+=opts.grid+opts.margin) {
      for (let y=opts.grid/2+opts.margin*2; y<h-opts.grid/2-opts.margin*2; y+=opts.grid+opts.margin) {
        spots.push({x: x, y: y});
      }
    }

    let pick, spot;

    // Pick a random spot for each number
    for (let i=0; i<dom.numbers.length; i++) {
      pick = Math.floor(Math.random()*spots.length);
      spot = spots.splice(pick, 1)[0];
      dom.numbers[i].style.left = spot.x + 'px';
      dom.numbers[i].style.top = spot.y + 'px';
    }

    setTimeout(function () {
      // Unlock buttons
      for (let i=0; i<dom.numbers.length; i++) {
        dom.numbers[i].disabled = false;
      }
    }, 500);
  }, 600);
}



/**
 * Game step
 * Called on each number press
 */
function step(numberBtn) {
  // Get user number input from the button
  let userNumber = parseInt(numberBtn.getAttribute('number'));
  
  // Hide everything on the first click
  if (game.currentNumber === 0) {
    for (let i=0; i<dom.numbers.length; i++) {
      dom.numbers[i].innerHTML = '';
    }
  }
  
  // Increment tested number
  // And check if input is correct
  if (++game.currentNumber === userNumber) {
    numberBtn.classList.add('hide');
    
    // Game is won
    if (game.currentNumber === dom.numbers.length) {
      dom.result.innerHTML = 'won!';
      ++game.gamesWon;
      end();
    }
  }
  
  // Game is lost
  else {
    // Show the user where they messed up
    numberBtn.innerHTML = numberBtn.getAttribute('number');
    
    dom.result.innerHTML = 'lost.';
    setTimeout(end, 500);
  }
  
  // End the game
  function end() {
    // Lock buttons during animation and show them and add numbers
    for (let i=0; i<dom.numbers.length; i++) {
      dom.numbers[i].disabled = true;
    }
    // Update the average and score
    dom.avg.innerHTML = Math.round(game.gamesWon/game.gamesPlayed*100);
    dom.results.scrollIntoView({
      behavior: 'smooth'
    });
  }
}



/**
 * Controls
 */
dom.start.addEventListener('click', reset);
dom.replay.addEventListener('click', reset);
window.addEventListener('resize', setup);
setup();