app.js

/* The Pig Game
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 GLOBAL 
  score. After that, it's the next player's turn
- The first player to reach 100 points on GLOBAL score wins the game

*/

// Declaring all the global variables at a single place
var scores, roundScore, activePlayer;

init();

/********************************************************************************************
 * Event Handlers for different events
 */

// Event Handler for Rolling the Dice
document.querySelector(".btn-roll").addEventListener("click", function() {
    // 1. Generate a Random Number for the dice:
    var dice = Math.floor(Math.random() * 6) + 1;

    // 2. Display the Result
    var diceDOM = document.querySelector(".dice");
    
    // Since the diceDOM is an <img> element, we can access its src attribute as a property
    diceDOM.src = "./img/dice-" + dice + ".png";
    diceDOM.style.display = "block";
    
    // 3. Update the roundScore iff dice !== 1
    if(dice !== 1) {    // When we don't roll a 1
        
        /* Add the score generated by the dice to the roundScore: */
        roundScore += dice;

        /* Display the roundScore to the current activePlayer's temporary score holder */
        document.getElementById("current-" + activePlayer).textContent = roundScore;

    } else {    // When we roll a 1
        // We use the DRY (Don't Repeat Yourself) Principle here and use the 
        // nextActivePlayer() function to achieve our intended functionality
        nextActivePlayer();
    }
});

// Adding the Event Handler for the Hold Button
document.querySelector(".btn-hold").addEventListener("click", function() {
    // 1. Add the current round score to the global score of the active player
    scores[activePlayer] += roundScore;

    // 2. Display the global score in the game
    document.querySelector("#score-" + activePlayer).textContent = scores[activePlayer];

    // 3. Check if the active player has won or not.
    if (scores[activePlayer] >= 20) { // active player has won the game
        // 1. Show that the active player is the winner
        document.querySelector("#name-" + activePlayer).textContent = "Winner!";

        // 2. Hide the dice
        document.querySelector(".dice").style.display = "none";
        
        // 3. Prettify the "Winner!" using the addition of .winner class (defined in the 
        // style.css) to the .player-x-panel (x = {0,1}) class of the markup
        document.querySelector(".player-" + activePlayer + "-panel").classList.add("winner");
        document.querySelector(".player-" + activePlayer + "-panel").classList.remove("active");

    } else { // if the active player has not won, then it is next player's turn
        // We use the DRY (Don't Repeat Yourself) Principle here and use the 
        // nextActivePlayer() function to achieve our intended functionality
        nextActivePlayer();
    }
});

// Event Handler for Starting a New Game
document.querySelector(".btn-new").addEventListener("click", init);

// Event Handler for Showing the Rules
document.querySelector("#rules").addEventListener('click', function() {
    var rule = [];
    rule[0] = "The game has 2 players, playing in rounds (By default, Player 1 starts)";
    rule[1] = "In each turn, a player rolls a dice as many times as s/he wishes. Each die roll's result gets added to their ROUND score";
    rule[2] = "BUT, if the player rolls a 1, entire ROUND score accumulated till now, becomes 0. After that, it's the next player's turn";
    rule[3] = "The player can choose to 'Hold', which means that the current player's ROUND score gets added to their GLOBAL score. After that, it's the next player's turn";
    rule[4] = "The first player to reach 100 points on GLOBAL score wins the game";
    
    var showAlert = function(messageList) {
        var messageString = "";
        for(var i = 0; i < messageList.length; ++i)
            messageString += (i + 1) + ". " + messageList[i] + ".\n";
        alert(messageString);
    }
    showAlert(rule);
});

/********************************************************************************************
 * Function Declarations for Global Use
 */

// function to toggle between players:
function nextActivePlayer() {
    /* Change the activePlayer using the ternary operator */
    activePlayer = activePlayer === 0 ? 1 : 0;
    
    /* Reset the roundScore to 0 */
    roundScore = 0;

    /* Set the current scores of both Players (P1 & P2) to 0 */
    document.getElementById("current-0").textContent = 0;
    document.getElementById("current-1").textContent = 0;

    /* Toggle the style for the active player */ 
    document.querySelector(".player-1-panel").classList.toggle("active");
    document.querySelector(".player-0-panel").classList.toggle("active");
    
    /* Hide the dice image when we roll a 1 */
    document.querySelector(".dice").style.display = "none";
}

function init() {
    scores = [0,0];
    roundScore = 0;
    activePlayer = 0;   //  0 => Player-1;  1 => Player-2

    // Hide the dice image when opening the page for the first time
    document.querySelector('.dice').style.display = "none";

    document.getElementById("score-0").textContent = "0";   // Init 0 for P1
    document.getElementById("score-1").textContent = "0";   // Init 0 for P2
    document.getElementById("current-0").textContent = "0"; // Init 0 for roundScore P1
    document.getElementById("current-1").textContent = "0"; // Init 0 for roundScore P2

    // The names of the Players should be restored to what they were previously
    document.querySelector("#name-0").textContent = "Player 1";
    document.querySelector("#name-1").textContent = "Player 2";

    // Remove all the classes that might've been applied to the player panels before
    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");

    // Add the active class to .player-0-panel as the active player after init() is P1
    document.querySelector(".player-0-panel").classList.add("active");
}