script.js

'use strict';

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


const diceEl = document.querySelector('.dice')
const btnNew = document.querySelector('.btn--new')
const btnRoll = document.querySelector('.btn--roll')
const btnHold = document.querySelector('.btn--hold')
let scores, currentScore, activePlayer, playing;
// starting conditions
const init = function() {
    diceEl.classList.add('hidden')
    scores = [0, 0]
    currentScore = 0;
    activePlayer = 0;
    playing = true;
    player0El.classList.remove('player--winner')
    player1El.classList.remove('player--winner')
    player0El.classList.add('player--active')
    player1El.classList.remove('player--active')
    document.querySelector('#score--0').textContent= 0;
    document.querySelector('#score--1').textContent= 0;
    document.querySelector('#current--1').textContent = 0;
    document.getElementById('current--0').textContent = 0;
}
init();

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

// Rolling dice functionality
btnRoll.addEventListener('click', function() {
    if (playing) {
    // 1. Generate dice roll
    const dice = Math.trunc(Math.random()*6)+1;
    
    // 2. Display a dice
    diceEl.classList.remove('hidden')
    diceEl.src = `dice-${dice}.png`

    // 3 . check if 1 and if true switch player
    if(dice !== 1) {
        // Add dice to current score
        currentScore += dice;
        document.getElementById(`current--${activePlayer}`).textContent = currentScore
    }else{
       switchPlayer();
    }
    }
})

btnHold.addEventListener('click', function() {
    if(playing) {
    // 1. add current score to active player's score
    scores[activePlayer] += currentScore;
    document.getElementById(`score--${activePlayer}`).textContent = scores[activePlayer]; 
    // 2. check if score is >=100 
    if (scores[activePlayer] >= 100) {
        //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{
    switchPlayer();
    }
}
})

btnNew.addEventListener('click', init)