Merge branch 'main' of https://git.etud.insa-toulouse.fr/bocquel/Projet_JS

demineur.html

@@ -31,12 +31,12 @@
 
 
     <div id="jeu">
-      <button id="debut_game" onclick="chrono()">GO!</button>
+      
-      <button id="fin_game" onclick="reset()">CIAO</button>
 
       
     </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">
@@ -48,4 +48,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

@@ -88,32 +88,35 @@ async function reset(){
 
 }
 
-function Cookies() {
-	var accept = confirm("Tu veux des cookies ?");
-	if (accept === true) {
-	alert("Bon jeu!");
-	} else {
-	Cookies();
-	}
-	}
-//Cookies();
 
 
 
 
+// Fonction pour créer un cookie
+function setCookie(name, value, days) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${value}; expires=${expires}; path=/`;
+}
+
+// Fonction pour lire un cookie
+function getCookie(name) {
+    return document.cookie.split('; ').find(row => row.startsWith(name + '='))?.split('=')[1];
+}
 
 
 function cookie(){
 	const popup = document.getElementById('popup');
-	const closePopupButton = document.getElementById('accept-button');
+	const close_popup_button = document.getElementById('accept-button');
-	
+	const keep_popup_button = document.getElementById('refuse-button');
 	// Fonction pour afficher la pop-up
-	
 	popup.classList.add('show');
 
+	keep_popup_button.addEventListener('click', () => {
+		keep_popup_button.style.display = 'none';
+	});
 	
 	// Fonction pour fermer la pop-up
-	closePopupButton.addEventListener('click', () => {
+	close_popup_button.addEventListener('click', () => {
 		setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
 		popup.classList.remove('show');
 	});
@@ -186,4 +189,5 @@ function grilleButtons(haut, larg) {
     
 }
 
-grilleButtons(7,7) ;
+creerGrille(hauteur,largeur,number_mines) ;
+grilleButtons(hauteur,largeur) ;

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;
 
 }
 
@@ -71,15 +72,7 @@
     width: 100%;
 }
 
-#accept-button {
+#accept-button, #refuse-button {
-    background-color: #007BFF;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-#refuse-button {
     background-color: #007BFF;
     color: #fff;
     border: none;
@@ -91,3 +84,8 @@
 #close-popup:hover {
     background-color: #0056b3;
 }
+
+#refuse-button:hover,#accept-button:hover {
+    background-color: #1ecfee;
+    
+}