/*
GAME RULES:
- The game has 2 players, playing in rounds
- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn
- The player can choose to 'Hold', which means that his ROUND score gets added to his GLBAL score. After that, it's the next player's turn
- The first player to reach 100 points on GLOBAL score wins the game
*/

var scores, roundScore, activePlayer, isGamePlaying;

// document.querySelector("#current-" + activePlayer).textContent = dice;
// document.querySelector("#current-" + activePlayer).innerHTML = "<h1>" + dice + "</h1>";

//-----------------------------------------------------------------
// var x = document.querySelector("#score-1").textContent;
// console.log(x);

//initializing everything
init();

function init() {
  // initializing global variable
  scores = [0, 0];
  roundScore = 0;
  activePlayer = 0;
  isGamePlaying = true;

  // make dice invisible
  document.querySelector(".dice").style.display = "none";

  // initializing user inteface
  document.getElementById("current-0").textContent = "0";
  document.getElementById("current-1").textContent = "0";
  document.getElementById("score-0").textContent = "0";
  document.getElementById("score-1").textContent = "0";
  document.querySelector(".player-0-panel").classList.remove("active");
  document.querySelector(".player-1-panel").classList.remove("active");
  document.querySelector(".player-0-panel").classList.remove("winner");
  document.querySelector(".player-1-panel").classList.remove("winner");
  document.querySelector(".player-0-panel").classList.add("active");
  document.getElementById("name-0").textContent = "PLAYER 1";
  document.getElementById("name-1").textContent = "PLAYER 2";
}

function changePlayer() {
  roundScore = 0;
  if (activePlayer === 0) {
    activePlayer = 1;
    document.querySelector("#current-0").textContent = 0;
  } else {
    activePlayer = 0;
    document.querySelector("#current-1").textContent = 0;
  }
  // make dice invisible
  document.querySelector(".dice").style.display = "none";

  //change active theme
  document.querySelector(".player-0-panel").classList.toggle("active");
  document.querySelector(".player-1-panel").classList.toggle("active");
}

// add functionality for roll btn
document.querySelector(".btn-roll").addEventListener("click", function() {
  if (isGamePlaying) {
    //create random number
    var dice = Math.floor(Math.random() * 6) + 1;
    // disply the result
    var diceDOM = document.querySelector(".dice");
    diceDOM.style.display = "block";
    diceDOM.src = "./dice-" + dice + ".png";
    // update current scores, if the rolled number was not one
    if (dice !== 1) {
      roundScore += dice;
    } else {
      changePlayer();
    }
    // change current score in user inteface
    document.querySelector("#current-" + activePlayer).textContent = roundScore;
  }
});

// add functionality for hold btn
document.querySelector(".btn-hold").addEventListener("click", function() {
  if (isGamePlaying) {
    //update score
    scores[activePlayer] += roundScore;

    //change score in user interface
    document.getElementById("score-" + activePlayer).textContent =
      scores[activePlayer];

    //find winner!
    if (scores[activePlayer] >= 20) {
      document.getElementById("name-" + activePlayer).textContent =
        "Winner! :)";
      document.querySelector(".dice").style.display = "none";
      document
        .querySelector(".player-" + activePlayer + "-panel")
        .classList.remove("active");
      document
        .querySelector(".player-" + activePlayer + "-panel")
        .classList.add("winner");

      isGamePlaying = false;
    } else {
      //change player
      changePlayer();
    }
  }
});

// add functionality for newGame btn
document.querySelector(".btn-new").addEventListener("click", init);


