Problème d'affichage dynamique JS

Bonjour à tous!

Voilà j'ai un exercice à faire où je dois créer un jeu de lancé de dé en JS avec un joueur 1 contre joueur 2. quand on lance le dé cela s'ajoute au score actuel sauf si on fait 1 le score retombe à zéro et on change de joueur. Il est possible de prendre le score actuel et l'ajouter au score total avec un bouton d'ajout afin de pas tout perdre quand on fait '1' puis on change de joueur. Je rencontre deux petits problèmes:

En arrivant sur la page ou en cliquant sur bouton "nouvelle partie" le lancé fonctionne mais le score actuel n'apparait pas pour le joueur avec la classe "active" au début. Quand je tombe sur '1' après quelques lancé (ou on clique sur ajouter score actuel au total) on change de joueur et là le score actuel devient dynamique... je comprends pas pourquoi il n'est pas dynamique dès le premier tour. De plus pour le joueur deux quand je veux ajouter le score actuel (donc celui tour en cours) du joueur au score total (de la partie donc) le score total du joueur 2 renvoie le paramètre NaN sur l'affichage du score... J'ignore malheureusement pourquoi..

Est-ce que l'un de vous sait pourquoi pourquoi? Je vous remercie beaucoup.

Voilà mon code:

HTML:

<!-- Table de jeu: joueur 1 contre joueur 2 -->
<div class="table_joueur">

        <!-- Joueur 1 initialisation -->
        <div class="interface_joueur_1 active">
            <div class="joueur" name="joueur1" id="joueur_1">JOUEUR 1</div>
            <div class="scoreTotal" id="scoreTotal_1">22</div>
            <div class="score_hold">
                <span class="actuel">Score actuel</span>
                <span class="joueur_score_actuel" id="scoreActuel_1">10</span>
            </div>
            <!-- Vainqueur! -->
            <div class="vainqueur_j1" style="display: none;">Vainqueur!</div>
        </div>

        <div class="dice_zone">
            <img src="face_6.png"  alt="dé du jeu" class="faces_de" style=" margin-left: 50%;">
            <button class="btn btn-outline-danger lancer" id="lancerDe">lancer</button>
            <button class="btn btn-warning ajout_total" id="ajoutTotal">Ajout score</button>
        </div>

        <!-- Joueur 2 initialisation -->
        <div class="interface_joueur_2 ">
            <div class="joueur" name="joueur2" id="joueur_2">JOUEUR 2</div>
            <div class="scoreTotal" id="scoreTotal_2">40</div>
            <div class="score_hold">
                <span class="actuel">Score actuel</span>
                <span class="joueur_score_actuel" id="scoreActuel_2">15</span>
            </div>
            <!-- Vainqueur! -->
            <div class="vainqueur_j2" style="display: none;">Vainqueur!</div>
        </div>         
        <script src="script.js"></script>
    </div>

JavaScript

/ Déclaration de toutes variable utilisées var ou let? /
var scoreTotal;
var scoreActuel;

var tourActif;
var lanceDe;

refresh();

/jet du dé avec l'event click (bouton jet de dé) /
document.querySelector('.lancer').addEventListener('click', function () {
if(lanceDe){
var face = Math.floor(Math.random() * 6)+ 1;

    var resultDe = document.querySelector('.faces_de');
    resultDe.style.display = 'block';
    resultDe.src = 'face_' + face +'.png';

    if(face !== 1){
        scoreActuel += face ;
        document.querySelector('#scoreActuel_' + tourActif).textContent = scoreActuel;
    } else {

        joueur_suivant();
        /* joueur suivant: fonction? variable pour alterner entre les joueurs? */
    }

}

});

document.querySelector('.ajout_total').addEventListener('click' , function() {
if(lanceDe){

    scoreTotal[tourActif] += scoreActuel;

    document.querySelector('#scoreTotal_'+ tourActif).textContent = scoreTotal[tourActif];

    if(scoreTotal[tourActif] >= 100){
        document.querySelector('#joueur_' + tourActif).textContent = 'VAINQUEUR !';
        document.querySelector('.faces_de').style.display = 'none';
        document.querySelector('.interface_joueur_' + tourActif).classList.add('vainqueur');
        document.querySelector('.interface_joueur_' + tourActif).classList.remove('active');

        //document.querySelector('.interface_joueur_' + tourActif).classList.add('vainqueur');
        //document.querySelector('.interface_joueur_' + tourActif).classList.remove('active');
        tourActif = false;
    }else{
        //joueur suivant
        joueur_suivant();
    }
}

});

function joueur_suivant(){

tourActif === 2 ? tourActif = 1: tourActif = 2;
scoreActuel = 0;

document.getElementById('scoreActuel_1').textContent = '0';
document.getElementById('scoreActuel_2').textContent = '0';
document.querySelector('.interface_joueur_1').classList.toggle('active');
document.querySelector('.interface_joueur_2').classList.toggle('active');
document.querySelector('.faces_de').style.display = 'none';

}

document.querySelector('.newgame').addEventListener('click', refresh);

/ fonction afin de soit initaliser la partie soit rafraichir le table des joueurs pour une nouvelle partie/
function refresh(){

scoreTotal = [0, 0];
scoreActuel = 0;
tourActif = 0;
lanceDe = true;

document.querySelector('.faces_de').style.display = 'none';
document.getElementById('scoreTotal_1').textContent = '0';
document.getElementById('scoreTotal_2').textContent = '0';
document.getElementById('scoreActuel_1').textContent = '0';
document.getElementById('scoreActuel_2').textContent = '0';
document.getElementById('joueur_1').textContent = 'JOUEUR 1';
document.getElementById('joueur_2').textContent = 'JOUEUR 2';
document.querySelector('.interface_joueur_1').classList.remove('vainqueur');
document.querySelector('.interface_joueur_2').classList.remove('vainqueur');
document.querySelector('.interface_joueur_1').classList.remove('active');
document.querySelector('.interface_joueur_2').classList.remove('active');

document.querySelector('.interface_joueur_1').classList.add('active');

}