init

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()