minor problem with control structure not executing code the way I want it to

Making a game us JS which selects a winner based on who gets to a certain number the first. however when I implement an if statement it breaks my game as this IF statement is to merely stop the game as soon as a winner has been selected.

when I remove the if statement the code works and selects a winner however, you can still keep clicking on the dice roll button and this is not what I want to happen here. Thank you in advance!

var scores, roundScore,currentPlayer,playTime;

game();


document.querySelector('.btn-roll').addEventListener('click', function() {

if (playTime){

// 1. random number generator
var dice = Math.floor(Math.random() * 6) +1;
console.log(dice);

// 2. display the result 
var diceDom = document.querySelector('.dice');
diceDom.style.display = 'block';
diceDom.src = '/images/dice-' + dice + '.png';

// 3. update the round score if the rolled number was not a 1

if(dice !== 1){
// i. add score
roundScore += dice;
document.querySelector('#current-' + currentPlayer).textContent = 
roundScore;
} else {
// ii. next player
nextPlayer();


}
}
 });

  document.querySelector('.btn-hold').addEventListener('click', function() 
  {
  if (playTime){
  // 4. add current players score to global score 
   scores[currentPlayer] += roundScore;

   // i. update UI
   document.querySelector('#score-' + currentPlayer).textContent = 
   scores[currentPlayer];

    // ii. check who one the game
    if (scores[currentPlayer] >= 10){
 document.querySelector('#name-' + currentPlayer).textContent = 'You 
     are the winner!'
 document.querySelector('.dice').style.display = 'none';
 document.querySelector('.player-' + currentPlayer + '-panel'). 
     classList.add('winner');
 document.querySelector('.player-' + currentPlayer + '-panel'). 
     classList.remove('.active');
 playTime = false;
     } else {

    // iii. next player

 nextPlayer();
   }

    }



   });

  function nextPlayer(){
currentPlayer === 0 ? currentPlayer = 1 : currentPlayer = 0 ;
roundScore = 0;

//iii. reset scores to 0
document.getElementById('current-0').textContent = '0';
document.getElementById('current-1').textContent = '0';

//iiii. toggle active class for selected player
document.querySelector('.player-0-panel').classList.toggle('active');

document.querySelector('.player-1-panel').classList.toggle('active');

    //iiiii. remove dice image when new player is appointed
document.querySelector('.dice').style.display = 'none';

    }
    document.querySelector('.btn-new').addEventListener('click', game);

    function game (){
scores = [0, 0];
currentPlayer = 0;
roundScore = 0;

// hide dice on intital page load
    document.querySelector('.dice').style.display = 'none';

    // reset scores to 0
    document.getElementById ('score-0').textContent = '0';
    document.getElementById ('score-1').textContent = '0';
    document.getElementById ('current-0').textContent = '0';
    document.getElementById ('current-1').textContent = '0';
    document.getElementById('name-0').textContent = 'Player 1';
    document.getElementById('name-1').textContent = 'Player 2';
    // reset colour of player panels
    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');
    // re adding the active class
    document.querySelector('.player-1-panel').classList.add('active');

    }

I am expecting the If statement (playTime) which is located just under the queryselector '.btn-roll' to stop the game as soon as the winner is announced. but instead it is just not allowing this part of the code to run