finalisation de l'option

demineur.html

@@ -28,8 +28,8 @@
         Mines restantes:10
     </div>
     <div class="item_nav">
-        <button id="options-button">Options</button>
+            <button id="options-button" onclick="options()">Options</button>
-    </div>
+        </div>
     </nav>   
 
 
@@ -39,10 +39,10 @@
       
     </div>
     <!-- <button id="debut_game" class="game_button" onclick="chrono()">GO!</button>-->
-    <button id="fin_game" class="game_button" onclick="reset()">RESET</button>
+    <button id="fin_game" class="game_button" onclick="resetJeu()">Abandon</button>
 
 <div id="cookies-popup" class="popup">
-    <div class="popup-content">
+    <div id="cookies-popup-content">
         <h2>Bonjour !</h2>
         <p>Voulez vous des cookies?</p>
         
@@ -52,14 +52,17 @@
 </div>
 
 <div id="options-popup" class="popup">
-    <div class="popup-content">
+    <div id="options-popup-content">
         <h2>Options</h2>
         <label for="hauteur">Hauteur:</label>
         <input type="number" id="hauteur" value="7">
+        <br>
         <label for="largeur">Largeur:</label>
         <input type="number" id="largeur" value="7">
+        <br>
         <label for="number_mines">Nombre de mines:</label>
         <input type="number" id="number_mines" value="10">
+        <br><br>
         <button id="save-options">Sauvegarder</button>
         <button id="close-options">Fermer</button>
     </div>

demineur.js

@@ -6,21 +6,43 @@ let first_click = true ;
 let arret=0;
 let cases_restantes = hauteur*largeur - number_mines ;
 
-document.getElementById('options-button').addEventListener('click', () => {
+function gererOptions() {
-    document.getElementById('options-popup').classList.add('show');
+    const newHauteur = parseInt(document.getElementById('hauteur').value);
-});
+    const newLargeur = parseInt(document.getElementById('largeur').value);
+    const newNumberMines = parseInt(document.getElementById('number_mines').value);
 
-document.getElementById('close-options').addEventListener('click', () => {
+    if (newHauteur > 12 || newLargeur > 12) {
-    document.getElementById('options-popup').classList.remove('show');
+        alert("Les dimensions ne doivent pas dépasser 12x12.");
-});
+        return;
+    }
 
-document.getElementById('save-options').addEventListener('click', () => {
+    const maxMines = newHauteur * newLargeur - 1;
-    hauteur = parseInt(document.getElementById('hauteur').value);
+    if (newNumberMines < 1 || newNumberMines > maxMines) {
-    largeur = parseInt(document.getElementById('largeur').value);
+        alert(`Le nombre de mines doit être entre 1 et ${maxMines}.`);
-    number_mines = parseInt(document.getElementById('number_mines').value);
+        return;
+    }
+
+    hauteur = newHauteur;
+    largeur = newLargeur;
+    number_mines = newNumberMines;
     document.getElementById('options-popup').classList.remove('show');
     resetJeu();
-});
+}
+
+function options() {
+    document.getElementById("options-popup").classList.add("show");
+
+    document.getElementById('close-options').addEventListener('click', () => {
+        document.getElementById('options-popup').classList.remove('show');
+    });
+
+    // Ajout de l'écouteur d'événement
+    document.getElementById('save-options').addEventListener('click', gererOptions);
+}
+
+// Exemple de suppression de l'écouteur d'événement
+document.getElementById('save-options').removeEventListener('click', gererOptions);
+
 
 document.getElementById("fin_game").addEventListener("click", resetJeu) ;
 
@@ -119,11 +141,7 @@ async function chrono(){
     }
 
 }
-async function reset(){
 
-    document.getElementById("temps").value=0;
-
-}
 
 
 
@@ -224,6 +242,9 @@ function resetJeu() {
     arret = 1 ;
     first_click = true ;
 	
+    document.getElementById("temps").value=0;
+    
+    
 }
 
 

style.css

@@ -18,13 +18,18 @@
 }
 
 #jeu{
-	
     display: flex;
-    justify-content: left;
+    justify-content: center;
+    align-items: center;
     border-width: 2px;
     border-style: double;
-    width: 49%;
+    width: 50%;
+    max-width: 600px;
     background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 13px 12px 20px 18px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    margin: 50px auto auto ;
 
 }
 #grille {
@@ -60,13 +65,13 @@
     transition: visibility 0.3s, opacity 0.3s;
 }
 
-#cookies-popup.show,#options-popup.show {
+.popup.show{
     visibility: visible;
     opacity: 1;
 }
 
 
-.popup-content {
+#cookies-popup-content {
     background-color: #fff;
     padding: 20px;
     border-radius: 10px;
@@ -75,7 +80,15 @@
     max-width: 400px;
     width: 100%;
 }
-
+#options-popup-content {
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    max-width: 400px;
+    width: 100%;
+}
 #accept-button, #refuse-button, #save-options, #close-options {
     background-color: #007BFF;
     color: #fff;