const canon = document.querySelector('#canon')
const body = document.querySelector('body')

const toucheGauche = 37
const toucheDroite = 39
const toucheEspace = 32

let direction = null
let tireBloque = false

function deplacerCanon() {
  if (direction === null) {
    return
  }

  let position = canon.offsetLeft
  let vitesse = 5

  if (direction === 'gauche') {
    position = Math.max(10, position - vitesse)
  } else {
    position = Math.min(window.innerWidth - 60, position + vitesse)
  }

  canon.style.left = `${position}px`
}

function deplacerProjectiles() {
  const projectiles = document.querySelectorAll('.projectile')
  const aliens = document.querySelectorAll('.alien')

  projectiles.forEach((projectile) => {
    let position = projectile.offsetTop
    let positionGauche = projectile.offsetLeft
    let vitesse = 5

    position = position - vitesse

    if (position < 0) {
      projectile.remove()

      return
    }

    projectile.style.top = `${position}px`

    aliens.forEach((alien) => {
      const alienPositionGauche = alien.offsetLeft
      const alienPositionTop = alien.offsetTop

      if (
        positionGauche >= alienPositionGauche &&
        positionGauche <= alienPositionGauche + 96 &&
        position <= alienPositionTop
      ) {
        alien.remove()
        projectile.remove()

        const explosion = document.createElement('div')
        explosion.innerHTML = document.querySelector('#explosion').innerHTML
        explosion.classList.add('explosion')

        const audio = new Audio('./sons/explosion.mp3');
        audio.play();

        explosion.style.left = `${positionGauche-60}px`
        explosion.style.top = `${position-30}px`

        body.appendChild(explosion)
      }
    })
  })
}

function deplacerAliens() {
  const aliens = document.querySelectorAll('.alien')

  aliens.forEach((alien) => {
    let position = alien.offsetTop
    let vitesse = 2

    position = position + vitesse

    if (position >= canon.offsetTop) {
      alien.remove()

      return
    }

    alien.style.top = `${position}px`
  })
}

function ajouterAlien() {
  const aliens = document.querySelectorAll('.alien')

  if (aliens.length > 8) {
    return
  }

  const alien = document.createElement('div')
  alien.classList.add('alien')

  let positionGauche = Math.random() * (window.innerWidth - 150) + 45
  let positionTop = -96

  alien.style.left = `${positionGauche}px`
  alien.style.top = `${positionTop}px`

  body.appendChild(alien)
}

function tirer() {
  if (tireBloque) {
    return
  }

  tireBloque = true

  setTimeout(() => {
    tireBloque = false
  }, 500)

  const projectile = document.createElement('div')
  projectile.classList.add('projectile')

  let positionGauche = canon.offsetLeft + 25 - 10
  let positionTop = window.innerHeight - 110

  projectile.style.left = `${positionGauche}px`
  projectile.style.top = `${positionTop}px`

  body.appendChild(projectile)
}

setInterval(deplacerCanon, 10)
setInterval(deplacerProjectiles, 10)
setInterval(deplacerAliens, 50)
setInterval(ajouterAlien, 4000)

window.addEventListener('keydown', (e) => {
  if (e.keyCode === toucheGauche) {
    direction = 'gauche'
  }

  else if (e.keyCode === toucheDroite) {
    direction = 'droite'
  }

  else if (e.keyCode === toucheEspace) {
    tirer()
  }
})

window.addEventListener('keyup', (e) => {
  if (e.keyCode === toucheGauche) {
    direction = null
  }

  else if (e.keyCode === toucheDroite) {
    direction = null
  }
})