update setting (#24)

* fix dat.gui showing

* add toolbar to 3D version

* update grid board to box 3D

* update cube

* moving & rotate cubes

* add stack to board

* update snap to rotate

* fix mainapp polyominos 2d

* update main.js

* fix icons

* update blacken

* update gui color

2D/js/gui.js

@@ -6,8 +6,7 @@ export class GUIController {
 		this.settings = {
 			gridSize: mainApp.gridSize,
 			backgroundColor: '#c3c3c3',
-			iconSize: mainApp.icons.flip.width / 2,
-			selectedColor: mainApp.selectedPolyomino ? mainApp.selectedPolyomino.color : '#0000ff',
+			polyominoesColor: mainApp.selectedPolyomino ? mainApp.selectedPolyomino.color : '#0000ff',
 			tooltipPolyomino: false,
 			tooltipToolbar: true
 		};
@@ -31,7 +30,7 @@ export class GUIController {
 		this.gui.addColor(this.settings, 'backgroundColor').onChange((value) => {
 			this.mainApp.canvas.style.backgroundColor = value;
 		});
-		this.gui.addColor(this.settings, 'selectedColor').onChange((value) => {
+		this.gui.addColor(this.settings, 'polyominoesColor').onChange((value) => {
 			if (this.mainApp.selectedPolyomino) {
 				this.mainApp.selectedPolyomino.color = value;
 				this.mainApp.redraw();

2D/js/main.js

@@ -241,7 +241,54 @@ class MainApp {
 			else { for (let i = 0; i < Math.abs(rotationCount); i++) { polyomino.rotateRight(); } }
 			polyomino.nbRotations = 0;
 		});
-	}
+	};
+
+	autoRandomBlackening() {
+		const totalCells = this.gridBoard.rows * this.gridBoard.cols;
+		const minBlackCells = Math.floor(totalCells * 0.20);
+		const maxBlackCells = Math.floor(totalCells * 0.25);
+		const nbBlackCellsWanted = Math.floor(Math.random() * (maxBlackCells - minBlackCells + 1)) + minBlackCells;
+		let currentBlackCells = this.blackenedCells.size;
+
+		while (currentBlackCells < nbBlackCellsWanted) {
+			const randomRow = Math.floor(Math.random() * this.gridBoard.rows);
+			const randomCol = Math.floor(Math.random() * this.gridBoard.cols);
+			const cellKey = `${randomRow}-${randomCol}`;
+
+			if (!this.blackenedCells.has(cellKey)) {
+				this.blackenedCells.add(cellKey);
+				this.gridBoard.grid[randomRow][randomCol] = '#000000';
+				currentBlackCells++;
+			}
+		}
+		this.redraw();
+	};
+
+	autoWhitening() {
+		this.blackenedCells.clear();
+		for (let row = 0; row < this.gridBoard.rows; row++) {
+			for (let col = 0; col < this.gridBoard.cols; col++) {
+				this.gridBoard.grid[row][col] = null;
+			}
+		}
+		this.redraw();
+	};
+
+	invertBlackWhite() {
+		for (let row = 0; row < this.gridBoard.rows; row++) {
+			for (let col = 0; col < this.gridBoard.cols; col++) {
+				const cellKey = `${row}-${col}`;
+				if (this.blackenedCells.has(cellKey)) {
+					this.blackenedCells.delete(cellKey);
+					this.gridBoard.grid[row][col] = null;
+				} else {
+					this.blackenedCells.add(cellKey);
+					this.gridBoard.grid[row][col] = '#000000';
+				}
+			}
+		}
+		this.redraw();
+	};
 
 	resetBoard() {
 		this.polyominoes.forEach(polyomino => {
@@ -314,13 +361,13 @@ class MainApp {
 		messageBox.style.display = 'none';
 		return messageBox;
 	};
-	
+
 	showMessageBox(messageBox) {
 		document.body.appendChild(messageBox);
 		messageBox.style.display = 'block';
 		setTimeout(() => { messageBox.style.display = 'none'; }, 2000);
 	};
-	
+
 	backtrackingAutoTiling() {
 		this.resetBoard();
 		const messageBox = this.createMessageBox(1);

2D/js/popup/grid.js

@@ -12,7 +12,10 @@ export function showGridPopup(toolbar) {
 		{ label: 'Enter n° columns', type: 'input' },
 		{ label: 'Draw grid by click to =>', icon: '../assets/ic_draw.png' },
 		{ label: 'Delete current grid :', icon: '../assets/ic_trash.png' },
-		{ label: 'Blacken the grid cells :', icon: '../assets/ic_blackend_cell.png' }
+		{ label: 'Blacken the grid Cells :', icon: '../assets/ic_blacken_cell.png' },
+		{ label: 'Random Blackening Cells :', icon: '../assets/ic_random_blacken_cell.png' },
+		{ label: 'Clear Blacken Cells :', icon: '../assets/ic_whiten.png' },
+		{ label: 'Invert Black/White Cells :', icon: '../assets/ic_invert_blacken.png' },
 	];
 
 	const startY = 76;
@@ -77,17 +80,24 @@ export function showGridPopup(toolbar) {
 				switch (index) {
 					case 3:
 						toolbar.mainApp.createNewBoard(newRows, newCols, toolbar.mainApp.gridSize);
-						if (toolbar.isMobile) {toolbar.closePopup('grid');}
 						break;
 					case 4:
 						toolbar.mainApp.clearBoard();
-						if (toolbar.isMobile) {toolbar.closePopup('grid');}
 						break;
 					case 5:
 						toolbar.mainApp.isBlackening = true;
-						if (toolbar.isMobile) {toolbar.closePopup('grid');}
+						break;
+					case 6:
+						toolbar.mainApp.autoRandomBlackening();
+						break;
+					case 7:
+						toolbar.mainApp.autoWhitening();
+						break;
+					case 8:
+						toolbar.mainApp.invertBlackWhite();
 						break;
 				}
+				if (toolbar.isMobile) {toolbar.closePopup('grid');}
 			}
 		});
 	});

2D/js/popup/setting.js

@@ -9,7 +9,7 @@ export function showSettingsPopup(toolbar) {
 	const rows = [
 		{ label: 'Quick settings', box: true, title: true },
 		{ label: 'Reset Polyominoes Position', icon: '../assets/ic_reset.png' },
-		{ label: 'Mix Position of Polyominoes', icon: '../assets/ic_split.png' },
+		{ label: 'Mix Position of Polyominoes', icon: '../assets/ic_shuffle.png' },
 		{ label: 'Delete All Polyominoes', icon: '../assets/ic_trash.png' }
 	];
 

3D/js/gui.js

@@ -5,7 +5,7 @@ export class GUIController {
 		this.mainApp = mainApp;
 		this.settings = {
 			backgroundColor: '#999999',
-			selectedColor: '#0000ff',
+			polycubeColor: '#0000ff',
 			tooltipToolbar: true,
 			showInnerGrid: false
 		};
@@ -27,8 +27,8 @@ export class GUIController {
 		this.gui.addColor(this.settings, 'backgroundColor').onChange((value) => {
 			this.mainApp.renderer.setClearColor(value);
 		});
-		this.gui.addColor(this.settings, 'selectedColor').onChange((value) => {
-			this.settings.selectedColor = value;
+		this.gui.addColor(this.settings, 'polycubeColor').onChange((value) => {
+			this.mainApp.updatePolycubeColor(value);
 		});
 		this.gui.add(this.settings, 'tooltipToolbar').onChange((value) => {
 			this.mainApp.toolbar.tooltipToolbar = value;

3D/js/main.js

@@ -42,7 +42,7 @@ class MainApp {
 		this.renderer.domElement.addEventListener('mousedown', this.onMouseDown.bind(this), false);
 		this.renderer.domElement.addEventListener('mouseup', this.onMouseUp.bind(this), false);
 		this.renderer.domElement.addEventListener('mousemove', this.onMouseMove.bind(this), false);
-		this.renderer.domElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
+		this.renderer.domElement.addEventListener('contextmenu', (event) => { event.preventDefault(); }, false);
 	};
 
 	addPolycube(cubeData) {
@@ -135,10 +135,6 @@ class MainApp {
 		this.controls.enabled = true;
 	};
 
-	onContextMenu(event) {
-		event.preventDefault();
-	};
-
 	selectPolycube(polycube) {
 		this.selectedPolycube = polycube;
 		this.selectedPolycube.group.children.forEach(child => {
@@ -211,6 +207,16 @@ class MainApp {
 			return true;
 		}
 	};
+
+	updatePolycubeColor(color) {
+		if (this.selectedPolycube) {
+			this.selectedPolycube.group.children.forEach(child => {
+				if (child instanceof THREE.Mesh) {
+					child.material.color.set(color);
+				}
+			});
+		}
+	};
 };
 
 const app = new MainApp();