--- a/case_0.png
+++ b/case_0.png
--- a/case_1.png
+++ b/case_1.png
--- a/case_2.png
+++ b/case_2.png
--- a/case_3.png
+++ b/case_3.png
--- a/case_4.png
+++ b/case_4.png
--- a/case_5.png
+++ b/case_5.png
--- a/case_6.png
+++ b/case_6.png
--- a/case_7.png
+++ b/case_7.png
--- a/case_8.png
+++ b/case_8.png
--- a/case_9.png
+++ b/case_9.png
--- a/case_flag.png
+++ b/case_flag.png
--- a/case_vide.png
+++ b/case_vide.png
--- a/demineur.html
+++ b/demineur.html
@ -1,81 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démineur</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="demineur.js" defer></script>
 </head>
 <body id="body_demineur">
  <nav id="nav_demineur">
    <div class="item_nav">
      <a href="main.html">Home</a> 
    </div>
    <div class="item_nav">
      <a href="help.html">Help</a>  
    </div>
    <div class="item_nav">    
      Temps:
      <input id="temps" type="number" value="0" disabled>
    </div> 
    <div class ="item_nav" id="affichage_nombre_mines">
      Nombre total de mines : 10
    </div>
    <div class="item_nav">
      <a id="options-button" href="#" onclick="options()">Options</a>
    </div>
  </nav>   
    <div id="jeu">
    </div>
    <button id="fin_game" onclick="resetJeu()">Abandon</button>
 <div id="cookies-popup" class="popup">
    <div id="cookies-popup-content">
        <h2>Bonjour !</h2>
        <p>Voulez vous des cookies?</p>
        <button id="refuse-button">non :(</button>
        <button id="accept-button">Avec Plaisir!</button>
    </div>
 </div>
 <div id="options-popup" class="popup">
    <div id="options-popup-content">
        <h2>Options</h2>
        <label for="hauteur">Hauteur</label>
        <br>
        <input type="number" id="hauteur" value="7">
        <br>
        <label for="largeur">Largeur</label>
        <br>
        <input type="number" id="largeur" value="7">
 <br>
        <label for="nombre_mines">Nombre de mines</label>
        <br>
        <input type="number" id="nombre_mines" value="10">
        <br><br>
        <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>
 </footer>
 </html>
--- a/demineur.js
+++ b/demineur.js
@ -1,344 +0,0 @@
 //Initialisation des variables globales
 let grille = []; //matrice contenant les emplacements des mines et le nombre de mines adjacentes à chaque case
 let hauteur = 7; //première dimension de grille
 let largeur = 7; //deuxième dimension de grille
 let nombre_mines = 10 ; //nombre de mines dans grille
 let premier_click = true ; //indique si la partie est déjà commencée ou non
 let arret=0; //indique si une partie est en cours ou non
 let cases_restantes = hauteur*largeur - nombre_mines ; //nombre de cases à révéler pour gagner la partie
 function gererOptions() {
    //Lors de la sauvegarde des options, vérifie que les dimensions et le nombre de mines entrés par l'utilisateur sont acceptables, met à jour les varaibles globales appropriées et redémarre la partie
    const newHauteur = parseInt(document.getElementById('hauteur').value);
    const newLargeur = parseInt(document.getElementById('largeur').value);
    const newNumberMines = parseInt(document.getElementById('nombre_mines').value);
    if (newHauteur > 12 || newLargeur > 12) {
        alert("Les dimensions ne doivent pas dépasser 12x12.");
        return;
    }
    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;
    nombre_mines = newNumberMines;
    document.getElementById('options-popup').classList.remove('show');
    document.getElementById("affichage_nombre_mines").innerText = "Nombre total de mines : " + nombre_mines.toString() ;
    resetJeu();
 }
 function options() {
    //Lors d'un click sur le bouton Options, affiche le popup permettant de changer les options et active les boutons
    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);
 }
 function entierRandom(maxi) { //renvoie un entier aléatoire entre 0 et maxi
    return Math.floor(Math.random() * maxi);
 }
 function MontrerMines() { //révèle toutes les mines sur le plateau après un essai raté
    for (let i = 0; i < hauteur; i++) {
        for (let j = 0; j < largeur; j++) {
            if (grille[i][j] === 9) {
                const mineCase = document.getElementById(i + "_" + j);
 		mineCase.src = "case_9.png";
 		mineCase.alt = "Mine" ;
                mineCase.classList.add("buttonRevealed");
            }
        }
    }
 }
 function creerGrille(haut, larg, mine_nb, x_premier, y_premier) {
    //(Ré)initialise la variable globale grille pour qu'elle contienne une matrice d'entiers de dimensions hautxlarg contenant mine_nb mines (représentées par des 9) avec les autres cases contenant le nombre de mines dans les cases adjacentes.
    //La case de position (x_premier, y_premier) ne peut pas contenir de mines.
    //Les positions des mines sont aléatoires
    grille.length = haut;
    for (var i = 0; i < haut; i++) { //dimensionnement et mise à 0 de grille
        grille[i] = Array(larg);
        for (var j = 0; j < larg; j++) {
            grille[i][j] = 0;
        }
    }
    for (var k = 0; k < mine_nb; k++) { //placement des mines
        let nouv_x = entierRandom(larg);
        let nouv_y = entierRandom(haut);
        while (grille[nouv_y][nouv_x] == 9 || (nouv_y == y_premier && nouv_x == x_premier)) {
            nouv_x = entierRandom(larg);
            nouv_y = entierRandom(haut);
        }
        grille[nouv_y][nouv_x] = 9;
 	//incrémentation des cases adjacentes à la mine
        for (var m = Math.max(0, nouv_y - 1); m < Math.min(haut, nouv_y + 2); m++) {
            for (var n = Math.max(0, nouv_x - 1); n < Math.min(larg, nouv_x + 2); n++) {
                if (grille[m][n] != 9) {
                    grille[m][n]++;
                }
            }
        }
    }
 }
 //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 sleep(ms){ //prend ms millisecondes à se résoudre
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 async function chrono(){ //incrémente de 1 la valeur Temps affichée en haut de la page toutes les 1000ms jusqu'à ce que la variable arret soit mise à 1
    let k=document.getElementById("temps").value;
    const myButton = document.getElementById("fin_game");
    arret = 0 ;
    while(arret==!1) {
 	await sleep(1000);
 	if (arret==!1){
 	    document.getElementById("temps").value=document.getElementById("temps").value*1+1;
 	}
    }
 }
 // Définir le constructeur Joueur
 function Joueur(prenom, nom) {
    this.prenom = prenom;
    this.nom = nom;
 }
 // Ajouter une méthode au prototype de Joueur pour afficher les informations
 Joueur.prototype.afficherInfo = function() {
    return `Joueur: ${this.prenom} ${this.nom}`;
 };
 // Vérifier si le cookie est présent
 const cookieAccepted = getCookie('cookiesAccepted');
 if (cookieAccepted) {
    // Demander le prénom et le nom du joueur
    const prenom = prompt("Veuillez entrer votre prénom:");
    const nom = prompt("Veuillez entrer votre nom:");
    // Créer une instance de Joueur
    const joueur = new Joueur(prenom, nom);
    // Afficher les informations du joueur à droite de la div du jeu
    document.addEventListener("DOMContentLoaded", function() {
        const infoDiv = document.createElement("div");
        infoDiv.id = "joueur-info";
        infoDiv.innerText = joueur.afficherInfo();
        infoDiv.style.position = "absolute";
        infoDiv.style.right = "10px";
        infoDiv.style.top = "10px";
        document.body.appendChild(infoDiv);
    });
 }
 function cookie(){ //crée le popup qui questionne l'utilisateur sur son choix de cookie
 	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
 	popup.classList.add('show');
 	keep_popup_button.addEventListener('click', () => {
 		keep_popup_button.style.display = 'none';
 	});
 	// Fonction pour fermer la pop-up
 	close_popup_button.addEventListener('click', () => {
 		setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
 		popup.classList.remove('show');
 	});
 }
 function selectImage(idCase) { //détermine l'image à affecter à la case d'id idCase et effectue les opérations annexes à la révélation de la case
    //détermine la position dans grille correspondant à la case d'id idCase  
    const coords = idCase.split("_") ;
    const y = parseInt(coords[0]) ;
    const x = parseInt(coords[1]) ;
    //si la partie n'était pas encore commencée, initialise grille avec les positions des mines et les nombres dans les autres cases et démarre le chrono
    if (premier_click) {
 	creerGrille(hauteur,largeur,nombre_mines,x,y) ;
 	premier_click = false ;
 	chrono() ;
    }
    //si la case révélée n'est adjacente à aucune mine, révèle également les cases adjacentes 
    if (grille[y][x] == 0) {
 	for (var m = Math.max(0, y - 1); m < Math.min(hauteur, y + 2); m++) {
            for (var n = Math.max(0, x - 1); n < Math.min(largeur, x + 2); n++) {
 		const currentCase = document.getElementById(m.toString() + "_" + n.toString()) ;
                if (!(currentCase.classList.contains("buttonRevealed"))) {
                    changeImage(currentCase) ;
                }
            }
        }
    }
    //renvoie le numéro contenu dans grille à la position de la case 
    return(grille[y][x].toString());
 }
 function changeImage(caseCible) {
    //Change l'image d'une case caseCible et appelle selectImage sur l'id de cette case.
    //Si la case révélée était une mine, arrête la partie, affiche toutes les mines et un message de perte
    //Si c'est la dernière case ne contenant pas de mine, arrete la partie et affiche un message de victoire
    if (!(caseCible.classList.contains("buttonFlagged"))) {
 	caseCible.classList.add("buttonRevealed") ;
 	const nombreCase = selectImage(caseCible.id) ;
 	caseCible.src= "case_" + nombreCase + ".png" ;
 	if (nombreCase == "9") { //test de perte
 	    caseCible.alt = "Mine" ;
 	    if (arret == 0) {
 		arret = 1;
 		const time = document.getElementById("temps").value;
 		alert(`Vous avez perdu ! Temps passé : ${time} secondes.`);
 		MontrerMines();
 	    }
 	} else { //sinon, test de victoire
 	    caseCible.alt = nombreCase ;
 	    cases_restantes = cases_restantes - 1 ;
 	    if (cases_restantes == 0 && arret == 0) {
 		arret = 1 ;
 		const time = document.getElementById("temps").value;
 		alert(`Félicitations ! Vous avez gagné ! Temps passé : ${time} secondes.`);
 	    }
 	}
    }   
 }
 function changeImageClick(mouseEvent) { //Lors d'un évènement click sur la case ciblée par mouseEvent, si elle n'est pas déjà révélée, la révèle
    if (!(mouseEvent.target.classList.contains("buttonRevealed"))) {
 	changeImage(mouseEvent.target) ;
    }
 }
 function changeImageFlag(rightClick) {
    //Lors d'un évènement click droit rightClick sur une case, change l'image de la cible de rightClick pour y mettre un drapeau et change ses classes pour empêhcer de la révéler avec un clic gauche.
    //Si la case a déjà un drapeau, l'opération inverse est effectuée.
    rightClick.preventDefault() ;
    if (rightClick.target.classList.contains("buttonRevealed")) {
 	return 0 ;
    } else if (rightClick.target.classList.contains("buttonFlagged")) {
 	rightClick.target.src="case_vide.png" ;
 	rightClick.target.alt = "Case" ;
 	rightClick.target.classList.remove("buttonFlagged") ;
    } else {
 	rightClick.target.src="case_flag.png" ;
 	rightClick.target.alt = "Flag" ;
 	rightClick.target.classList.add("buttonFlagged") ;
    }
 }
 function resetJeu() { //supprime la grille actuelle, arrête la partie, recrée une grille et remet les variables globales appropriées à leurs valeurs initiales
    const divJeu = document.getElementById("jeu") ;
    divJeu.removeChild(divJeu.children[0]) ;
    grilleButtons(hauteur, largeur) ;
    cases_restantes = hauteur*largeur - nombre_mines ;
    arret = 1 ;
    premier_click = true ;	
    document.getElementById("temps").value=0;   
 }
 function grilleButtons(haut, larg) {
    //crée dans la div jeu une div grille de type grid et de dimensions haut par larg
    //et y ajoute les images représentant les cases du jeu de démineur en les liants aux fonctions adéquates
    const divJeu = document.getElementById("jeu") ;
    var divGrille = document.createElement("DIV") ;
    divGrille.id = "grille";
    divGrille.style.display = "grid";
    let taille = "50px " ;
    let taille_cols = taille.repeat(larg) ;
    let taille_rows = taille.repeat(haut) ;
    divGrille.style.gridTemplateColumns = taille_cols ;
    divGrille.style.gridTemplateRows = taille_rows ;
    divJeu.appendChild(divGrille) ;
    for (var i=0;i<haut;i++) { //ajout des cases
 	for (var j=0;j<larg;j++){
 	    var nouvCase = document.createElement("IMG") ;
 	    nouvCase.style.gridRow=(i+1).toString() ;
 	    nouvCase.style.gridColumn = (j+1).toString() ;
 	    nouvCase.classList.add("button_case") ;
 	    nouvCase.id = i.toString() + "_" + j.toString() ;
 	    nouvCase.src="case_vide.png" ;
 	    nouvCase.alt = "Case";
 	    nouvCase.addEventListener("click", changeImageClick);
 	    nouvCase.addEventListener("contextmenu", changeImageFlag);
 	    divGrille.appendChild(nouvCase) ;
 	}
    }        
 }
 if (!cookieAccepted){
 	cookie();
 }
 //Première initialisation de la grille au démarrage de la page avec les valeurs par défaut
 grilleButtons(hauteur,largeur) ;
