cleanup et doc

demineur.js

@@ -1,16 +1,17 @@
-//Initialisation des constantes
+//Initialisation des variables globales
 
-let grille = [];
+let grille = []; //matrice contenant les emplacements des mines et le nombre de mines adjacentes à chaque case
-let hauteur = 7;
+let hauteur = 7; //première dimension de grille
-let largeur = 7;
+let largeur = 7; //deuxième dimension de grille
-let nombre_mines = 10 ;
+let nombre_mines = 10 ; //nombre de mines dans grille
-let premier_click = true ;
+let premier_click = true ; //indique si la partie est déjà commencée ou non
-let arret=0;
+let arret=0; //indique si une partie est en cours ou non
-let cases_restantes = hauteur*largeur - nombre_mines ;
+let cases_restantes = hauteur*largeur - nombre_mines ; //nombre de cases à révéler pour gagner la partie
 
-//Assignation de leurs fonctions aux différents boutons
 
 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);
@@ -36,6 +37,7 @@ function gererOptions() {
 }
 
 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', () => {
@@ -50,35 +52,15 @@ function options() {
 document.getElementById('save-options').removeEventListener('click', gererOptions);
 
 
-document.getElementById("fin_game").addEventListener("click", resetJeu) ;
 
 
-
+function entierRandom(maxi) { //renvoie un entier aléatoire entre 0 et maxi
-function entierRandom(maxi) { //fonction pour obtenir un entier aléatoire entre 0 et maxi
     return Math.floor(Math.random() * maxi);
 }
 
-function jeuFini() {
-    for (let i = 0; i < hauteur; i++) {
-        for (let j = 0; j < largeur; j++) {
-            const caseElement = document.getElementById(i + "_" + j);
-            const caseData = grille[i][j];
 
-            if (caseData === 9) { // Case contenant une mine
-                if (!caseElement.classList.contains("buttonFlagged")) {
-                    return false; // Une mine n'est pas marquée
-                }
-            } else { // Case ne contenant pas de mine
-                if (!caseElement.classList.contains("buttonRevealed")) {
-                    return false; // Une case non-mine n'est pas révélée
-                }
-            }
-        }
-    }
-    return true; // Toutes les conditions sont remplies
-}
 
-function MontrerMines() { //fonction pour révéler toutes les mines sur le plateau après un essai raté
+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) {
@@ -91,15 +73,19 @@ function MontrerMines() { //fonction pour révéler toutes les mines sur le plat
 }
 
 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++) {
+    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++) {
+    for (var k = 0; k < mine_nb; k++) { //placement des mines
         let nouv_x = entierRandom(larg);
         let nouv_y = entierRandom(haut);
 
@@ -109,6 +95,8 @@ function creerGrille(haut, larg, mine_nb, x_premier, y_premier) {
         }
 
         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) {
@@ -131,10 +119,10 @@ function getCookie(name) {
 }
 
 
-function sleep(ms){
+function sleep(ms){ //prend ms millisecondes à se résoudre
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
-async function chrono(){
+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 ;
@@ -146,14 +134,10 @@ async function chrono(){
 	
 	}
     }
-
 }
 
 
 
-
-
-
 // Fonction pour créer un cookie
 function setCookie(name, value, days) {
     const expires = new Date(Date.now() + days * 864e5).toUTCString();
@@ -166,7 +150,8 @@ function getCookie(name) {
 }
 
  
-function cookie(){
+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');
@@ -186,23 +171,22 @@ function cookie(){
 }
 
 
-const cookieAccepted = getCookie('cookiesAccepted');
 
-if (!cookieAccepted){
+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
-	cookie();
-}
     
-function selectImage(idCase) {
+    //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 était une mine, arrête la partie et affiche un message de perte
     if (grille[y][x] === 9 && arret == 0) {
 	    arret = 1;
         const time = document.getElementById("temps").value;
@@ -210,6 +194,7 @@ function selectImage(idCase) {
         MontrerMines();
     }
 
+    //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++) {
@@ -221,17 +206,22 @@ function selectImage(idCase) {
         }
     }
 
+    //renvoie le nom de fichier de l'image à afficher dans la case en fonction du contenu de grille à la même position
     return("url('case_" + grille[y][x].toString() + ".png')");
 }
 
 
-function changeImage(targetCase) {
+function changeImage(caseCible) {
-    if (!(targetCase.classList.contains("buttonFlagged"))) {
+    //Change l'image d'une case caseCible et appelle selectImage sur l'id de cette case.
-	targetCase.classList.add("buttonRevealed") ;
+    //Si c'est la dernière case ne contenant pas de mine, arrete la partie et affiche un message de victoire
-	targetCase.style.background= selectImage(targetCase.id) ;
+    
+    if (!(caseCible.classList.contains("buttonFlagged"))) {
+	caseCible.classList.add("buttonRevealed") ;
+	caseCible.style.background= selectImage(caseCible.id) ;
 
 	cases_restantes = cases_restantes - 1 ;
 
+	//Test de victoire
 	if (cases_restantes == 0 && arret == 0) {
 	    arret = 1 ;
             const time = document.getElementById("temps").value;
@@ -242,20 +232,8 @@ function changeImage(targetCase) {
 }
 
 
-function resetJeu() {
 
-    const divJeu = document.getElementById("jeu") ;
+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
-    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 changeImageClick(mouseEvent) {
     if (!(mouseEvent.target.classList.contains("buttonRevealed"))) {
 	changeImage(mouseEvent.target) ;
     }
@@ -263,6 +241,8 @@ function changeImageClick(mouseEvent) {
 
 
 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")) {
@@ -276,8 +256,25 @@ function changeImageFlag(rightClick) {
     }
 }
 
+
+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 boutons 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";
@@ -289,8 +286,9 @@ function grilleButtons(haut, larg) {
     divGrille.style.gridTemplateRows = taille_rows ;
     divJeu.appendChild(divGrille) ;
 
-    for (var i=0;i<haut;i++) {
+    for (var i=0;i<haut;i++) { //ajout des cases
 	for (var j=0;j<larg;j++){
+	    
 	    var nouvCase = document.createElement("BUTTON") ;
 	    nouvCase.style.gridRow=(i+1).toString() ;
 	    nouvCase.style.gridColumn = (j+1).toString() ;
@@ -305,4 +303,12 @@ function grilleButtons(haut, larg) {
     }        
 }
 
+//Lors de la première visite de la page, vérifie si les cookies ont déjà été acceptés et sinon, demande à l'utilisateur sa préférence
+const cookieAccepted = getCookie('cookiesAccepted');
+
+if (!cookieAccepted){
+	cookie();
+}
+
+//Première initialisation de la grille au démarrage de la page avec les valeurs par défaut
 grilleButtons(hauteur,largeur) ;