add gridSize to dat.gui

Viet281101 · Jun 3, 2024 · 3d2061d · 3d2061d
1 parent f713f06
commit 3d2061d
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 87 deletions.
diff --git a/2D/js/ai.js b/2D/js/ai.js
@@ -1,51 +1,51 @@
 export function backtrackingAutoTiling(polyominoes, gridBoard, placePolyomino, removePolyomino, redraw) {
-    const polyominoesCopy = [...polyominoes]; // Clone des polyominos pour ne pas les modifier
-    polyominoesCopy.sort((a, b) => b.shape.flat().reduce((acc, val) => acc + val) - a.shape.flat().reduce((acc, val) => acc + val)); // trie par taille
-    let index = 0;
-
-    function placeNextPolyomino() {
-        if (index >= polyominoesCopy.length) {
-            console.log("Pavage Réussi!");
-            return;
-        }
-
-        const polyomino = polyominoesCopy[index];
-        const originalColor = polyomino.color; // Sauvegarde de la couleur d'origine
-        polyomino.color = '#FFFF99'; // Couleur jaune fade pour montrer la selection
-        redraw(); 
-
-        setTimeout(() => {
-            let placed = false;
-
-            for (let row = 0; row < gridBoard.rows && !placed; row++) {
-                for (let col = 0; col < gridBoard.cols && !placed; col++) {
-                    const originalX = polyomino.x;
-                    const originalY = polyomino.y;
-                    polyomino.x = col * gridBoard.gridSize + gridBoard.gridOffsetX;
-                    polyomino.y = row * gridBoard.gridSize + gridBoard.gridOffsetY;
-
-                    if (gridBoard.isInBounds(polyomino) && !gridBoard.isOverlapping(polyomino)) {
-                        placePolyomino(polyomino);
-                        placed = true;
-                    } else {
-                        polyomino.x = originalX;
-                        polyomino.y = originalY;
-                    }
-                }
-            }
-
-            // On remet la couleur d'origine
-            polyomino.color = originalColor;
-            redraw();
-
-            if (placed) {
-                index++;
-                setTimeout(placeNextPolyomino, 1000); //Appel rzcursif avec un delai d'une seconde
-            } else {
-                console.log("Pavage Échoué!");
-            }
-        }, 1000); // Delai une seconde pour montrer la selection avant le placement
-    }
-
-    placeNextPolyomino();
-}
+	const polyominoesCopy = [...polyominoes]; // Clone des polyominos pour ne pas les modifier
+	polyominoesCopy.sort((a, b) => b.shape.flat().reduce((acc, val) => acc + val) - a.shape.flat().reduce((acc, val) => acc + val)); // trie par taille
+	let index = 0;
+
+	function placeNextPolyomino() {
+		if (index >= polyominoesCopy.length) {
+			console.log("Pavage Réussi!");
+			return;
+		}
+
+		const polyomino = polyominoesCopy[index];
+		const originalColor = polyomino.color; // Sauvegarde de la couleur d'origine
+		polyomino.color = '#FFFF99'; // Couleur jaune fade pour montrer la selection
+		redraw(); 
+
+		setTimeout(() => {
+			let placed = false;
+
+			for (let row = 0; row < gridBoard.rows && !placed; row++) {
+				for (let col = 0; col < gridBoard.cols && !placed; col++) {
+					const originalX = polyomino.x;
+					const originalY = polyomino.y;
+					polyomino.x = col * gridBoard.gridSize + gridBoard.gridOffsetX;
+					polyomino.y = row * gridBoard.gridSize + gridBoard.gridOffsetY;
+
+					if (gridBoard.isInBounds(polyomino) && !gridBoard.isOverlapping(polyomino)) {
+						placePolyomino(polyomino);
+						placed = true;
+					} else {
+						polyomino.x = originalX;
+						polyomino.y = originalY;
+					}
+				}
+			}
+
+			// On remet la couleur d'origine
+			polyomino.color = originalColor;
+			redraw();
+
+			if (placed) {
+				index++;
+				setTimeout(placeNextPolyomino, 1000); //Appel rzcursif avec un delai d'une seconde
+			} else {
+				console.log("Pavage Échoué!");
+			}
+		}, 1000); // Delai une seconde pour montrer la selection avant le placement
+	};
+
+	placeNextPolyomino();
+};
diff --git a/2D/js/gui.js b/2D/js/gui.js
@@ -19,6 +19,9 @@ export class GUIController {
 		if (guiContainer) {
 			guiContainer.classList.add('scaled-gui');
 		}
+		this.gui.add(this.settings, 'gridSize', 10, 100).step(1).onChange((value) => {
+			this.mainApp.updateGridSize(value);
+		});
 		this.gui.addColor(this.settings, 'backgroundColor').onChange((value) => {
 			this.mainApp.canvas.style.backgroundColor = value;
 		});

diff --git a/2D/js/main.js b/2D/js/main.js
@@ -187,20 +187,28 @@ class MainApp {
 		this.redraw();
 	};
 
+	updateGridSize(newGridSize) {
+		this.resetBoard();
+		this.gridSize = newGridSize;
+		this.gridBoard.gridSize = newGridSize;
+		this.gridBoard.resizeCanvas();
+		this.redraw();
+	};
+
 	resetBoard() {
-        this.polyominoes.forEach(polyomino => {
-            if (polyomino.isPlaced) {
-                this.gridBoard.removePolyomino(polyomino);
-                polyomino.isPlaced = false;
-            }
-        });
-        this.redraw();
-    }
+		this.polyominoes.forEach(polyomino => {
+			if (polyomino.isPlaced) {
+				this.gridBoard.removePolyomino(polyomino);
+				polyomino.isPlaced = false;
+			}
+		});
+		this.redraw();
+	};
 
 	backtrackingAutoTiling() {
-        this.resetBoard(); // Reinitialiser le plateau avant de commencer le pavage
-        backtrackingAutoTiling(this.polyominoes, this.gridBoard, this.placePolyomino.bind(this), this.gridBoard.removePolyomino.bind(this), this.redraw.bind(this));
-    }
+		this.resetBoard();
+		backtrackingAutoTiling(this.polyominoes, this.gridBoard, this.placePolyomino.bind(this), this.gridBoard.removePolyomino.bind(this), this.redraw.bind(this));
+	};
 };
 
 const main_app = new MainApp();
