pig game project -3

홀드 버튼을 누르면 점수가 저장되고
원래 100점되면 게임이 끝나는건데
여기서는 테스트상 20점이 되면
게임이 끝나고 검정색으로 변한 뒤
그 후에는 버튼을 눌러도 더 이상 점수가 안올라가게 구현하였다.

먼저 위에

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

playing을 boolean으로 true로 잡아두고

btnHold.addEventListener('click', function () {
  if (playing) {
    //1.Add current score to active player's score
    scores[activePlayer] += currentScore;
    // scores[1] = scores[1] + currentScore
    document.getElementById(`score--${activePlayer}`).textContent =
      scores[activePlayer];

    //2. Check if player's score is >=100
    if (scores[activePlayer] >= 20) {
      //Finish the game
      playing = false;
      diceEl.classList.add('hidden');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.add('player--winner');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.remove('player--active');
    } else {
      //3.Switch to the next player
      switchPlayer();
    }
  }
});

이렇게 홀드버튼에 일단 addEventListen를 해줬다.
if문을 통해서 만약 스코어가 20이거나 이상이면
더 이상 play못하도록 playing=false;를 해주었다.
그리고 주사위도 없애주기 위해

diceEl.classList.add('hidden');

hidden remove해줬던걸 다시 add로 바꿔주었다.
그 후에

 document
        .querySelector(`.player--${activePlayer}`)
        .classList.add('player--winner');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.remove('player--active');

play--winner를 추가해주었고 (이기면 그 플레이어 섹션 화면이 검해지는 효과)
다른 player로 switch되어 active 되는 효과도 다시 없애주었다.

그 후에 else문에는

switchPlayer(); 이 함수 호출시켜줌..
이게 다른곳에서도 쓰인지라 이미 위에

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

이렇게 store해줬었다....ㅎㅎ

다음으로 New game을 누르면
모든게 초기화 되는 코드를 복습해보자~~

btnNew.addEventListener('click', init);

아주 간단하게 이렇게 할 수있는데
init variable에 이렇게 store 해줬다.

let scores, currentScore, activePlayer, playing;

// Starting conditions

const init = function () {
  scores = [0, 0];
  currentScore = 0;
  activePlayer = 0;
  playing = true;

  score0El.textContent = 0;
  score1El.textContent = 0;
  current0El.textContent = 0;
  current1El.textContent = 0;

  diceEl.classList.add('hidden');
  player0El.classList.remove('player--winner');
  player1El.classList.remove('player--winner');
  player0El.classList.add('player--active');
  player1El.classList.remove('player--active');
};

init();

함수 밖에 let 으로 빼주고
init()이렇게 해준 이유는
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
playing = true;
이게 원래 처음 나오는 화면에도 적용되는건데
이걸 안빼주면 처음화면에 이 아이들이 적용이 안되었다.
scoping이라는 개념이라는데 이건 나중에 또 자세히 배운다고 한다.
function안에서만 declare가 적용되기 때문
그래서 function밖에 declare를 해줘야 한다고 한다.