A more fair Pig Game

[pauff]

I just finished learning the Pig Game, it's a simple but fun game, but I think it may not be very fair to the second player, since they don't have a chance to roll the dice one more time after the first player reached 100 points. So I made a more fair version of the game, and felt very good about it 😄 Below is the JavaScript code, feel free to test it and let me know if you found any bug or have any suggestions!

"use strict";

const player0El = document.querySelector(".player--0");
const player1El = document.querySelector(".player--1");
const score0El = document.querySelector("#score--0");
const score1El = document.getElementById("score--1");
const current0El = document.getElementById("current--0");
const current1El = document.getElementById("current--1");

const diceEl = document.querySelector(".dice");
const btnNew = document.querySelector(".btn--new");
const btnRoll = document.querySelector(".btn--roll");
const btnHold = document.querySelector(".btn--hold");

// A "finalRound" variant added to detect if it's final roll for player 2
let scores, currentScore, activePlayer, gamePlaying, finalRound;

function init() {
	score0El.textContent = 0;
	score1El.textContent = 0;
	current0El.textContent = 0;
	current1El.textContent = 0;
	diceEl.classList.add("hidden");
	player0El.classList.add("player--active");
	player1El.classList.remove("player--active");
	player0El.classList.remove("player--winner");
	player1El.classList.remove("player--winner");

	scores = [0, 0];
	currentScore = 0;
	activePlayer = 0;
	gamePlaying = true;
	finalRound = false;
}

function switchPlayer() {
	currentScore = 0;
	document.getElementById(`current--${activePlayer}`).textContent =
		currentScore;
	activePlayer = 1 - activePlayer; 
	player0El.classList.toggle("player--active");
	player1El.classList.toggle("player--active");
}

// End game function
function endGame() {
	gamePlaying = false;
	diceEl.classList.add("hidden");
	document.querySelector(".player--active").classList.add("player--winner");
	document.querySelector(".player--active").classList.remove("player--active");
}

init();

// Rolling dice functionality
btnRoll.addEventListener("click", function () {
	if (gamePlaying) {
		let dice = Math.trunc(Math.random() * 6) + 1;
		diceEl.classList.remove("hidden");
		diceEl.src = `dice-${dice}.png`;
		if (dice !== 1) {
			currentScore += dice;
			document.getElementById(`current--${activePlayer}`).textContent =
				currentScore;
		} else if (!finalRound) {
			switchPlayer();
		// it's the last chance for player 2 and they rolled a 1, player 1 wins
		} else {
			gamePlaying = false;
			diceEl.classList.add("hidden");
			player0El.classList.add("player--winner");
			player0El.classList.remove("player--active");
		}
	}
});

// Holding score functionality (where I made the changes)
btnHold.addEventListener("click", function () {
	if (gamePlaying) {
		// Add current score to active player's score
		scores[activePlayer] += currentScore;
		document.querySelector(`#score--${activePlayer}`).textContent =
			scores[activePlayer];

		// If player 1 scores 100 first, give player 2 one more chance to roll
		if (scores[activePlayer] >= 100 && activePlayer === 0 && !finalRound) {
			finalRound = true;
			switchPlayer();
		// If player 2 scores 100 first, they win
		} else if (
			scores[activePlayer] >= 100 &&
			activePlayer === 1 &&
			!finalRound
		) {
			endGame();
		// If it's the last chance for player 2 to score 100+ and beat player 1
		} else if (finalRound) {
			if (scores[0] <= scores[1]) {
				endGame();
			} else {
				gamePlaying = false;
				diceEl.classList.add("hidden");
				player0El.classList.add("player--winner");
				player0El.classList.remove("player--active");
			}
		} else {
			switchPlayer();
		}
	}
});

btnNew.addEventListener("click", init);