diff --git a/2D/js/toolbar.js b/2D/js/toolbar.js
@@ -19,25 +19,16 @@ export class Toolbar {
 		this.homeButtonRect = this.isMobile ? { x: 10, y: 10, width: 40, height: 40 } : { x: 10, y: 10, width: 40, height: 40 };
 	};
 
-	checkIfMobile() {
-		return window.innerWidth <= 800;
-	};
+	checkIfMobile() { return window.innerWidth <= 800; };
 
 	setupCanvas() {
 		this.canvas = document.createElement('canvas');
 		this.ctx = this.canvas.getContext('2d');
-		if (this.isMobile) {
-			this.canvas.width = window.innerWidth;
-			this.canvas.height = 50;
-			this.canvas.style.position = 'absolute';
-			this.canvas.style.top = this.canvas.style.left = '0';
-		} else {
-			this.canvas.width = 50;
-			this.canvas.height = window.innerHeight;
-			this.canvas.style.position = 'absolute';
-			this.canvas.style.left = '0';
-			this.canvas.style.top = '0';
-		}
+		this.canvas.width = this.isMobile ? window.innerWidth : 50;
+		this.canvas.height = this.isMobile ? 50 : window.innerHeight;
+		this.canvas.style.position = 'absolute';
+		this.canvas.style.left = this.canvas.style.top = '0';
+		this.canvas.style.zIndex = '999';
 		document.body.appendChild(this.canvas);
 	};
 
@@ -98,14 +89,8 @@ export class Toolbar {
 	addEventListeners() {
 		this.canvas.addEventListener('mousemove', (e) => {
 			let cursor = 'default';
-			this.buttons.forEach(button => {
-				if (this.isInside(e.clientX, e.clientY, button)) {
-					cursor = 'pointer';
-				}
-			});
-			if (this.isInside(e.clientX, e.clientY, this.homeButtonRect)) {
-				cursor = 'pointer';
-			}
+			this.buttons.forEach(button => { if (this.isInside(e.clientX, e.clientY, button)) { cursor = 'pointer'; } });
+			if (this.isInside(e.clientX, e.clientY, this.homeButtonRect)) { cursor = 'pointer'; }
 			this.canvas.style.cursor = cursor;
 		});
 		this.canvas.addEventListener('mousedown', (e) => this.handleCanvasClick(e));
@@ -149,9 +134,7 @@ export class Toolbar {
 		this.updateToolbarLayout();
 		this.canvas.width = this.isMobile ? window.innerWidth : 50;
 		this.canvas.height = this.isMobile ? 50 : window.innerHeight;
-		this.drawToolbar();
-		this.addHomeButton();
-		this.addEventListeners();
+		this.drawToolbar(); this.addHomeButton(); this.addEventListeners();
 	};
 	updateToolbarLayout() {
 		const wasMobile = this.isMobile; this.isMobile = this.checkIfMobile();