102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
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()
|