finalisation de l'option

This commit is contained in:
Younes Bezza 2025-01-01 18:43:21 +01:00
parent f61c888f5c
commit 0f3635b3aa
3 changed files with 64 additions and 27 deletions

View file

@ -28,8 +28,8 @@
Mines restantes:10
</div>
<div class="item_nav">
<button id="options-button">Options</button>
</div>
<button id="options-button" onclick="options()">Options</button>
</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>

View file

@ -6,21 +6,43 @@ let first_click = true ;
let arret=0;
let cases_restantes = hauteur*largeur - number_mines ;
document.getElementById('options-button').addEventListener('click', () => {
document.getElementById('options-popup').classList.add('show');
});
function gererOptions() {
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', () => {
document.getElementById('options-popup').classList.remove('show');
});
if (newHauteur > 12 || newLargeur > 12) {
alert("Les dimensions ne doivent pas dépasser 12x12.");
return;
}
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);
const maxMines = newHauteur * newLargeur - 1;
if (newNumberMines < 1 || newNumberMines > maxMines) {
alert(`Le nombre de mines doit être entre 1 et ${maxMines}.`);
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;
}

View file

@ -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;