[JavaScript] classList.toggle 기능

- classList.toggle: toggle('~~'): '~~'가 있으면 classList에서 없애고, 없으면 만들어준다.

-> 상황을 가정할 필요 없이 toggle달면 편한 이유

 

//  =========== Selecting elements ===========
const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');
// <p class="score" id="score--0">43</p>
const score0El = document.querySelector('#score--0');
const score1El = document.getElementById('score--1');
// const score1 = document.querySelector('#score--1');
const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');
// querySelector, getElementById 후자가 조금 더 빠르나, 큰 차이는 없음 (기능 동일)
const diceEl = document.querySelector('.dice');
const btnNew = document.querySelector('.btn--new');
const btnRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');

// ============= Starting conditions ================
// 숫자로 써도 js가 자동으로 문자열로 변환해줌
score0El.textContent = 0;
score1El.textContent = 0;
// 이미지 숨기기 -> CSS .hidden 추가 <img src="dice-5.png" alt="Playing dice" class="dice" />
diceEl.classList.add('hidden');

const scores = [0, 0];
let currentScore = 0;
let activePlayer = 0;

// ============= Rolling dice functionality ==============
btnRoll.addEventListener('click', function () {
  // 1. Generating a random dice roll
  const dice = Math.trunc(Math.random() * 6) + 1;

  // 2. Display dice
  diceEl.classList.remove('hidden');
  diceEl.src = `dice-${dice}.png`;
  console.log(dice);

  // 3. Check for rolled 1: if true, sitch to next player
  if (dice !== 1) {
    // Add dice to current score
    currentScore += dice;
    document.getElementById(
      `current--${activePlayer}`
    ).textContent = currentScore;
  } else {
    // Switch to next player
    // activePlayer가 0이면 1, 1이면 0 (삼항연산자)
    document.getElementById(`current--${activePlayer}`).textContent = 0;
    activePlayer = activePlayer === 0 ? 1 : 0;
    currentScore = 0;
    // *** toggle: 없으면 만들어주고, 있으면 제거해줌
    player0El.classList.toggle('player--active');
    player1El.classList.toggle('player--active');
  }
});