--- a/help.css
+++ b/help.css
@ -1,73 +0,0 @@
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #007BFF, #00C6FF); 
    color: #007BFF; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180vh;
    text-align: center;
    /*overflow:hidden;*/
 }
 .container {
    text-align: center;
    max-width: 650px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 }
 header .logo {
    width: 100px;
    margin-bottom: 20px;
 }
 header h1 {
    font-size: 2rem;
    color: #007BFF;
    margin-bottom: 10px;
 }
 .welcome-image {
    width: 80%;
    max-width: 70px;
    margin: 20px auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 button {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #007BFF;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    cursor: pointer;
    /*transition: background-color 0.3s, transform 0.2s;*/
 }
 button:hover {
    background-color: #d3e017; 
    transform: scale(1.1);
 } 
 footer {
    margin-top: 20px;
    font-size: 14px;
    color: #888;
 }
--- a/help.html
+++ b/help.html
@ -1,42 +0,0 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <title>Démineur - Help</title>
    <link rel="stylesheet" href="help.css">
 </head>
 <body>
    <div class="container">
        <header>
            <img src="logo.png" alt="Logo du Démineur" class="logo">
            <h1>Comment jouer au démineur ?</h1>
        </header>
        <main>
            <p>Pour gagner, vous devrez révéler toutes les cases ne contenant pas de mine.</p>
            <img src="case_9.png" alt="Image de bienvenue" class="welcome-image">
 	    <p>Vous pouvez révéler une case encore cachée simplement en faisant un clic gauche dessus avec votre curseur.</p>
            <img src="case_vide.png" alt="Image de bienvenue" class="welcome-image">
 	    <p>Si vous pensez qu'une case contient une mine, faites un clic droit dessus pour y placer un drapeau. Vous ne pourrea ainsi plus la révéler par erreur.</p>
            <img src="case_flag.png" alt="Image de bienvenue" class="welcome-image">
 	    <p>Le nombre de mines contenues dans la grille et le temps que vous avez passé dans la partie en cours sont affichés en haut de l'écran.</p> <br/>
 	    <p>Cliquez sur le bouton "Options" pour ajuster la difficulté du jeu en modifiant les dimensions de la grille et le nombre de mines</p> <br/>
 	    <p>Voilà, vous savez tout ! Cliquez sur le bouton ci-dessous pour vous lancer :</p>
            <button id="play-button">RETOUR AU JEU</button>
        </main>
        <footer>
            <p>&copy; 2024 Démineur. Tous droits réservés.</p>
        </footer>
    </div>
    <script type="text/javascript">
        document.getElementById('play-button').addEventListener('click', () => {
            window.location.href = 'demineur.html';
        });
    </script>
 </body>
 </html>
--- a/logo.png
+++ b/logo.png
--- a/main.css
+++ b/main.css
@ -1,73 +0,0 @@
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #007BFF, #00C6FF); 
    color: #007BFF; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    /*overflow:hidden;*/
 }
 .container {
    text-align: center;
    max-width: 650px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 }
 header .logo {
    width: 100px;
    margin-bottom: 20px;
 }
 header h1 {
    font-size: 2rem;
    color: #007BFF;
    margin-bottom: 10px;
 }
 .welcome-image {
    width: 80%;
    max-width: 70px;
    margin: 20px auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 button {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #007BFF;
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    cursor: pointer;
    /*transition: background-color 0.3s, transform 0.2s;*/
 }
 button:hover {
    background-color: #d3e017; 
    transform: scale(1.1);
 } 
 footer {
    margin-top: 20px;
    font-size: 14px;
    color: #888;
 }
--- a/main.html
+++ b/main.html
@ -1,35 +1 @@
-<!DOCTYPE html>
+<html></html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <title>Démineur - Accueil</title>
    <link rel="stylesheet" href="main.css">
 </head>
 <body>
    <div class="container">
        <header>
            <img src="logo.png" alt="Logo du Démineur" class="logo">
            <h1>Bienvenue dans le Monde du Démineur !</h1>
        </header>
        <main>
            <p>Préparez-vous à une expérience de jeu inoubliable ! Cliquez sur le bouton ci-dessous pour commencer votre aventure.</p>
            <img src="smile.png" alt="Image de bienvenue" class="welcome-image">
            <button id="play-button">JOUER</button>
        </main>
        <footer>
            <p>&copy; 2024 Démineur. Tous droits réservés.</p>
        </footer>
    </div>
    <script type="text/javascript">
        document.getElementById('play-button').addEventListener('click', () => {
            window.location.href = 'demineur.html';
        });
    </script>
 </body>
 </html>
--- a/smile.png
+++ b/smile.png
--- a/style.css
+++ b/style.css
@ -1,142 +0,0 @@
 #nav_demineur{
 	width: 100%;
 	background-color: #2bd7d484;
 	border-width: 2px;
 	border-style: double;
 	height: 25px;
 	display: flex;
    justify-content:flex-start;
 }
 #nav_demineur .item_nav {
    margin-top: 3px;
    padding-right: 10px;
 }
 #nav_demineur a {
    color: #000000; /* Couleur du texte */
    text-decoration: none; /* Supprime le soulignement */
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.7s, color 0.3s;
 }
 #nav_demineur a:hover {
    background-color: #0039b33b; /* Couleur de fond au survol */
    color: #fff; /* Couleur du texte au survol */
 }
 #body_demineur{
 	background-color: #007BFF;
 	margin: 0;
 }
 #jeu{
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 2px;
    border-style: double;
    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 {
    display: grid;
    gap: 1px; /* Ajout d'un écart entre les cases pour une meilleure visibilité */
 }
 .button_case{
    width : 50px;
    height : 50px;
    border : 0px;
 }
 .item_nav{
 	margin-top: 3px;
 	padding-right: 10px;
 }
 #fin_game {
    background-color: #00c4ff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 20px auto;
    display: block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
 }
 #fin_game:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 }
 .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
 }
 .popup.show{
    visibility: visible;
    opacity: 1;
 }
 #cookies-popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    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;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
 }
 #close-popup:hover {
    background-color: #0056b3;
 }
 #refuse-button:hover,#accept-button:hover, #save-options:hover, #close-options:hover  {
    background-color: #1ecfee;
 }