ajout de la popup options

demineur.html

@@ -27,6 +27,9 @@
 <div class="item_nav">  
         Mines restantes:10
     </div>
+    <div class="item_nav">
+        <button id="options-button">Options</button>
+    </div>
     </nav>   
 
 
@@ -38,7 +41,7 @@
     <!-- <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 id="cookies-popup" class="popup">
     <div class="popup-content">
         <h2>Bonjour !</h2>
         <p>Voulez vous des cookies?</p>
@@ -47,6 +50,20 @@
         <button id="accept-button">Avec Plaisir!</button>
     </div>
 </div>
+
+<div id="options-popup" class="popup">
+    <div class="popup-content">
+        <h2>Options</h2>
+        <label for="hauteur">Hauteur:</label>
+        <input type="number" id="hauteur" value="7">
+        <label for="largeur">Largeur:</label>
+        <input type="number" id="largeur" value="7">
+        <label for="number_mines">Nombre de mines:</label>
+        <input type="number" id="number_mines" value="10">
+        <button id="save-options">Sauvegarder</button>
+        <button id="close-options">Fermer</button>
+    </div>
+</div>
 </body>
 <footer>
     <p>© 2024 - Tous droits réservés - Le Démineur</p>

demineur.js

@@ -17,7 +17,28 @@ let largeur = 7;
 let number_mines = 10 ;
 let first_click = true ;
 
+document.getElementById('options-button').addEventListener('click', () => {
+    document.getElementById('options-popup').classList.add('show');
+});
 
+document.getElementById('close-options').addEventListener('click', () => {
+    document.getElementById('options-popup').classList.remove('show');
+});
+
+document.getElementById('save-options').addEventListener('click', () => {
+    hauteur = parseInt(document.getElementById('hauteur').value);
+    largeur = parseInt(document.getElementById('largeur').value);
+    number_mines = parseInt(document.getElementById('number_mines').value);
+    document.getElementById('options-popup').classList.remove('show');
+    resetGame();
+});
+
+function resetGame() {
+    first_click = true;
+    document.getElementById('jeu').innerHTML = '';
+    creerGrille(hauteur, largeur, number_mines);
+    grilleButtons(hauteur, largeur);
+}
 function jeuFini() {
     for (let i = 0; i < hauteur; i++) {
         for (let j = 0; j < largeur; j++) {
@@ -131,7 +152,7 @@ function getCookie(name) {
 
 
 function cookie(){
-	const popup = document.getElementById('popup');
+	const popup = document.getElementById('cookies-popup');
 	const close_popup_button = document.getElementById('accept-button');
 	const keep_popup_button = document.getElementById('refuse-button');
 	// Fonction pour afficher la pop-up

style.css

@@ -60,11 +60,12 @@
     transition: visibility 0.3s, opacity 0.3s;
 }
 
-.popup.show {
+#cookies-popup.show,#options-popup.show {
     visibility: visible;
     opacity: 1;
 }
 
+
 .popup-content {
     background-color: #fff;
     padding: 20px;
@@ -75,7 +76,7 @@
     width: 100%;
 }
 
-#accept-button, #refuse-button {
+#accept-button, #refuse-button, #save-options, #close-options {
     background-color: #007BFF;
     color: #fff;
     border: none;
@@ -88,7 +89,7 @@
     background-color: #0056b3;
 }
 
-#refuse-button:hover,#accept-button:hover {
+#refuse-button:hover,#accept-button:hover, #save-options:hover, #close-options:hover  {
     background-color: #1ecfee;
     
 }