import Game from './game.js'

let p1, p2
while (!p1) {
  p1 = window.prompt('Enter player 1 name:')
}

while (!p2 && p1 !== p2) {
  p2 = window.prompt(p1 === p2
    ? `Please enter a different name than ${p1}.`
    : 'Enter player 2 name:')
}

window.onload = () => {
  document.getElementById('p1Name').innerText = p1
  document.getElementById('p2Name').innerText = p2
  let score1 = 0
  let score2 = 0;

  (function playGame (p1, p2) {
    document.getElementById('win').style.display = 'none'
    document.getElementById('turn').style.display = 'inline'
    document.getElementById('p1Score').innerText = score1
    document.getElementById('p2Score').innerText = score2

    const game = new Game(p1, p2)
    const player = document.getElementById('player')
    player.innerText = game.player

    document.querySelectorAll('#tictactoe td').forEach((el) => {
      el.innerText = ''
      el.onclick = (evt) => {
        el.onclick = undefined
        evt.target.innerText = game.sym
        evt.target.onclick = undefined

        const [row, col] = evt.target.classList
        game.turn(row, col)

        if (game.hasWinner()) {
          document.getElementById('winner').innerText = game.player
          document.getElementById('win').style.display = 'inline'
          document.getElementById('turn').style.display = 'none'

          if (game.player === p1) { document.getElementById('p1Score').innerText = ++score1 } else { document.getElementById('p2Score').innerText = ++score2 }

          document.getElementById('newGame').style.display = 'inline'
          document.getElementById('newGame').onclick = () => playGame(p1, p2)

          document.querySelectorAll('td').forEach(el => {
            el.onclick = undefined
          })
        } else {
          game.nextPlayer()
          player.innerText = game.player
        }
      }
    })
  })(p1, p2)
}