bocquel/Projet_JS
2
0
Fork 2
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

ajout de la popup options

Browse source
This commit is contained in:
Younes Bezza 2025-01-01 16:25:00 +01:00
parent ddf438485a
commit 77faaf3013
3 changed files with 44 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
demineur.html
View file

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

23
demineur.js
View file

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

7
style.css
View file

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