commit e65150f518879c660cb3be103dd2b913435a7805 Author: Denys Seredenko Date: Tue Jun 3 13:11:19 2025 +0200 init diff --git a/index.html b/index.html new file mode 100644 index 0000000..c18af1a --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + A* Visualisation Algorithm + + + +

Hello World!

+
+
+ + +
+
+ + +
+ + +
+
+ Selected mode: Free Field +
+ + + + +
+
+
+
+
0
+
0
+
+
+
0
+
0
+
+
+
0
+
0
+
+
+
0
+
0
+
+
+ + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..568fb49 --- /dev/null +++ b/js/main.js @@ -0,0 +1,101 @@ +let width = 10; +let height = 10; + +// 0 - free field, 1 - obstacle, 2 - start point, 3 - end point +let currentMode = 0; + +//0 - means free, 1 - means obstacle, 3 - means start point, 4 - means end point +let fieldModel = []; + +function changeMode(num) { + currentMode = num + rerenderMode() +} + +function rerenderMode() { + let modus = document.getElementById("mode") + if (currentMode === 0) + modus.innerText = 'Free Field' + else if(currentMode === 1) + modus.innerText = 'Obstacle' + else if(currentMode === 2) + modus.innerText = 'Start Point' + else if (currentMode === 3) + modus.innerText = 'End Point' +} + +function onWidthInputChanged(num) { + width = num; +} + +function onHeightInputChanged(num) { + height = num; +} + +function regenerateField() { + fieldModel = [] + for (let i = 0; i < height; ++i) { + fieldModel.push(Array.from({length: width}, (element, index) => 0)) + } + reDrawField() +} + +function startAStar() {} + +function reDrawField() { + const oldField = document.getElementById("field") + + const newField = document.createElement("div") + newField.setAttribute("id", "field") + newField.setAttribute("class", "container text-center") + + for (let i = 0; i < fieldModel.length; ++i) { + //Build a row + let row = document.createElement("div") + row.setAttribute("id", `row-${i}`) + row.setAttribute("class", "row g-2 g-lg-3") + for (let j = 0; j< fieldModel[i].length; ++j) { + //add columns in built row + let column = document.createElement("div") + if (fieldModel[i][j] === 0) { + column.setAttribute("class", "col p-3 border border-1 border-dark bg-white") + } else if (fieldModel[i][j] === 1) { + column.setAttribute("class", "col p-3 border border-1 border-dark bg-black") + } else if (fieldModel[i][j] === 2) { + column.setAttribute("class", "col p-3 border border-1 border-dark bg-warning") + } else if (fieldModel[i][j] === 3) { + column.setAttribute("class", "col p-3 border border-1 border-dark bg-success") + } + column.addEventListener("click", (event) => { + if (currentMode === 2) { + for (let ii = 0; ii < height; ++ii) { + for (let jj = 0; jj < width; ++jj) { + if (fieldModel[ii][jj] === 2) + fieldModel[ii][jj] = 0 + } + } + } + if (currentMode === 3) { + for (let ii = 0; ii < height; ++ii) { + for (let jj = 0; jj < width; ++jj) { + if (fieldModel[ii][jj] === 3) + fieldModel[ii][jj] = 0 + } + } + } + fieldModel[i][j] = currentMode + event.target.innerText = currentMode + reDrawField() + }) + column.innerText = fieldModel[i][j] + + row.appendChild(column) + } + newField.appendChild(row) + } + + oldField.remove() + document.body.appendChild(newField) +} + +regenerateField()