addEventListener javascript

alpha go
Les bases HTML/CSS
Javascript

Bonjour à tous,

Un souci avec mon code javascript.

un jeu de dé pour 2 joueurs

1-Quand le premier joueur1 est initialisé on peut lancer les dé avec l'élément html roll dice et la fonction js (displayScore()) tous va bien.
2-Quand je change de joueur avec l'élément html hold et la fonction js (changePlayer()) tout va bien on passe au 2ème joueur
et le dé se lance avec le 2ème joueur donc normal.

voici le lien Code Pen de l'appli
https://codepen.io/your-work/

<!DOCTYPE html>

<html lang="fr">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jeu de dés</title>
    </head>

    <body>
        <div id="launchGame">
            <h1>NEW GAME</h1>
        </div>

        <div id="players">
            <div id="player_1"><h2>PLAYER 1</h2><span id="score_player_1">Score :</span></div>
            <picture><img id="dice">img</picture>
            <div id="player_2"><h2>PLAYER 2</h2><span id="score_player_2">Score :</span></div>
        </div>

        <div id="current_score">
            <div id="current_score_1"><p>current<span id="round_player_1"></span></p></div>
                <div id="controls_game">
                    <h3 id="roll_dice"><img src="images/re_game.png">ROLL DICE</h3>
                    <h3 id="hold"><img src="images/charge_score.png">HOLD</h3>
                </div>
            <div id="current_score_2"><p>current<span id="round_player_2"></span></p></div>
        </div>

        <style>
            body {
    margin: 0;
    padding: 0;
    font-family: "Lato";
    background-color: silver;
    background: linear-gradient(to left, white, white 50%, rgb(228, 227, 227) 50%, rgb(228, 227, 227));
    text-align: center;
    color: gray;
}

h1 {
    width: 40%;
    margin: 1% auto 5%;
    font-size: 1.5rem;
}
h1::before {
    content: "⊕ ";
    font-size: 2rem;
    align-items: center;
    color: tomato;
}

h2 {
    height: 30px;
    line-height: 30px;
}

h3 {
    margin: 7% 0;
}

span {
    display: block;
    margin-top: 50%;
}

img {
    max-width: 10%;
    vertical-align: middle;
    margin-right: 3%;
}

#players, #final_score, #current_score, #current_score_1, #current_score_2, #controls_game {
    display: flex;
}

#players, #final_score, #current_score {
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
}
#players {
    justify-content:space-around;
    margin: 1% 1% 10%;
}

#current_score_1, #current_score_2 {
    border-radius: 20%;
    padding: 2% 4%;
    background-color: tomato;
    color: white;
}

#controls_game {
    flex-direction: column;
    max-width: 33%;
}

        </style>

        <script>(function(){

            window.addEventListener("DOMContentLoaded", function() { 

                const launch = document.getElementById("launchGame");
                const rollDice = document.getElementById("roll_dice");

                function currentPlayer(player) {

                    const hold = document.getElementById("hold");

                    if (player.getElementsByTagName("img").length < 1) {
                        player.firstChild.style.position = "relative";

                        var currentPlayer = new Image();
                        currentPlayer.src = "images/current_player.png";
                        currentPlayer.setAttribute("class", player.getAttribute("id"));

                        currentPlayer.style.position = "absolute";

                        player.firstChild.appendChild(currentPlayer);
                    }   else {
                            player.getElementsByTagName("img")[0].style.visibility = "visible";
                        }

                        changePlayer(player);

                        rollDice.addEventListener("click", function(e) {
                        e.stopPropagation();
                        displayScore(player);
                        }, {capture:false, once: false, useCapture: true});          
                }

                function player1() {
                    let player1 = document.getElementById("player_1");
                    currentPlayer(player1);
                }

                function player2() {
                    let player2 = document.getElementById("player_2");
                    currentPlayer(player2);
                }

                function changePlayer(player) { 
                    hold.addEventListener("click", function(e) {
                        e.stopPropagation();
                        player.getElementsByTagName("img")[0].style.visibility = "hidden";

                        if (player.getAttribute("id") === "player_1") {
                            console.log(player.getAttribute("id"));
                            player2();
                        } else if (player.getAttribute("id") === "player_2") {
                            console.log(player.getAttribute("id"));
                            player1();
                          }
                    }, {capture:false, once:true, useCapture: true});
                }

                function displayScore(player) {
                        let scoreDice = getScoreDice();
                        let scorePlayer = document.getElementById("round_" + player.getAttribute("id")); 
                        scorePlayer.textContent = scoreDice(); 
                }

                function getScoreDice() {
                    var result = 0;
                    var faceDice = Math.floor(Math.random()*7); 

                    if ((faceDice > 0) && (faceDice < 7)) {
                        result = faceDice;
                    } else {
                        result = faceDice+1;
                      }  

                    function innerGetScoreDice() {
                        return result;
                    }

                    return innerGetScoreDice;
                }

                launch.addEventListener("click", player1(), {capture:false, once:true});

            });

        })() </script>
    </body>

</html>

Je voudrai que les parties de joueur se joue indépendamment l'un de l'autre et non pas en même temps

Le souci à cette étape c'est que le dé continue de jouer avec player1.
Donc j'ai logé dans la console l'événement et le souci c'est que les clics sur hold (pour changer de joueur) se comptabilise et se répèrcute quand on passe au prochain joueur
je suis certains à 100% que c'est un souci lié à l'évent soit en phase de bouilonnement ou capture

j'ai mis mes options capture à false et true ainsi que le stopPropagation() et malgré ça le problème persiste,

Bien cordialement.

Aucune réponse