Merge branch 'main' of https://git.etud.insa-toulouse.fr/bocquel/Projet_JS

resolution des conflits entre les deux branches ig

demineur.html

@@ -27,20 +27,22 @@
 <div class="item_nav">  
         Mines restantes:10
     </div>
+    <div class="item_nav">
+            <button id="options-button" onclick="options()">Options</button>
+        </div>
     </nav>   
 
 
     <div id="jeu">
-      <button id="debut_game" onclick="chrono()">GO!</button>
-      <button id="fin_game" onclick="reset()">CIAO</button>
-      <div id="grille">
-	<script type="text/javascript">grilleButtons(7,7);</script>
-      </div>
-    </div>
       
 
-<div id="popup" class="popup">
+      
-    <div class="popup-content">
+    </div>
+    <!-- <button id="debut_game" class="game_button" onclick="chrono()">GO!</button>-->
+    <button id="fin_game" class="game_button" onclick="resetJeu()">Abandon</button>
+
+<div id="cookies-popup" class="popup">
+    <div id="cookies-popup-content">
         <h2>Bonjour !</h2>
         <p>Voulez vous des cookies?</p>
         
@@ -48,5 +50,25 @@
         <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>
+        <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>
+</div>
 </body>
+<footer>
+    <p>© 2024 - Tous droits réservés - Le Démineur</p>
+</footer>
 </html>

demineur.js

