script.js

'use strict';

// Player 1 score element
// using 'id' not classes, we use # to call the id name
const player0ScoreEl = document.getElementById('score--0');

// Player 2 score element
// In this line, it works exactly as above, however we can get the element by id using this method call, " getElementById('....) "
const player1ScoreEl = document.getElementById('score--1');

// Score 0 element
const scoreResetTo0 = 0;

// This is for the dice roll in the middle;
const diceEl = document.querySelector('.dice');

// Players class sections - Color palette and background

const player0El = document.querySelector(' .player--0');

const player1El = document.querySelector(' .player--1');

// This is our buttons;
const btnNew = document.querySelector('.btn--new');
const btnDiceRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');

// Adding score value for player 1 based on roll on the "current: ...." card ;
let player0Score = document.getElementById('current--0');

// Adding score value for player 2 based on rol;
let player1Score = document.getElementById('current--1');

// Global Variable;
let scores, CurrentScore, activePlayer, playing;

const startingField = function () {
  // Arrays to hold the player's score
  scores = [0, 0];

  // Players current score;
  CurrentScore = 0;

  // Players current score;
  activePlayer = 0;

  playing = true;

  player0ScoreEl.textContent = 0;
  player1ScoreEl.textContent = 0;
  player0Score.textContent = 0;
  player1Score.textContent = 0;

  // Hide the dice again
  diceEl.classList.add('hidden');

  // Getting rid of both players winner class for both players
  player0El.classList.remove('player--winner');

  player1El.classList.remove('player--winner');

  // Getting rid of player 1 active class, and also adding player--active class to player 0;
  player0El.classList.add('player--active');

  player1El.classList.remove('player--active');
};

// run it off the bat
startingField();

//-------------------------------------------

// Adding the 'hidden' class element to hide the actual 'dice' class from our index.html file;
diceEl.classList.add('hidden');

// Switching player functionality
const switchPlayer = function () {
  document.getElementById(`current--${activePlayer}`).textContent = 0;

  CurrentScore = 0;

  // 2. Switch to player 2

  // we are checking If the current active player is 0, then switch to new active player to be 1. Since the players are named 0 and 1, else it should be 0.
  activePlayer = activePlayer === 0 ? 1 : 0;

  //   Toggling player 1 class list - 'player--active'
  player0El.classList.toggle('player--active');

  // Toggling player 2 class list - 'player--active'
  player1El.classList.toggle('player--active');
};

//-------------------------------------------

// New dice roll btn action;
btnDiceRoll.addEventListener(
  'click',
  function () {
    if (playing) {
      // 1. Generating a random dice roll

      let dice = Math.trunc(Math.random() * 6) + 1; // Gives a random number 1-5 +1 for (6 die face values)

      console.log(dice);
      // 2. Display dice to users - (Getting rid of the hidden class to show dice)
      diceEl.classList.remove('hidden');

      // Now we need to display the correct dice roll according to roll to users instead of defaulted die 5;
      // We use a template literal to change the image number source based on the png file name
      // Example 'dice-${random number generated by dice variable}.png
      // diceEl.src is a DOM element we can manipulate from the index.html;
      diceEl.src = `dice-${dice}.png`;

      // 3. Check if the dice roll was 1.

      if (dice !== 1) {
        // Add up dice roll to players score if it is NOT 1.

        CurrentScore = CurrentScore + dice;

        // Dynamic ID name for users score element;
        document.getElementById(`current--${activePlayer}`).textContent =
          CurrentScore;
      } else {
        // Calling function to switch player;
        switchPlayer();
      }
    } // end of playing if statement
  } //end of function click for new dice roll;
); // end of event handler for btn dice roll

btnHold.addEventListener('click', function () {
  if (playing) {
    console.log(scores[activePlayer]);
    // 1. add current score to active player's score

    // using the array to add active players' score
    scores[activePlayer] += CurrentScore;

    // Basically this ⬇️
    //   scores[1] = scores [1] + CurrentScore;

    document.getElementById(`score--${activePlayer}`).textContent =
      scores[activePlayer];

    // 2. Check if score is atlas 100. If so finish game, else switch to next player

    if (scores[activePlayer] >= 100) {
      // Get rid of this active player for winner class;
      //condition when player wins
      playing = false;

      // Removing dice when won
      diceEl.classList.add('hidden');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.remove('player--active');
      // Add the winner
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.add('player--winner');
    } // end of if statement
    else {
      // Switch to next player;
      switchPlayer();
    } // end of btnHold function
  } // end of if statement;
}); // end of add event listener

// -----------------------------------------

btnNew.addEventListener('click', startingField);