Graph-Visualizer/nav.js at master · Abdullah-Rady/Graph-Visualizer · GitHub

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
let algorithm = ""

const optionButtons = document.querySelectorAll('.nav-btn');
const dropdwonItems = document.querySelectorAll('.dropdown-item');
const pathList = document.querySelector('.path-list')
const reset = document.querySelector('.reset')
const mazeList = document.querySelector('.maze-list')
const visualize = document.querySelector('.visualize');

const startBFS = () => {
    bfs(startx, starty)
}

const startDFS = () => {
    dfs(startx, starty)
}

optionButtons.forEach(button => {
    button.addEventListener('click', () => {

        if (button.id == "path-grp-btn") {

            if (pathList.classList.contains("hide")) {
                mazeList.classList.add("hide")
                pathList.classList.remove("hide")
                return
            }

            pathList.classList.add("hide")
            return
        }

        if (mazeList.classList.contains("hide")) {
            pathList.classList.add("hide")
            mazeList.classList.remove("hide")
            return
        }
        mazeList.classList.add("hide")
    });
})


dropdwonItems.forEach((item) => {

    item.addEventListener("mouseover", () => {
        item.style.backgroundColor = "rgba(220, 220, 220, 1)";
    })

    item.addEventListener("mouseout", () => {
        item.style.backgroundColor = "#fff";
    })

    if(item.classList.contains("path-item")) {


        item.addEventListener("click", () => {
            algorithm = item.innerHTML.toLocaleLowerCase();
            document.querySelector('.visualize').innerHTML = "visualize " + algorithm.toUpperCase()
            pathList.classList.add("hide")

            if(item.classList.contains("bfs")) {
                visualize.removeEventListener("click", startDFS);
                visualize.addEventListener("click", startBFS)
            }else{
                visualize.removeEventListener("click", startBFS)
                visualize.addEventListener("click", startDFS)
            }

        });

    } else{

        item.addEventListener("click", () => {
            primsAlgorithm()
            mazeList.classList.add("hide")

        });
    }
})

reset.addEventListener('click', ()=>{

    generateGrid()

    if(highestTimeoutId != -1){
        for(let i = highestTimeoutId; i>0;i--)
            clearTimeout(i)
    }

})