fix something & update the base functions (#30)

* clean up codes * fix text zone cube popup * add clear btn cube popup * add outer grid to dat gui * add delete cube * add visible cubes * update * add mini tetris to menu * update main menu
Viet281101 · Jun 15, 2024 · 5a44955 · 5a44955
1 parent 6d672a4
commit 5a44955
Show file tree

Hide file tree

Showing 19 changed files with 520 additions and 269 deletions.
diff --git a/2D/js/board.js b/2D/js/board.js
@@ -60,10 +60,7 @@ export class GridBoard {
 		};
 	};
 
-	clear() {
-		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-	};
-
+	clear() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); };
 	clearGrid() {
 		this.grid = Array.from({ length: this.rows }, () => Array(this.cols).fill(null));
 		this.clear();

diff --git a/2D/js/main.js b/2D/js/main.js
@@ -11,13 +11,7 @@ class MainApp {
 		this.rows = this.cols = 10;
 		this.polyominoes = [];
 		this.selectedPolyomino = null;
-		this.icons = {
-			flip: new Image(),
-			rotateLeft: new Image(),
-			rotateRight: new Image(),
-			duplicate: new Image(),
-			trash: new Image()
-		};
+		this.icons = { flip: new Image(), rotateLeft: new Image(), rotateRight: new Image(), duplicate: new Image(), trash: new Image() };
 		const as = "../assets/";
 		this.icons.flip.src = as + 'ic_flip.png';
 		this.icons.rotateLeft.src = as + 'ic_rotate_left.png';
@@ -65,20 +59,9 @@ class MainApp {
 			this.guiController.checkWindowSize();
 			this.toolbar.resizeToolbar();
 		});
-		this.canvas.addEventListener('touchstart', (e) => {
-			e.preventDefault();
-			const touchPos = this.gridBoard.getTouchPos(e);
-			this.handleMouseDown(touchPos);
-		});
-		this.canvas.addEventListener('touchmove', (e) => {
-			e.preventDefault();
-			const touchPos = this.gridBoard.getTouchPos(e);
-			this.handleMouseMove(touchPos);
-		});
-		this.canvas.addEventListener('touchend', (e) => {
-			e.preventDefault();
-			this.handleMouseUp();
-		});
+		this.canvas.addEventListener('touchstart', (e) => { e.preventDefault(); this.handleMouseDown(this.gridBoard.getTouchPos(e)); });
+		this.canvas.addEventListener('touchmove', (e) => { e.preventDefault(); this.handleMouseMove(this.gridBoard.getTouchPos(e)); });
+		this.canvas.addEventListener('touchend', (e) => { e.preventDefault(); this.handleMouseUp(); });
 	};
 
 	handleMouseDown(mousePos) {
@@ -189,7 +172,7 @@ class MainApp {
 	deleteAllPolyominos() {
 		this.polyominoes = [];
 		this.selectedPoyomino = null;
-		this.autoWhitening() ;
+		this.autoWhitening();
 		this.redraw();
 	};
 
@@ -362,31 +345,13 @@ class MainApp {
 	backtrackingAutoTiling() {
 		this.resetBoard();
 		const messageBox = this.createMessageBox(1);
-		setTimeout(() => {
-			backtrackingAutoTiling(
-				this.polyominoes, 
-				this.gridBoard, 
-				this.placePolyomino.bind(this), 
-				this.gridBoard.removePolyomino.bind(this), 
-				this.redraw.bind(this),
-
-				() => { this.showMessageBox(messageBox); }
-			);
-		}, 1000);
+		setTimeout(() => { backtrackingAutoTiling( this.polyominoes, this.gridBoard, this.placePolyomino.bind(this), this.gridBoard.removePolyomino.bind(this), this.redraw.bind(this), () => { this.showMessageBox(messageBox); } ); }, 1000);
 	};
 
 	bruteForceTiling() {
 		this.resetBoard(); 
 		const messageBox = this.createMessageBox(2);
-		setTimeout(() => {
-			bruteForceTiling(
-				this.gridBoard, 
-				this.polyominoes, 
-				this.placePolyomino.bind(this), 
-				this.redraw.bind(this),
-				() => { this.showMessageBox(messageBox); }
-			);
-		}, 1000);
+		setTimeout(() => { bruteForceTiling( this.gridBoard, this.polyominoes, this.placePolyomino.bind(this), this.redraw.bind(this), () => { this.showMessageBox(messageBox); } ); }, 1000);
 	};
 
 	randomTiling() {
@@ -398,32 +363,13 @@ class MainApp {
 	randomBacktrackingTiling() {
 		this.resetBoard();
 		const messageBox = this.createMessageBox(4);
-		setTimeout(() => {
-			randomBacktrackingTiling(
-				this.polyominoes, 
-				this.gridBoard, 
-				this.placePolyomino.bind(this), 
-				this.gridBoard.removePolyomino.bind(this), 
-				this.redraw.bind(this),
-				() => { this.showMessageBox(messageBox); }
-			);
-		}, 1000);
+		setTimeout(() => { randomBacktrackingTiling( this.polyominoes, this.gridBoard, this.placePolyomino.bind(this), this.gridBoard.removePolyomino.bind(this), this.redraw.bind(this), () => { this.showMessageBox(messageBox); } ); }, 1000);
 	};
 
 	fullAutoTiling() {
 		this.resetBoard(); 
 		const messageBox = this.createMessageBox(2);
-		setTimeout(() => {
-			fullAutoTiling(
-				this.gridBoard,
-				this.polyominoes,
-				this.placePolyomino.bind(this),
-				this.gridBoard.removePolyomino.bind(this.gridBoard),
-				this.redraw.bind(this),
-				this.duplicatePolyomino.bind(this),
-				() => { this.showMessageBox(messageBox); }
-			);
-		}, 1000); 
+		setTimeout(() => { fullAutoTiling( this.gridBoard, this.polyominoes, this.placePolyomino.bind(this), this.gridBoard.removePolyomino.bind(this.gridBoard), this.redraw.bind(this), this.duplicatePolyomino.bind(this), () => { this.showMessageBox(messageBox); } ); }, 1000); 
 	};
 };
 

diff --git a/2D/js/polyomino.js b/2D/js/polyomino.js
@@ -244,7 +244,6 @@ export const SHAPES = {
 	HEPTOMINO_J: [[1, 1, 1], [0, 0, 1], [0, 0, 1], [0, 1, 1]],
 	HEPTOMINO_N: [[1, 1, 1], [0, 1, 0], [0, 1, 0], [0, 1, 1]],
 	HEPTOMINO_R: [[1, 1, 1], [1, 0, 1], [1, 1, 0]],
-	HEPTOMINO_S: [[0, 1, 1], [1, 1, 0], [0, 1, 0], [0, 1, 1]],
 	HEPTOMINO_X: [[0, 1, 1], [1, 1, 1], [0, 1, 0], [0, 1, 0]],
 };
 

diff --git a/2D/js/popup/grid.js b/2D/js/popup/grid.js
@@ -31,7 +31,6 @@ export function showGridPopup(toolbar) {
 		ctx.font = '22px Pixellari';
 		ctx.fillStyle = '#000';
 		ctx.fillText(row.label, colX, y + 20);
-
 		if (row.icon) {
 			const icon = new Image();
 			icon.src = row.icon;
@@ -45,7 +44,6 @@ export function showGridPopup(toolbar) {
 
 	let newRows = 10;
 	let newCols = 10;
-
 	popupContainer.querySelectorAll('input[type="number"]').forEach((input, index) => {
 		input.addEventListener('change', (e) => {
 			if (index === 0) newRows = parseInt(e.target.value);
@@ -58,44 +56,29 @@ export function showGridPopup(toolbar) {
 		const mouseX = e.clientX - rect.left;
 		const mouseY = e.clientY - rect.top;
 		let cursor = 'default';
-
 		rows.forEach((row, index) => {
 			const y = startY + index * rowHeight;
 			if (row.icon && toolbar.isInside(mouseX, mouseY, { x: popup.width - 94, y: y - 14, width: 50, height: 50 })) {
 				cursor = 'pointer';
 			}
 		});
-
 		popup.style.cursor = cursor;
 	});
 
 	popup.addEventListener('click', (e) => {
 		const rect = popup.getBoundingClientRect();
 		const mouseX = e.clientX - rect.left;
 		const mouseY = e.clientY - rect.top;
-
 		rows.forEach((row, index) => {
 			const y = startY + index * rowHeight;
 			if (row.icon && toolbar.isInside(mouseX, mouseY, { x: popup.width - 94, y: y - 14, width: 50, height: 50 })) {
 				switch (index) {
-					case 3:
-						toolbar.mainApp.createNewBoard(newRows, newCols, toolbar.mainApp.gridSize);
-						break;
-					case 4:
-						toolbar.mainApp.clearBoard();
-						break;
-					case 5:
-						toolbar.mainApp.isBlackening = true;
-						break;
-					case 6:
-						toolbar.mainApp.autoRandomBlackening();
-						break;
-					case 7:
-						toolbar.mainApp.autoWhitening();
-						break;
-					case 8:
-						toolbar.mainApp.invertBlackWhite();
-						break;
+					case 3: toolbar.mainApp.createNewBoard(newRows, newCols, toolbar.mainApp.gridSize); break;
+					case 4: toolbar.mainApp.clearBoard(); break;
+					case 5: toolbar.mainApp.isBlackening = true; 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');}
 			}

diff --git a/2D/js/popup/polyomino.js b/2D/js/popup/polyomino.js
@@ -34,7 +34,6 @@ export function showPolyominoPopup(toolbar) {
 		polyomino.y = y - shapeSize / 2;
 		polyomino.width = shapeSize * polyomino.shape[0].length;
 		polyomino.height = shapeSize * polyomino.shape.length;
-
 		polyominoes.push({ polyomino, shape, shapeSize, y });
 	});
 
@@ -43,16 +42,13 @@ export function showPolyominoPopup(toolbar) {
 		const mouseX = e.clientX - rect.left;
 		const mouseY = e.clientY - rect.top;
 		let cursor = 'default';
-
 		polyominoes.forEach(({ polyomino, y }) => {
 			const leftColumnRect = { x: 10, y: y - shapeSize / 2, width: 180, height: shapeSize + 20 };
 			const rightColumnRect = { x: polyomino.x, y: polyomino.y, width: polyomino.width, height: polyomino.height };
-
 			if (toolbar.isInside(mouseX, mouseY, leftColumnRect) || toolbar.isInside(mouseX, mouseY, rightColumnRect)) {
 				cursor = 'pointer';
 			}
 		});
-
 		popup.style.cursor = cursor;
 	});
 

diff --git a/2D/js/popup/setting.js b/2D/js/popup/setting.js
@@ -63,15 +63,9 @@ function attachSettingClickEvent(toolbar, popup, row, y) {
 
 		if (toolbar.isInside(mouseX, mouseY, { x: popup.width - 94, y: y - 14, width: 50, height: 50 })) {
 			switch (row.label) {
-				case 'Reset Polyominoes Position':
-					toolbar.mainApp.resetBoard();
-					break;
-				case 'Mix Position of Polyominoes':
-					toolbar.mainApp.mixPosition();
-					break;
-				case 'Delete All Polyominoes':
-					toolbar.mainApp.deleteAllPolyominos();
-					break;
+				case 'Reset Polyominoes Position': toolbar.mainApp.resetBoard(); break;
+				case 'Mix Position of Polyominoes': toolbar.mainApp.mixPosition(); break;
+				case 'Delete All Polyominoes': toolbar.mainApp.deleteAllPolyominos(); break;
 			}
 			if (toolbar.isMobile) toolbar.closePopup('settings');
 		}
@@ -87,15 +81,9 @@ function handleTouchClick(e, toolbar, rows, popup, startY, rowHeight) {
 		const y = startY + index * rowHeight;
 		if (row.icon && toolbar.isInside(touchX, touchY, { x: popup.width - 94, y: y - 14, width: 50, height: 50 })) {
 			switch (row.label) {
-				case 'Reset Polyominoes Position':
-					toolbar.mainApp.resetBoard();
-					break;
-				case 'Mix Position of Polyominoes':
-					toolbar.mainApp.mixPosition();
-					break;
-				case 'Delete All Polyominoes':
-					toolbar.mainApp.deleteAllPolyominos();
-					break;
+				case 'Reset Polyominoes Position': toolbar.mainApp.resetBoard(); break;
+				case 'Mix Position of Polyominoes': toolbar.mainApp.mixPosition(); break;
+				case 'Delete All Polyominoes': toolbar.mainApp.deleteAllPolyominos(); break;
 			}
 			if (toolbar.isMobile) toolbar.closePopup('settings');
 		}

diff --git a/2D/js/popup/solve.js b/2D/js/popup/solve.js
@@ -37,10 +37,7 @@ export function showSolvePopup(toolbar) {
 			};
 			attachSolveClickEvent(toolbar, popup, row, y);
 		}
-
-		if (row.description) {
-			dropdowns[index] = { description: row.description, expanded: false, y: y + 40 };
-		}
+		if (row.description) { dropdowns[index] = { description: row.description, expanded: false, y: y + 40 }; }
 	});
 
 	popup.addEventListener('mousemove', (e) => {
@@ -113,7 +110,6 @@ export function showSolvePopup(toolbar) {
 				ctx.lineTo(colX + ctx.measureText(row.label).width, y + 25);
 				ctx.stroke();
 			}
-
 			if (row.icon) {
 				const icon = new Image();
 				icon.src = row.icon;
@@ -122,9 +118,7 @@ export function showSolvePopup(toolbar) {
 				};
 				clickAreas.push({ index, rect: { x: popup.width - 94, y: y - 14, width: 50, height: 50 }, type: 'icon' });
 			}
-
 			clickAreas.push({ index, rect: { x: colX, y, width: popup.width - colX - 100, height: rowHeight }, type: 'label' });
-
 			if (dropdowns[index] && dropdowns[index].expanded) {
 				ctx.font = '16px Pixellari';
 				ctx.fillStyle = '#000';
@@ -133,7 +127,6 @@ export function showSolvePopup(toolbar) {
 			}
 		});
 	};
-
 	redrawPopup();
 };
 

diff --git a/3D/js/board.js b/3D/js/board.js
@@ -7,13 +7,12 @@ export class Board {
 		this.grid = new THREE.Group();
 		this.innerGrid = new THREE.Group();
 		this.showInnerGrid = false;
+		this.showOuterGrid = true;
 
 		this.createGridBox(size);
 
 		this.scene.add(this.grid);
-		if (this.showInnerGrid) {
-			this.scene.add(this.innerGrid);
-		}
+		if (this.showInnerGrid) { this.scene.add(this.innerGrid); }
 	};
 
 	createGridBox(size) {
@@ -67,6 +66,12 @@ export class Board {
 		else { this.scene.remove(this.innerGrid); }
 	};
 
+	toggleOuterGrid(show) {
+		this.showOuterGrid = show;
+		if (show) { this.scene.add(this.grid); }
+		else { this.scene.remove(this.grid); }
+	};
+
 	clearGrid() {
 		while (this.grid.children.length > 0) {
 			this.grid.remove(this.grid.children[0]);

diff --git a/3D/js/gui.js b/3D/js/gui.js
@@ -7,7 +7,10 @@ export class GUIController {
 			backgroundColor: '#999999',
 			polycubeColor: '#0000ff',
 			tooltipToolbar: true,
-			showInnerGrid: false
+			showInnerGrid: false,
+			showOuterGrid: true,
+			polycubeVisible: true,
+			allCubesVisible: true
 		};
 		this.init();
 		this.checkWindowSize();
@@ -23,7 +26,6 @@ export class GUIController {
 			guiContainer.style.transformOrigin = 'top right';
 			guiContainer.style.transform = 'scale(1.5)';
 		}
-
 		this.gui.addColor(this.settings, 'backgroundColor').onChange((value) => {
 			this.mainApp.renderer.setClearColor(value);
 		});
@@ -36,9 +38,19 @@ export class GUIController {
 		this.gui.add(this.settings, 'showInnerGrid').onChange((value) => {
 			this.mainApp.board.toggleInnerGrid(value);
 		});
+		this.gui.add(this.settings, 'showOuterGrid').onChange((value) => {
+			this.mainApp.board.toggleOuterGrid(value);
+		});
+		this.gui.add(this.settings, 'polycubeVisible').onChange((value) => {
+			this.mainApp.toggleSelectedPolycubeVisibility(value);
+		});
+		this.gui.add(this.settings, 'allCubesVisible').onChange((value) => {
+			this.mainApp.toggleAllCubesVisibility(value);
+		});
 	};
 
 	checkWindowSize() {
 		this.gui.domElement.style.display = window.innerWidth <= 800 ? 'none' : 'block';
 	};
 };
+