-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
114 lines (105 loc) · 3.45 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
let grid = document.getElementById("box");
let cells = [];
let gridRow, gridCol;
let rowInput = document.getElementById('row');
let colInput = document.getElementById('col');
let x0 = document.getElementById('x0');
let x1 = document.getElementById('x1');
let y0 = document.getElementById('y0');
let y1 = document.getElementById('y1');
let drawButton = document.getElementById('draw-button');
let drawGridButton = document.getElementById('draw-grid-button');
let coodForm = document.getElementById('form');
let gridForm = document.getElementById('grid-form');
function setGridProperties(row, col) {
grid.style.display = "grid";
//each cell is 50px wide
grid.style.gridTemplateRows = `repeat(${row},50px)`;
grid.style.gridTemplateColumns = `repeat(${col},50px)`;
//setting max value of input based on grid row and col
x0.setAttribute("max", col - 1);
x1.setAttribute("max", col - 1);
y0.setAttribute("max", row - 1);
y1.setAttribute("max", row - 1);
}
//drawing/updating board
function drawGrid(cells, row, col) {
let colorPath = false;
if (cells.length > 0) {
grid.innerHTML = "";
colorPath = true;
}
for (let j = row - 1; j >= 0; --j) {
for (let i = 0; i < col; ++i) {
let cell = document.createElement("div");
cell.innerHTML = `<p>${i},${j}</p>`;
cell.classList.add('cell');
if (colorPath && cells.includes(`${i},${j}`)) {
cell.style.color = "white";
//coloring first cell green
if (cells[0] === `${i},${j}`) cell.style.backgroundColor = "green";
//coloring last cell red
else if (cells[cells.length - 1] === `${i},${j}`) cell.style.backgroundColor = "red";
//coloring other cell blue
else {
cell.style.backgroundColor = "blue";
}
cell.classList.add('animate__bounceIn');
}
grid.appendChild(cell);
}
}
}
//collecting path
function generatePath(x0, x1, y0, y1) {
let dx = x1 - x0;
let dy = y1 - y0;
let steps = Math.abs(dx) > Math.abs(dy) ? Math.abs(dx) : Math.abs(dy);
let xIncrement = dx / steps;
let yIncrement = dy / steps;
let x = x0;
let y = y0;
cells.push(`${Math.round(x)},${Math.round(y)}`);
for (let i = 0; i < steps; i++) {
x += xIncrement;
y += yIncrement;
cells.push(`${Math.round(x)},${Math.round(y)}`);
}
console.log(cells);
drawGrid(cells, gridRow, gridCol);
}
//extracting inputs
function extractInput() {
let input = [parseInt(x0.value), parseInt(x1.value), parseInt(y0.value), parseInt(y1.value)];
clearCoodInputFields();
return input;
}
function clearCoodInputFields() {
x0.value = "";
x1.value = "";
y0.value = "";
y1.value = "";
}
function extractGridProperties() {
gridRow = parseInt(rowInput.value);
gridCol = parseInt(colInput.value);
rowInput.value = "";
colInput.value = "";
}
coodForm.addEventListener('submit', (e) => {
//clearing cells for new path
cells = [];
generatePath(...extractInput());
e.preventDefault();
});
gridForm.addEventListener('submit', (e) => {
extractGridProperties();
//clearing grid to make a new one
grid.innerHTML = "";
//clearing previous cells
cells = [];
clearCoodInputFields();
setGridProperties(gridRow, gridCol);
drawGrid(cells, gridRow, gridCol);
e.preventDefault();
});