Bonjour à tous,

je souhaite de l'aide ne serait ce qu'une piste pour m'aidez un petit peu car je suis autodidacte et demande rarement de l'aide,
le souci c'est que là je suis sur ce problème depuis 2 jours.

dans l'appli javascript (un jeu de dé pour 2 joueurs) que j'ai réduit au max pour plus de lisibilité.

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.

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épercute quand on passe au prochain joueur
je suis certains à 100% que c'est un souci lié à l'évent soit en phase de bouillonnement ou capture

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

si je vous sollicite c'est vraiment parce que j'ai passé 2 jours dessus et ça ma mis un gros coup au moral.

Voici le lien de l'appli sur CodePen :

https://codepen.io/your-work/

Voici le code :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!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>

Merci beaucoup de votre aide,

Cordialement.