const - JS | lectureDOM & Events Fundamentals

In this lecture, we will be concerned with switching from one active player to another. As we already know, whenever a player rolls a one, we will enter in the else block.

if (dice !== 1) {
  // Add rolled dice to current score
  currentScore += dice;
  // Assign current score to active player
  player0CurrentEl.textContent = currentScore;
} else {
  // Switch the player
}

We need to track which player is the current player to implement that. And to do that, we need to keep track of which player is the active player when the dice is rolled. That is, we need to know which player is right now playing. And with right now, I mean, whenever the button is clicked.

We will start by creating another variable that will hold 0 if the current player is player0, and it will hold one if the active player is player1.

let activePlayer = 0;

We set activePlayer to 0 because we start with the first player. Remember, player 1 is player0, and player 2 is player1. We have to do it this way because we will store both players' scores in an array representing the final scores.

const scores = [0, 0]

And remember that the array is zero-based, so the score of player 1 will be at position 0, and player 2 will be at position 1. And so that's why it will be handy to have the activePlayer variable here, also set to 0 and 1.

We will see that in action in the next lecture, where we will hold the scores. But for now, knowing which player is the active player will be important to display the current score for the current player and not just always for player0.

So instead of manipulating the element of player0, .i.e. the current score of player0, let's select the element dynamically.

To select the elements dynamically, instead of doing the selection as we did at the beginning for the players' current score

const player0CurrentEl = document.getElementById('current--0');
const player1CurrentEl = document.getElementById('current--1');

we will directly do the selection in the if condition. Based on the value of activePlayer, we will inject it in the getElementById method to dynamically get the current active player using template literals. Then assign to who ever the active player is its current score.

if (dice !== 1) {
  // Add rolled dice to current score
  currentScore += dice;
  // Assign current score to active player
  document.getElementById(`current--${activePlayer}`).textContent =
    currentScore;
}

In our else block, .i.e., if we roll a one, we need to switch the active player, which means changing our activePlayer variable from 0 to 1 or 1 to 0. Here is how we are going to do it using the ternary operator

else {
  // Switch the player
  activePlayer = activePlayer === 0 ? 1 : 0;
}

If you save everything and test, you will notice that it works, and we can actually switch players. But you've certainly noticed that when we switch players, the current score just keeps adding, and that's because when we switch players, we do not reset the current score.

You can also see that visually nothing has changed yet. That is, in the demo, when the player is switched, the background kind of changes. Another thing is that this current score of the player that rolled a one should also then be set back to 0 again. Meaning, the previous player should have its current score set to 0.

Let's first start by resetting the previous active player's current score to 0 and the current score variable back to 0

else {
  // Switch the player
  document.getElementById(`current--${activePlayer}`).textContent = 0;
  currentScore = 0;
  activePlayer = activePlayer === 0 ? 1 : 0;
}

Now, if you save everything and head back to the browser, you will see that the logic is now working as expected. The only thing that's left to do is that visual change. That's switching the white background for the active player.

To fix that, let's go back to our HTML file, and you will see that the active player has the player--active class.

<section class="player player--0 player--active">
  <!--HTML CODE-->
</section>
<section class="player player--1">
  <!--HTML CODE-->
</section>

The above code shows that the first section, which is for player0 right now, has the player--active class because player0 is always the first player. But then, as we switch to the other player, we want to remove that class from there and put it on the other player (or section).

As always, let's start by selecting these two players.

const player0El = document.querySelector('player--0');
const player1El = document.querySelector('player--1');

Then in our else condition in our event handler were we switch the active player, add the below lines of code.

player0El.classList.toggle('player--active');
player1El.classList.toggle('player--active');

As you may have noticed, I used a new method on the classList property. In the previous lectures, we used add, remove and contain. Now we are using toggle.

Toggle simply adds the class we give as parameter if it is not present on the given element, and if it is there, it will remove it. So we could do that manually also by checking if the class is there and onlyremoving it if it is, but using toggle takes that work away from us.

We toggle on both because on player0 it will remove the class if it's there, and if it's not, it will add it. And the same thing on the other player. And since we start with the player--active class on only one element, i.e., player0, then toggling both at the same time will ensure that it's only ever on one of the elements at once.

Go on and save everything and check the result in your browser! Now, the only thing that's missing to make this game work is holding the current score. That's going to be the topic of the next lecture.