Skip to content

Commit

Permalink
update tools (#27)
Browse files Browse the repository at this point in the history 
* update icons

* update popup cube

* fix board input

* add more popup

* clear grid func

* add create new grid func

* start cube popup

* clean up code
  • Loading branch information
@Viet281101
Viet281101 authored Jun 13, 2024
1 parent f7d3411 commit 9127384
Show file tree
Hide file tree
Showing 18 changed files with 444 additions and 119 deletions.
4 changes: 1 addition & 3 deletions 2D/js/ai.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,6 @@ export function randomBacktrackingTiling(polyominoes, gridBoard, placePolyomino,
placeNextPolyomino();
};


/**
* Automatic tiling the grid based on polyomino placed on the field by the user.
*
Expand All @@ -253,7 +252,6 @@ export function randomBacktrackingTiling(polyominoes, gridBoard, placePolyomino,
* @param {Function} message - An optional callback function to be called when the tiling is complete.
* @return {void} This function does not return anything.
*/

export function fullAutoTiling(gridBoard, polyominoes, placePolyomino, removePolyomino, redraw, duplicatePolyomino, message) {
function canPlace(polyomino, x, y) {
const originalX = polyomino.x;
Expand Down Expand Up @@ -318,5 +316,5 @@ export function fullAutoTiling(gridBoard, polyominoes, placePolyomino, removePol
console.log("rien trouve");
redraw();
}
}
};

30 changes: 7 additions & 23 deletions 2D/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,20 +55,10 @@ class MainApp {
};

addEventListeners() {
this.canvas.addEventListener('mousedown', (e) => {
const mousePos = this.gridBoard.getMousePos(e);
this.handleMouseDown(mousePos);
});
this.canvas.addEventListener('mousemove', (e) => {
const mousePos = this.gridBoard.getMousePos(e);
this.handleMouseMove(mousePos);
});
this.canvas.addEventListener('mouseup', (e) => {
this.handleMouseUp();
});
window.addEventListener('keydown', (e) => {
if (e.key === 'r' && this.selectedPolyomino) { this.selectedPolyomino.rotate(); this.redraw(); }
});
this.canvas.addEventListener('mousedown', (e) => { const mousePos = this.gridBoard.getMousePos(e); this.handleMouseDown(mousePos); });
this.canvas.addEventListener('mousemove', (e) => { const mousePos = this.gridBoard.getMousePos(e); this.handleMouseMove(mousePos); });
this.canvas.addEventListener('mouseup', (e) => { this.handleMouseUp(); });
window.addEventListener('keydown', (e) => { if (e.key === 'r' && this.selectedPolyomino) { this.selectedPolyomino.rotate(); this.redraw(); } });
window.addEventListener('resize', () => {
this.gridBoard.resizeCanvas();
this.gridBoard.drawGrid();
Expand Down Expand Up @@ -135,7 +125,7 @@ class MainApp {
};

handleMouseMove(mousePos) {
if (this.isBlackening) this.canvas.style.cursor = 'url("../assets/cursor_blackend.png"), auto';
if (this.isBlackening) this.canvas.style.cursor = 'url("../assets/cursor_blacken.png"), auto';
this.polyominoes.forEach(polyomino => polyomino.onMouseMove(mousePos));
if (this.tooltipPolyomino && !this.selectedPolyomino?.isDragging) {
let found = false;
Expand Down Expand Up @@ -182,7 +172,7 @@ class MainApp {
do { newColor = getRandomColor();
} while (newColor === polyomino.color);
const newShape = polyomino.shape.map(row => row.slice());
const newPolyomino = new Polyomino(newShape, polyomino.x, polyomino.y, newColor, this);
const newPolyomino = new Polyomino(newShape, polyomino.x, polyomino.y, newColor, this, polyomino.name);
this.polyominoes.push(newPolyomino);
this.redraw();
};
Expand Down Expand Up @@ -422,9 +412,7 @@ class MainApp {

fullAutoTiling() {
this.resetBoard();

const messageBox = this.createMessageBox(2);

setTimeout(() => {
fullAutoTiling(
this.gridBoard,
Expand All @@ -433,13 +421,9 @@ class MainApp {
this.gridBoard.removePolyomino.bind(this.gridBoard),
this.redraw.bind(this),
this.duplicatePolyomino.bind(this),
() => {
this.showMessageBox(messageBox);
}
() => { this.showMessageBox(messageBox); }
);
}, 1000);

console.log("Auto Tiling process initiated.");
};
};

Expand Down
21 changes: 5 additions & 16 deletions 2D/js/popup/solve.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export function showSolvePopup(toolbar) {
{ label: '5) Full Automatic Tiling :', underline: true, icon: '../assets/ic_solution.png', description: 'Automatically fills the grid using user-selected pieces from outside the grid, such as filling the grid entirely with monominoes if only one monomino is chosen.' }
];


const startY = 60;
const rowHeight = 60;
const colX = 30;
Expand Down Expand Up @@ -146,21 +145,11 @@ function attachSolveClickEvent(toolbar, popup, row, y) {

if (toolbar.isInside(mouseX, mouseY, { x: popup.width - 94, y: y - 14, width: 50, height: 50 })) {
switch (row.label) {
case '1) Backtracking method :':
toolbar.mainApp.backtrackingAutoTiling();
break;
case '2) Brute force method :':
toolbar.mainApp.bruteForceTiling();
break;
case '3) Random method :':
toolbar.mainApp.randomTiling();
break;
case '4) Random backtracking :':
toolbar.mainApp.randomBacktrackingTiling();
break;
case '5) Full Automatic Tiling :':
toolbar.mainApp.fullAutoTiling();
break;
case '1) Backtracking method :': toolbar.mainApp.backtrackingAutoTiling(); break;
case '2) Brute force method :': toolbar.mainApp.bruteForceTiling(); break;
case '3) Random method :': toolbar.mainApp.randomTiling(); break;
case '4) Random backtracking :': toolbar.mainApp.randomBacktrackingTiling(); break;
case '5) Full Automatic Tiling :': toolbar.mainApp.fullAutoTiling(); break;
}
if (toolbar.isMobile) toolbar.closePopup('solve');
}
Expand Down
15 changes: 4 additions & 11 deletions 2D/js/popup/tutorial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,11 @@ export function showTutorialPopup(toolbar) {
const rows = [
{ label: 'Auto Tiling the Polyominoes Blocks', title: true },
{ label: '1) Create Any Polyomino :', underline: true, icon: '../assets/ic_plus.png', description: 'Click this icon to open a menu. Select the polyomino you want to spawn it on the field. Drag and drop it onto the grid.' },
{ label: '2) Manipulate the Polyominoes :', underline: true, icon: '../assets/ic_solution.png', description: 'Each polyomino has an interactive menu. Click on the polyomino to : \n - rotate left or rotate right \n - flip \n - duplicate \n(the clone will appear below \n the piece selected in another color) \n - or delete.' },
{ label: '2) Manipulate the Polyominoes', underline: true, icon: '../assets/ic_solution.png', description: 'Each polyomino has an interactive menu. Click on the polyomino to : \n - rotate left or rotate right \n - flip \n - duplicate \n(the clone will appear below \n the piece selected in another color) \n - or delete.' },
{ label: '3) Grid Settings :', underline: true, icon: '../assets/ic_table.png', description: 'This menu lets you create a new board by setting the grid\'s length and height. Click to create the grid. \n Options include : \n - deleting the grid \n - blocking cells to prevent polyomino placement \n - creating automatically random \n black cells \n - Clear all black cells \n - and swapping black and empty cells. ' },
{ label: '4) Solving Grid :', underline: true, icon: '../assets/ic_solving.png', description: 'Click this menu to use various AI solvers. Descriptions are available for each solver; just click to read them.' },
{ label: '5) Use Settings :', underline: true, icon: '../assets/ic_solution.png', description: 'This section facilitates user testing. In this menu, you can: \n - Reset the position \n of the polyominoes to their original spawn points.\n - Shuffle the positions \n of the polyominoes on the field, useful if duplicated pieces overlap.\n - Delete all polyominoes \n from the field and the grid.' }
];


const subIcons = [
{ path: '../assets/ic_rotate_right.png', x: 245, y: 339 },
Expand All @@ -33,7 +32,6 @@ export function showTutorialPopup(toolbar) {
{ path: '../assets/ic_trash.png', x: 250, y: 1107},
];


const startY = 60;
const rowHeight = 60;
const colX = 25;
Expand All @@ -48,7 +46,6 @@ export function showTutorialPopup(toolbar) {
ctx.fillStyle = '#000';
ctx.fillText(row.label, colX, y + 20);


if (row.description) {
dropdowns[index] = { description: row.description, expanded: true, y: y + 40 };
}
Expand All @@ -58,12 +55,12 @@ export function showTutorialPopup(toolbar) {
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
const paragraphs = text.split('\n');
let totalLines = 0;

paragraphs.forEach(paragraph => {
const words = paragraph.split(' ');
let line = '';
const lines = [];

for (let n = 0; n < words.length; n++) {
let testLine = line + words[n] + ' ';
let metrics = ctx.measureText(testLine);
Expand All @@ -81,10 +78,8 @@ export function showTutorialPopup(toolbar) {
});
totalLines += lines.length;
});

return totalLines;
}

};

function redrawPopup() {
ctx.clearRect(0, 0, popup.width, popup.height);
Expand Down Expand Up @@ -123,7 +118,6 @@ export function showTutorialPopup(toolbar) {
};
}
});


clickAreas.push({ index, rect: { x: colX, y, width: popup.width - colX - 100, height: rowHeight }, type: 'label' });

Expand All @@ -135,7 +129,6 @@ export function showTutorialPopup(toolbar) {
}
});
};

redrawPopup();
};

68 changes: 36 additions & 32 deletions 3D/js/board.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as THREE from 'three';

export class Board {
constructor(scene, size = 10) {
constructor(scene, size = { x: 10, y: 10, z: 10 }) {
this.scene = scene;
this.size = size;
this.grid = new THREE.Group();
Expand All @@ -20,29 +20,33 @@ export class Board {
const gridMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
const gridStep = 1;

for (let i = -size / 2; i <= size / 2; i += gridStep) {
this.addLine(gridMaterial, [i, -size / 2, -size / 2], [i, size / 2, -size / 2], this.grid);
this.addLine(gridMaterial, [i, -size / 2, size / 2], [i, size / 2, size / 2], this.grid);
this.addLine(gridMaterial, [i, -size / 2, -size / 2], [i, -size / 2, size / 2], this.grid);
this.addLine(gridMaterial, [i, size / 2, -size / 2], [i, size / 2, size / 2], this.grid);
for (let i = -size.x / 2; i <= size.x / 2; i += gridStep) {
this.addLine(gridMaterial, [i, -size.y / 2, -size.z / 2], [i, size.y / 2, -size.z / 2], this.grid);
this.addLine(gridMaterial, [i, -size.y / 2, size.z / 2], [i, size.y / 2, size.z / 2], this.grid);
this.addLine(gridMaterial, [i, -size.y / 2, -size.z / 2], [i, -size.y / 2, size.z / 2], this.grid);
this.addLine(gridMaterial, [i, size.y / 2, -size.z / 2], [i, size.y / 2, size.z / 2], this.grid);
}

this.addLine(gridMaterial, [-size / 2, i, -size / 2], [size / 2, i, -size / 2], this.grid);
this.addLine(gridMaterial, [-size / 2, i, size / 2], [size / 2, i, size / 2], this.grid);
this.addLine(gridMaterial, [-size / 2, i, -size / 2], [-size / 2, i, size / 2], this.grid);
this.addLine(gridMaterial, [size / 2, i, -size / 2], [size / 2, i, size / 2], this.grid);
for (let j = -size.y / 2; j <= size.y / 2; j += gridStep) {
this.addLine(gridMaterial, [-size.x / 2, j, -size.z / 2], [size.x / 2, j, -size.z / 2], this.grid);
this.addLine(gridMaterial, [-size.x / 2, j, size.z / 2], [size.x / 2, j, size.z / 2], this.grid);
this.addLine(gridMaterial, [-size.x / 2, j, -size.z / 2], [-size.x / 2, j, size.z / 2], this.grid);
this.addLine(gridMaterial, [size.x / 2, j, -size.z / 2], [size.x / 2, j, size.z / 2], this.grid);
}

this.addLine(gridMaterial, [-size / 2, -size / 2, i], [size / 2, -size / 2, i], this.grid);
this.addLine(gridMaterial, [-size / 2, size / 2, i], [size / 2, size / 2, i], this.grid);
this.addLine(gridMaterial, [-size / 2, -size / 2, i], [-size / 2, size / 2, i], this.grid);
this.addLine(gridMaterial, [size / 2, -size / 2, i], [size / 2, size / 2, i], this.grid);
for (let k = -size.z / 2; k <= size.z / 2; k += gridStep) {
this.addLine(gridMaterial, [-size.x / 2, -size.y / 2, k], [size.x / 2, -size.y / 2, k], this.grid);
this.addLine(gridMaterial, [-size.x / 2, size.y / 2, k], [size.x / 2, size.y / 2, k], this.grid);
this.addLine(gridMaterial, [-size.x / 2, -size.y / 2, k], [-size.x / 2, size.y / 2, k], this.grid);
this.addLine(gridMaterial, [size.x / 2, -size.y / 2, k], [size.x / 2, size.y / 2, k], this.grid);
}

for (let x = -size / 2 + gridStep; x < size / 2; x += gridStep) {
for (let y = -size / 2 + gridStep; y < size / 2; y += gridStep) {
for (let z = -size / 2 + gridStep; z < size / 2; z += gridStep) {
this.addLine(gridMaterial, [x, y, -size / 2], [x, y, size / 2], this.innerGrid);
this.addLine(gridMaterial, [x, -size / 2, z], [x, size / 2, z], this.innerGrid);
this.addLine(gridMaterial, [-size / 2, y, z], [size / 2, y, z], this.innerGrid);
for (let x = -size.x / 2 + gridStep; x < size.x / 2; x += gridStep) {
for (let y = -size.y / 2 + gridStep; y < size.y / 2; y += gridStep) {
for (let z = -size.z / 2 + gridStep; z < size.z / 2; z += gridStep) {
this.addLine(gridMaterial, [x, y, -size.z / 2], [x, y, size.z / 2], this.innerGrid);
this.addLine(gridMaterial, [x, -size.y / 2, z], [x, size.y / 2, z], this.innerGrid);
this.addLine(gridMaterial, [-size.x / 2, y, z], [size.x / 2, y, z], this.innerGrid);
}
}
}
Expand All @@ -57,20 +61,20 @@ export class Board {
group.add(line);
};

addPolycube(polycube) {
this.grid.add(polycube.group);
};

removePolycube(polycube) {
this.grid.remove(polycube.group);
};

toggleInnerGrid(show) {
this.showInnerGrid = show;
if (show) {
this.scene.add(this.innerGrid);
} else {
this.scene.remove(this.innerGrid);
if (show) { this.scene.add(this.innerGrid); }
else { this.scene.remove(this.innerGrid); }
};

clearGrid() {
while (this.grid.children.length > 0) {
this.grid.remove(this.grid.children[0]);
}
while (this.innerGrid.children.length > 0) {
this.innerGrid.remove(this.innerGrid.children[0]);
}
this.scene.remove(this.grid);
this.scene.remove(this.innerGrid);
};
};
Loading

0 comments on commit 9127384

Please sign in to comment.