ajout des confettis en cas de victoire (script externe)

demineur.html

@@ -31,15 +31,15 @@
 
 
     <div id="jeu">
-      <button id="debut_game" onclick="chrono()">GO!</button>
+      
-      <button id="fin_game" onclick="reset()">CIAO</button>
 
       <div id="grille">
 	<script type="text/javascript">grilleButtons(7,7);</script>
 
       </div>
     </div>
-
+    <button id="debut_game" class="game_button" onclick="chrono()">GO!</button>
+    <button id="fin_game" class="game_button" onclick="reset()">CIAO</button>
 
 <div id="popup" class="popup">
     <div class="popup-content">
@@ -51,4 +51,42 @@
     </div>
 </div>
 </body>
+<footer>
+    <!-- confettis( bonus) -->
+    <!-- HTML -->
+    <button id="btn">Essayez-moi !</button>
+    <canvas id="confetti-canvas"></canvas>
+    
+    <!-- JS -->
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
+    <script type="text/javascript">
+      const btn = document.querySelector('#btn');
+      const canvas = document.querySelector('#confetti-canvas');
+      function onButtonClick(){
+        var myConfetti = confetti.create(canvas, {
+          resize: true,
+          useWorker: true
+        });
+        myConfetti({
+          particleCount: 100,
+          spread: 160
+        });
+      }
+      btn.addEventListener('click', onButtonClick);
+    </script>
+    
+    <!-- CSS -->
+    <style>
+    #confetti-canvas {
+      position: fixed; 
+      z-index: 999; 
+      top: 0; 
+      left: 0; 
+      width: 100vw; 
+      height: 100vh; 
+      pointer-events: none;
+    }
+    </style>
+<!-- fin des confettis -->    
+</footer>
 </html>

demineur.js

@@ -75,7 +75,7 @@ function cookie(){
 	
 	// Fonction pour fermer la pop-up
 	close_popup_button.addEventListener('click', () => {
-		// setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
+		setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
 		popup.classList.remove('show');
 	});
 	

style.css

@@ -11,7 +11,7 @@
 }
 
 #body_demineur{
-	background-color: rgba(128, 128, 128, 0.544);
+	background-color: #007BFF;
 	
 	margin: 0;
 	
@@ -24,6 +24,7 @@
 	border-width: 2px;
 	border-style: double; 
 	width: 49%;
+    background-color: #fff;
 
 }