@@ -1,14 +1,118 @@
-class Case {
+let grille = [];
-    constructor(x, y) {
+let hauteur = 7;
-	this.posX = x;
+let largeur = 7;
-	this.posy = y;
+let number_mines = 10 ;
-	this.isMine = false;
+let first_click = true ;
-	this.number = 0;
+let arret=0;
-	this.hidden = true;
+let cases_restantes = hauteur*largeur - number_mines ;
+
+function gererOptions() {
+    const newHauteur = parseInt(document.getElementById('hauteur').value);
+    const newLargeur = parseInt(document.getElementById('largeur').value);
+    const newNumberMines = parseInt(document.getElementById('number_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;
+    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) ;
+
+
+function getRandomInt(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() {
+    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.style.background = "url('case_9.png')";
+                mineCase.classList.add("buttonRevealed");
+            }
+        }
+    }
+}
+
+function creerGrille(haut, larg, mine_nb, x_first, y_first) {
+    grille.length = haut;
+    for (var i = 0; i < haut; i++) {
+        grille[i] = Array(larg);
+        for (var j = 0; j < larg; j++) {
+            grille[i][j] = 0;
+        }
+    }
+
+    for (var k = 0; k < mine_nb; k++) {
+        let new_x = getRandomInt(larg);
+        let new_y = getRandomInt(haut);
+
+        while (grille[new_y][new_x] == 9 || (new_y == y_first && new_x == x_first)) {
+            new_x = getRandomInt(larg);
+            new_y = getRandomInt(haut);
+        }
+
+        grille[new_y][new_x] = 9;
+        for (var m = Math.max(0, new_y - 1); m < Math.min(haut, new_y + 2); m++) {
+            for (var n = Math.max(0, new_x - 1); n < Math.min(larg, new_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();
@@ -19,14 +123,14 @@ function getCookie(name) {
     return document.cookie.split('; ').find(row => row.startsWith(name + '='))?.split('=')[1];
 }
 
+
 function sleep(ms){
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 async function chrono(){
     let k=document.getElementById("temps").value;
     const myButton = document.getElementById("fin_game");
-	let arret=0;
+    arret = 0 ;
-	myButton.addEventListener("click",() =>{arret=1;})
     
     while(arret==!1) {
 	await sleep(1000);
@@ -35,84 +139,163 @@ async function chrono(){
 	
 	}
     }
-}
-async function reset(){
-	
-	document.getElementById("temps").value=0;
 
 }
 
-function Cookies() {
-	var accept = confirm("Tu veux des cookies ?");
-	if (accept === true) {
-	alert("Bon jeu!");
-	} else {
-	Cookies();
-	}
-	}
-//Cookies();
 
 
-let grille = [];
-let hauteur = 7;
-let largeur = 7;
 
-function creerGrille(haut, larg) {
+
-    grille.length = haut;
+
-    for (var i=0;i<haut;i++) {
+// Fonction pour créer un cookie
-	grille[i] = Array(larg);
+function setCookie(name, value, days) {
-	for (var j=0;j<larg;j++){
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
-	    grille[i][j] = new Case(j, i);
+    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 cookie(){
-	const popup = document.getElementById('popup');
+	const popup = document.getElementById('cookies-popup');
-	const closePopupButton = document.getElementById('accept-button');
+	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
-	closePopupButton.addEventListener('click', () => {
+	close_popup_button.addEventListener('click', () => {
 		setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
 		popup.classList.remove('show');
 	});
 	
 }
 
+
 const cookieAccepted = getCookie('cookiesAccepted');
 
 if (!cookieAccepted){
 	cookie();
 }
-function changeImage(mouseEvent) {
+
-    mouseEvent.target.style.background="url('case_mine.png')" ;
+function selectImage(idCase) {
+    const coords = idCase.split("_") ;
+    const y = parseInt(coords[0]) ;
+    const x = parseInt(coords[1]) ;
+
+    if (first_click) {
+	creerGrille(hauteur,largeur,number_mines,x,y) ;
+	first_click = false ;
+	chrono() ;
+    }
+
+    if (grille[y][x] === 9 && arret == 0) {
+	arret = 1;
+        alert("Vous avez perdu !");
+        MontrerMines();
+    }
+    
+    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) ;
+                }
+            }
+        }
+    }
+    
+    return("url('case_" + grille[y][x].toString() + ".png')");
 }
 
 
+function changeImage(targetCase) {
+    if (!(targetCase.classList.contains("buttonFlagged"))) {
+	targetCase.classList.add("buttonRevealed") ;
+	targetCase.style.background= selectImage(targetCase.id) ;
+
+	cases_restantes = cases_restantes - 1 ;
+
+	if (cases_restantes == 0 && arret == 0) {
+	    arret = 1 ;
+            alert("Félicitations ! Vous avez gagné !");
+	}
+    }
+    
+}
+
+
+function resetJeu() {
+    
+    const divJeu = document.getElementById("jeu") ;
+    divJeu.removeChild(divJeu.children[0]) ;
+    grilleButtons(hauteur, largeur) ;
+    cases_restantes = hauteur*largeur - number_mines ;
+    arret = 1 ;
+    first_click = true ;
+	
+    document.getElementById("temps").value=0;
+    
+    
+}
+
+
+function changeImageClick(mouseEvent) {
+    if (!(mouseEvent.target.classList.contains("buttonRevealed"))) {
+	changeImage(mouseEvent.target) ;
+    }
+}
+
+
+function changeImageFlag(rightClick) {
+    
+    rightClick.preventDefault() ;
+    if (rightClick.target.classList.contains("buttonRevealed")) {
+	return 0 ;
+    } else if (rightClick.target.classList.contains("buttonFlagged")) {
+	rightClick.target.style.background="url('case_vide.png')" ;
+	rightClick.target.classList.remove("buttonFlagged") ;
+    } else {
+	rightClick.target.style.background="url('case_flag.png')" ;
+	rightClick.target.classList.add("buttonFlagged") ;
+    }
+}
+
 function grilleButtons(haut, larg) {
-    const divGrille = document.getElementById("grille") ;
+    
+    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++) {
 	for (var j=0;j<larg;j++){
-	    
 	    var newCase = document.createElement("BUTTON") ;
-	    newCase.style.gridrow=i.toString() ;
+	    newCase.style.gridRow=(i+1).toString() ;
+	    newCase.style.gridColumn = (j+1).toString() ;
 	    newCase.classList.add("button_case") ;
 	    newCase.id = i.toString() + "_" + j.toString() ;
 	    newCase.style.background="url('case_vide.png')" ;
-	    newCase.addEventListener("click", changeImage);
+	    newCase.addEventListener("click", changeImageClick);
+	    newCase.addEventListener("contextmenu", changeImageFlag);
 	    divGrille.appendChild(newCase) ;
 	    
 	}
     }        
-    
 }
 
-
+grilleButtons(hauteur,largeur) ;
-

style.css

@@ -11,34 +11,44 @@
 }
 
 #body_demineur{
-	background-color: rgba(128, 128, 128, 0.544);
+	background-color: #007BFF;
 	
 	margin: 0;
 	
 }
 
 #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 {
     display: grid;
-    grid-template-columns : 50px 50px 50px 50px 50px 50px 50px;
+    gap: 1px; /* Ajout d'un écart entre les cases pour une meilleure visibilité */
-    grid-template-rows : 50px 50px 50px 50px 50px 50px 50px;
 }
+.button_case{
+    width : 50px;
+    height : 50px;
+    border : 0px;
+
+}
+
 
 .item_nav{
 	margin-top: 3px;
 	padding-right: 10px;
 }
 
-<<<<<<< HEAD
 .popup {
     position: fixed;
     top: 0;
@@ -60,7 +70,8 @@
     opacity: 1;
 }
 
-.popup-content {
+
+#cookies-popup-content {
     background-color: #fff;
     padding: 20px;
     border-radius: 10px;
@@ -69,16 +80,16 @@
     max-width: 400px;
     width: 100%;
 }
-
+#options-popup-content {
-#accept-button {
+    background-color: #fff;
-    background-color: #007BFF;
+    padding: 30px;
-    color: #fff;
+    border-radius: 10px;
-    border: none;
+    text-align: center;
-    padding: 10px 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
+    max-width: 400px;
-    cursor: pointer;
+    width: 100%;
 }
-#refuse-button {
+#accept-button, #refuse-button, #save-options, #close-options {
     background-color: #007BFF;
     color: #fff;
     border: none;
@@ -89,10 +100,10 @@
 
 #close-popup:hover {
     background-color: #0056b3;
-=======
-.button_case{
-    width : 50px;
-    height : 50px;
-    border : 0px;
->>>>>>> 2a2cf84cf311b49f5c290c8502b43f35efa7ec30
 }
+
+#refuse-button:hover,#accept-button:hover, #save-options:hover, #close-options:hover  {
+    background-color: #1ecfee;
+    
+}
+