script.js

'use strict';
// Selecting elements
const player0El = document.querySelector('.player--0')
const player1El = document.querySelector('.player--1')
const score0El = document.getElementById('score--0')
const score1El = document.getElementById('score--1')
const diceEl = document.querySelector('.dice')
const current0El = document.getElementById('current--0')
const current1El = document.getElementById('current--1')

// Buttons
const btnNew = document.querySelector('.btn--new')
const btnRoll = document.querySelector('.btn--roll')
const btnHold = document.querySelector('.btn--hold')

let scores, currentScore, activePlayer, playing

const init = () => {
  // Starting conditions
  scores = [0, 0]
  currentScore = 0
  activePlayer = 0
  playing = true

  score0El.textContent = 0
  score1El.textContent = 0
  current0El.textContent = 0
  current1El.textContent = 0

  diceEl.classList.add('hidden')
  player0El.classList.remove('player--winner')
  player1El.classList.remove('player--winner')
  player1El.classList.remove('player--active')
}
init()

// Switching function
const switchPlayer = () => {
  document.getElementById(`current--${activePlayer}`).textContent = 0
  currentScore = 0
  activePlayer = activePlayer === 0 ? 1 : 0
  player0El.classList.toggle('player--active')
  player1El.classList.toggle('player--active')
}

// Rolling Button functionality
btnRoll.addEventListener('click', () => {
  if (playing) {

    // 1. Generating a random number
    const diceNumber = Math.trunc(Math.random() * 6) + 1
    // 2. Display the dice
    diceEl.classList.remove('hidden')
    diceEl.src = `dice-${diceNumber}.png`

    // 3. Checking for rolled 1
    if (diceNumber !== 1) {
      // Add diceNumber to current score
      currentScore += diceNumber
      document.getElementById(`current--${activePlayer}`).textContent = currentScore
    } else {
      // Switch to the next player
      switchPlayer()
    }
  }
})

// Hold Button functionality
btnHold.addEventListener('click', () => {
  if (playing) {

    // 1. Add currentScore to active player's score
    scores[activePlayer] += currentScore
    document.getElementById(`score--${activePlayer}`).textContent = scores[activePlayer]
    // 2. Check if player's score is >= 100
    if (scores[activePlayer] >= 100) {
      // (Yes) Finish the game
      playing = false
      document.querySelector(`.player--${activePlayer}`).classList.add('player--winner')
      document.querySelector(`.player--${activePlayer}`).classList.remove('player--active')
      diceEl.classList.add('hidden')

    } else {

      // (No) Switch to the next player
      switchPlayer()
    }
  }

})

// Reset the game

btnNew.addEventListener('click', init)