demineur.html

@@ -33,8 +33,11 @@
     <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_grille {
+class Case {
     constructor(x, y) {
 	this.posX = x;
 	this.posy = y;
@@ -9,62 +9,6 @@ class Case_grille {
 
 }
 
-
-
-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));
 }
@@ -91,6 +35,20 @@ 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) {
@@ -123,23 +81,22 @@ 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[1]) ;
-    return("url('case_" + grille[x][y].toString() + ".png')'") ;
+    const y = parseInt(coords[0]) ;
 }
 
 function changeImage(mouseEvent) {
     if (!(mouseEvent.target.classList.contains("buttonFlagged"))) {
-	mouseEvent.target.style.background= selectImage(this.id) ;
+	mouseEvent.target.style.background="url('case_mine.png')" ;
 	mouseEvent.target.classList.add("buttonRevealed") ;
     }
 }
@@ -160,23 +117,11 @@ function changeImageFlag(rightClick) {
 }
 
 function grilleButtons(haut, larg) {
-    
-    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) ;
-
+    const divGrille = document.getElementById("grille") ;
     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.gridColumn = j.toString() ;
+	    newCase.style.gridrow=i.toString() ;
 	    newCase.classList.add("button_case") ;
 	    newCase.id = i.toString() + "_" + j.toString() ;
 	    newCase.style.background="url('case_vide.png')" ;
@@ -188,6 +133,3 @@ function grilleButtons(haut, larg) {
     }    
     
 }
-
-creerGrille(hauteur,largeur,number_mines) ;
-grilleButtons(hauteur,largeur) ;

style.css

@@ -28,14 +28,12 @@
 
 }
 
-.button_case{
-    width : 50px;
-    height : 50px;
-    border : 0px;
-
+#grille{
+    display : grid;
+    grid-template-columns : 50px 50px 50px 50px 50px 50px 50px;
+    grid-template-rows : 50px 50px 50px 50px 50px 50px 50px;
 }
 
-
 .item_nav{
 	margin-top: 3px;
 	padding-right: 10px;
@@ -81,9 +79,6 @@
     cursor: pointer;
 }
 
-#close-popup:hover {
-    background-color: #0056b3;
-}
 
 #refuse-button:hover,#accept-button:hover {
     background-color: #1ecfee;