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

demineur.html

@@ -33,10 +33,7 @@
     <div id="jeu">
       
 
-      <div id="grille">
-	<script type="text/javascript">grilleButtons(7,7);</script>
-
-      </div>
+      
     </div>
     <button id="debut_game" class="game_button" onclick="chrono()">GO!</button>
     <button id="fin_game" class="game_button" onclick="reset()">CIAO</button>

demineur.js

@@ -1,4 +1,4 @@
-class Case {
+class Case_grille {
     constructor(x, y) {
 	this.posX = x;
 	this.posy = y;
@@ -9,6 +9,62 @@ class Case {
 
 }
 
+
+
+let grille = [];
+let hauteur = 7;
+let largeur = 7;
+let number_mines = 10 ;
+
+
+
+
+
+function creerGrille(haut, larg,mine_nb) {
+    
+    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 = Math.floor(Math.random() * larg) ;
+	let new_y = Math.floor(Math.random() * haut) ;
+	
+	while (grille[new_y][new_x] == 9) {
+	    let new_x = Math.floor(Math.random() * larg) ;
+	    let new_y = Math.floor(Math.random() * 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();
+    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){
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
@@ -35,20 +91,6 @@ async function reset(){
 
 
 
-let grille = [];
-let hauteur = 7;
-let largeur = 7;
-
-function creerGrille(haut, larg) {
-    grille.length = haut;
-    for (var i=0;i<haut;i++) {
-	grille[i] = Array(larg);
-	for (var j=0;j<larg;j++){
-	    grille[i][j] = new Case(j, i);
-	}
-    }
-    
-}
 
 // Fonction pour créer un cookie
 function setCookie(name, value, days) {
@@ -81,22 +123,23 @@ function cookie(){
 	
 }
 
+
 const cookieAccepted = getCookie('cookiesAccepted');
 
 if (!cookieAccepted){
 	cookie();
 }
 
-
 function selectImage(idCase) {
     const coords = idCase.split("_") ;
     const x = parseInt(coords[0]) ;
-    const y = parseInt(coords[0]) ;
+    const y = parseInt(coords[1]) ;
+    return("url('case_" + grille[x][y].toString() + ".png')'") ;
 }
 
 function changeImage(mouseEvent) {
     if (!(mouseEvent.target.classList.contains("buttonFlagged"))) {
-	mouseEvent.target.style.background="url('case_mine.png')" ;
+	mouseEvent.target.style.background= selectImage(this.id) ;
 	mouseEvent.target.classList.add("buttonRevealed") ;
     }
 }
@@ -117,11 +160,23 @@ function changeImageFlag(rightClick) {
 }
 
 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.toString() ;
+	    newCase.style.gridColumn = j.toString() ;
 	    newCase.classList.add("button_case") ;
 	    newCase.id = i.toString() + "_" + j.toString() ;
 	    newCase.style.background="url('case_vide.png')" ;
@@ -133,3 +188,6 @@ function grilleButtons(haut, larg) {
     }    
     
 }
+
+creerGrille(hauteur,largeur,number_mines) ;
+grilleButtons(hauteur,largeur) ;

style.css

@@ -19,21 +19,23 @@
 
 #jeu{
 	
-	display: flex;
-	justify-content: left;
-	border-width: 2px;
-	border-style: double; 
-	width: 49%;
+    display: flex;
+    justify-content: left;
+    border-width: 2px;
+    border-style: double; 
+    width: 49%;
     background-color: #fff;
 
 }
 
-#grille{
-    display : grid;
-    grid-template-columns : 50px 50px 50px 50px 50px 50px 50px;
-    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;
@@ -79,6 +81,9 @@
     cursor: pointer;
 }
 
+#close-popup:hover {
+    background-color: #0056b3;
+}
 
 #refuse-button:hover,#accept-button:hover {
     background-color: #1ecfee;