Add more polyominoes blocks types #12

2D/js/main.js

@@ -141,15 +141,8 @@ class MainApp {
 		this.redraw();
 	};
 
-	enableBlackening() {
-		this.isBlackening = true;
-		document.body.style.cursor = 'url("../assets/cursor_blackend.png"), auto';
-	};
-
-	disableBlackening() {
-		this.isBlackening = false;
-		document.body.style.cursor = 'default';
-	};
+	enableBlackening() { this.isBlackening = true; document.body.style.cursor = 'url("../assets/cursor_blackend.png"), auto'; };
+	disableBlackening() { this.isBlackening = false; document.body.style.cursor = 'default'; };
 
 	redraw() {
 		if (!this.needsRedraw) return;

2D/js/polyomino.js

@@ -214,4 +214,25 @@ export const SHAPES = {
 	TETROMINO_S: [[0, 1, 1], [1, 1, 0]],
 	TETROMINO_T: [[0, 1, 0], [1, 1, 1]],
 	TETROMINO_L: [[1, 0, 0], [1, 1, 1]],
+	PENTOMINO_F: [[0, 1, 1], [1, 1, 0], [0, 1, 0]],
+	PENTOMINO_I: [[1, 1, 1, 1, 1]],
+	PENTOMINO_L: [[1, 0, 0, 0, 0], [1, 1, 1, 1, 1]],
+	PENTOMINO_N: [[1, 1, 1, 0], [0, 0, 1, 1]],
+	PENTOMINO_P: [[1, 1, 1], [1, 1, 0]],
+	PENTOMINO_T: [[1, 1, 1], [0, 1, 0], [0, 1, 0]],
+	PENTOMINO_U: [[1, 0, 1], [1, 1, 1]],
+	PENTOMINO_V: [[1, 0, 0], [1, 0, 0], [1, 1, 1]],
+	PENTOMINO_W: [[1, 0, 0], [1, 1, 0], [0, 1, 1]],
+	PENTOMINO_X: [[0, 1, 0], [1, 1, 1], [0, 1, 0]],
+	PENTOMINO_Y: [[1, 1, 1, 1], [0, 1, 0, 0]],
+	PENTOMINO_Z: [[1, 1, 0], [0, 1, 0], [0, 1, 1]],
+	HEXOMINO_I: [[1, 1, 1, 1, 1, 1]],
+	HEXOMINO_L: [[1, 0, 0, 0, 0, 0], [1, 1, 1, 1, 1, 1]],
+	HEXOMINO_T: [[0, 1, 0, 0], [1, 1, 1, 1], [0, 1, 0, 0]],
+	HEXOMINO_X: [[0, 1, 1, 0], [1, 1, 1, 1], [0, 1, 1, 0]],
+	HEXOMINO_U: [[1, 0, 0, 1], [1, 1, 1, 1]],
+	HEXOMINO_V: [[1, 0, 0, 0], [1, 0, 0, 0], [1, 1, 1, 1]],
+	HEXOMINO_W: [[1, 0, 0, 0], [1, 1, 0, 0], [0, 1, 1, 1]],
+	HEXOMINO_Y: [[1, 1, 1, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0]],
+	HEXOMINO_Z: [[1, 1, 0, 0], [0, 1, 0, 0], [0, 1, 1, 1]],
 };

2D/js/popup/grid.js

@@ -15,8 +15,8 @@ export function showGridPopup(toolbar) {
 		{ label: 'Blacken the grid cells :', icon: '../assets/ic_blackend_cell.png' }
 	];
 
-	const startY = 72;
-	const rowHeight = 72;
+	const startY = 76;
+	const rowHeight = 76;
 	const colX = 30;
 
 	rows.forEach((row, index) => {

2D/js/popup/polyomino.js

@@ -4,8 +4,8 @@ export function showPolyominoPopup(toolbar) {
 	const popupContainer = toolbar.createPopupContainer('polyominoPopup', toolbar.buttons[0].name);
 
 	const shapes = Object.keys(SHAPES);
-	const shapeSize = 30;
-	const padding = 80;
+	const shapeSize = 25;
+	const padding = 90;
 
 	const popup = popupContainer.querySelector('canvas');
 	const ctx = popup.getContext('2d');

2D/js/toolbar.js

@@ -205,8 +205,8 @@ export class Toolbar {
 		const popupContainer = document.createElement('div');
 		popupContainer.id = id;
 		popupContainer.style.position = 'absolute';
-		popupContainer.style.top = this.checkIfMobile() ? '50px' : '160px';
-		popupContainer.style.left = this.checkIfMobile() ? '50%' : '238px';
+		popupContainer.style.top = this.isMobile ? '50px' : '160px';
+		popupContainer.style.left = this.isMobile ? '50%' : '238px';
 		popupContainer.style.transform = 'translateX(-50%)';
 		popupContainer.style.width = '370px';
 		popupContainer.style.height = '600px';
@@ -242,8 +242,8 @@ export class Toolbar {
 		const closeIcon = new Image();
 		closeIcon.src = '../assets/ic_close.png';
 		closeIcon.style.position = 'fixed';
-		closeIcon.style.top = this.checkIfMobile() ? '56px' : '166px';
-		closeIcon.style.left = this.checkIfMobile() ? 'calc(50% + 162px)' : '400px';
+		closeIcon.style.top = this.isMobile ? '56px' : '166px';
+		closeIcon.style.left = this.isMobile ? 'calc(50% + 162px)' : '400px';
 		closeIcon.style.transform = 'translateX(-50%)';
 		closeIcon.style.cursor = 'pointer';
 		closeIcon.style.zIndex = '1001';