cg-13-dice-game-extended

//an array storing players' point
let points = [];

//points that a player scores after each dice roll
let roundPoints;

//variable controlling players if equal to 0 plays player1 if equal to 1 plays player2
//as in programming we number from 0, player1 will have a value of 0 player2 a value of 1 this will make it easier to retrieve points from the array
let currentPlayer;

//boolean variable controlling gameplay if true we can play if false gameplay will be impossible
let canPlay;

// add an array that will store the addresses to the bone
const images = ["kosc1.png",
              "kosc2.png",
              "kosc3.png",
              "kosc4.png",
              "kosc5.png",
              "kosc6.png"];

//function responsible for preparing a new game
newGame();

function newGame() {
  //enable game
  canPlay = true;

  //the game always starts with player 1
  currentPlayer = 0;
  //hide the bone at the beginning of the game
  document.querySelector(".die").style.display = "none";

  //zero all scores
  points = [0, 0];
  roundPoints = 0;

  //we update the user interface with points
  document.getElementById("result-0").textContent = "0";
  document.getElementById("result-1").textContent = "0";
  document.getElementById("current-points-0").textContent = "0";
  document.getElementById("current-points-1").textContent = "0";

  //change the names to Player1 and Player2 because during gameplay we will modify these elements by setting the victory text
  document.getElementById("name-0").textContent = "Player1";
  document.getElementById("name-1").textContent = "Player 2";
  //remove the win class responsible for replacing the Player1/2 text with win
  document.querySelector(".player-0-panel").classList.remove("victory");
  document.querySelector(".player-1-panel").classList.remove("victory");

  // we remove the active class responsible for indicating the current player
  document.querySelector(".player-0-panel").classList.remove("active");
  document.querySelector(".player-1-panel").classList.remove("active");

  // we add the active class to Player1 because he is always the one who starts the game
  document.querySelector(".player-0-panel").classList.add("active");

  //show the panel in which we will set the gameplay points
  document.querySelector(".max-points").style.display = "block";

  //points you need to score to win

  maxPoints = document.getElementById("value").value;

  if (maxPoints != 0) {
    //enable to play
    canPlay = true;
  }
}

//we are adding an event detector to our page, this particular one will detect a click on the Throw Dice button
// wecreate an anonymous function - one without a name, which we will use only in this particular context and will not be able to use it outside of the
document.querySelector(".btn-throw").addEventListener("click", function () {
  if (canPlay) {
    document.querySelector(".max-points").style.display = "none";
    maxPoints = document.getElementById("value").value;

    //throw the dice, draw the value 1-6
    const eyeNumber = Math.floor(Math.random() * 6) + 1;

    //we create the variable bonePicture storing a reference to the bone element on the page and display the cube

    const diePicture = document.querySelector(".die");
    //select the appropriate graphic
    diePicture.src = images[eyeNumber - 1];

    //display the bone
    diePicture.style.display = "block";

    //update the result of the round if the dice didn't have a single eye rolled
    if (eyeNumber == 6 && lastThrow == 6) {
      points[currentPlayer] = 0;
      document.querySelector("#result-" + currentPlayer).textContent = "0";
      nextPlayer();
    } else if (eyeNumber != 1) {
      //we add the score
      roundPoints += eyeNumber;
      document.querySelector("#current-points-" + currentPlayer).textContent =
        roundPoints;
    } else {
      nextPlayer();
    }
    lastThrow = eyeNumber;
  }
});

//mechanism to switch player

function nextPlayer() {
  //conditional operator- condition is checked if true is returned then part after is executed ? if false then part after :
  currentPlayer == 0 ? (currentPlayer = 1) : (currentPlayer = 0);

  //we reset the round points
  roundPoints = 0;

  //we are zeroing the points in the user interface

  document.getElementById("current-points-0").textContent = "0";
  document.getElementById("current-points-1").textContent = "0";

  //switch the class so that it points to the current player toggle works so that if there is already a class indicated it removes it and if there is no class it is added to the given element
  document.querySelector(".player-0-panel").classList.toggle("active");
  document.querySelector(".player-1-panel").classList.toggle("active");
}

//program what to execute when the hold button is clicked
document.querySelector(".btn-hold").addEventListener("click", function () {
  if (canPlay) {
    //add points for a specific player
    points[currentPlayer] += roundPoints;

    //we update the UI
    document.querySelector("#result-" + currentPlayer).textContent =
      points[currentPlayer];

    //we check if the player has won
    if (points[currentPlayer] >= maxPoints) {
      //we block gameplay
      canPlay = false;
      //we set the text Victory for the winner!
      document.querySelector("#name-" + currentPlayer).textContent = "Victory!";
      //hide the die
      document.querySelector(".die").style.display = "none";

      //add a win class to the current player that will modify the win text
      document
        .querySelector(".player-" + currentPlayer + "-panel")
        .classList.add("win");
    } else {
      //if the player has not scored the required points to win then the player is switched over
      nextPlayer();
    }
  }
});

//clicking the new-game button activates the initialSettings function
document.querySelector(".btn-new-game").addEventListener("click", newGame);