function solve () {
  let [p1Span, p2Span] = document.querySelectorAll(
    '#result span:nth-child(odd)'
  )

  let history = document.querySelector('#history')

  let cards = Array.from(document.querySelectorAll('img'))
  cards.forEach((c, i) => {
    c.addEventListener('click', compareCards)
    c.p1 = i < 8
    c.p2 = i >= 8
  })

  function compareCards () {
    this.src = './images/whiteCard.jpg'

    if (this.p1) {
      p1Span.textContent = this.name
    } else if (this.p2) {
      p2Span.textContent = this.name
    }

    if (p1Span.textContent && p2Span.textContent) {
      let p1Card = cards.find(c => c.p1 && c.name === p1Span.textContent)
      let p2Card = cards.find(c => c.p2 && c.name === p2Span.textContent)

      if (+p1Card.name > +p2Card.name) {
        p1Card.style.border = '2px solid green'
        p2Card.style.border = '2px solid red'
      } else {
        p2Card.style.border = '2px solid green'
        p1Card.style.border = '2px solid red'
      }

      history.textContent += `[${p1Span.textContent} vs ${p2Span.textContent}] `
      p1Span.textContent = ''
      p2Span.textContent = ''
    }
  }
}