app.js

/*
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

*/
let score,activePlayer,currentScore,gamePlay;
const init=()=>{
    score=[0,0];
    activePlayer=0;
    currentScore=0;
    gamePlay=true;
    document.querySelector('.dice').style.display='none';
    document.getElementById(`current-0`).innerHTML=currentScore;
    document.getElementById(`current-1`).innerHTML=currentScore;
    document.getElementById(`score-0`).innerHTML=score[0];
    document.getElementById(`score-1`).innerHTML=score[1];
    document.querySelector(`#name-0`).textContent='Player 1'
    document.querySelector(`#name-1`).textContent='Player 2'
    document.querySelector(`.player-0-panel`).classList.remove('winner');
    document.querySelector(`.player-1-panel`).classList.remove('winner');
    document.querySelector(`.player-0-panel`).classList.remove('active');
    document.querySelector(`.player-1-panel`).classList.remove('active');
    document.querySelector(`.player-0-panel`).classList.add('active');

}


init();


document.querySelector('.btn-roll').addEventListener('click',()=>{
    if(gamePlay)
    {
    let dice=Math.floor(Math.random()*6)+1;
    let diceDOM=document.querySelector('.dice');
    diceDOM.style.display='block';
    diceDOM.src=`dice-${dice}.png`;

    if(dice!==1){
        currentScore+=dice;
        document.getElementById(`current-${activePlayer}`).innerHTML=currentScore;
        
    }
    else{
    
        activePlayer ===0 ?activePlayer=1:activePlayer=0;
        currentScore=0;
        document.querySelector(`.player-0-panel`).classList.toggle('active');
        document.querySelector(`.player-1-panel`).classList.toggle('active');
        document.querySelector('.dice').style.display='none';
    }} 
});



document.querySelector('.btn-hold').addEventListener('click',()=>{
    if(gamePlay)
    {
        score[activePlayer]+=currentScore;
    document.querySelector(`#score-${activePlayer}`).textContent=score[activePlayer];
    if(score[activePlayer]>=20)
    {
        document.querySelector(`#name-${activePlayer}`).textContent='Winner!!'
        document.querySelector('.dice').style.display='none';
        document.querySelector(`.player-${activePlayer}-panel`).classList.add('winner');
        document.querySelector(`.player-${activePlayer}-panel`).classList.remove('active');
        gamePlay=false;

    }   
    else 
    nextPlayer();

    }

    });

document.querySelector(`.btn-new`).addEventListener('click',init);




const nextPlayer=()=>{

        // score[activePlayer]+=currentScore
        // document.getElementById(`score-${activePlayer}`).innerHTML=score[activePlayer];
        activePlayer ===0 ?activePlayer=1:activePlayer=0;
        currentScore=0;
        document.querySelector(`.player-0-panel`).classList.toggle('active');
        document.querySelector(`.player-1-panel`).classList.toggle('active');
        document.querySelector('.dice').style.display='none';

}













//document.querySelector(`#current-${activePlayer}`).textContent=dice;
//let x=document.querySelector(`#score-${activePlayer}`).textContent;
//console.log(x);