Sorting-Visualiser/script.js at master · greg-bt/Sorting-Visualiser · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// Bubble Sort
var temp = 0;
var tempDiv = "";
var sorting = true;
var active = false;

function sort() {
	if (!active) {
		sorting = true;
		document.getElementById("button").innerHTML = "stop";
		document.getElementById("grid").innerHTML = "";
		var sort = new Array(parseInt(document.getElementById("quantity").value));
		var interval = 300-document.getElementById("slider").value;
		var divs = new Array(sort.length);
		var type = document.getElementById("select").value;

		for (i = 0; i < sort.length; i++) {
			sort[i] = Math.floor(Math.random() * 100+1);
			divs[i] = i;
			document.getElementById("grid").innerHTML += `<div style="height: ${sort[i]}%;" id="${i}" class="div"></div>`;
		}
	}
	if (active) {
		window.location.reload(false);
		return;
	} else if (type == "1") { // bubble
		active = true;
		for (let j = 0; j <= sort.length; j++) {
			setTimeout(function () {
				if (sorting) {
					sorting = false;
					for (let i = 0; i <= sort.length-(j+2) ; i++) {
						setTimeout(function () {

							for (z = 0; z < document.getElementsByClassName("div").length; z++) {
								document.getElementsByClassName("div")[z].style.backgroundColor = "#eee";
							}
							document.getElementById(divs[i]).style.backgroundColor = "red";
							document.getElementById(divs[i+1]).style.backgroundColor = "#5f5";

							if (sort[i] > sort[i + 1]) {
								sorting = true;
								document.getElementById(divs[i+1]).style.backgroundColor = "red";

								temp = sort[i + 1];
								sort[i + 1] = sort[i];
								sort[i] = temp;

								document.getElementById(divs[i]).style.gridColumnStart = i+2;
								document.getElementById(divs[i+1]).style.gridColumnStart = i+1;

								temp = divs[i + 1];
								divs[i + 1] = divs[i];
								divs[i] = temp;
							}
						}, i * interval);
					}
				} else {
					for (z = 0; z < document.getElementsByClassName("div").length; z++) {
						document.getElementsByClassName("div")[z].style.backgroundColor = "#5f5";
					}
					active = false;
					interval = 0;
					document.getElementById("button").innerHTML = "run";
				}
			}, ((j * sort.length) - ( j*( j * .5) ) ) * interval);
		}
	} else if (type == "2") {
		active = true;
		for(let j = 0; j < sort.length; j++) {
			setTimeout(function () {
				for(let i = 0; i < j; i++) { // TODO Skip when place has been found
					setTimeout(function () {
						for (z = 0; z < document.getElementsByClassName("div").length; z++) {
							document.getElementsByClassName("div")[z].style.backgroundColor = "#eee";
						}
						document.getElementById(divs[j]).style.backgroundColor = "blue";
						document.getElementById(divs[i]).style.backgroundColor = "red";
						if(sort[j] <= sort[i]) {
							document.getElementById(divs[j]).style.backgroundColor = "#5f5";

							temp = sort[j];
							sort.splice(j,1);
							sort.splice((i), 0, temp);

							temp = divs[j];
							divs.splice(j,1);
							divs.splice((i), 0, temp);

							for(z = 0; z < divs.length; z++) {
								document.getElementById(divs[z]).style.gridColumnStart = z+1;
							}
						}
						if (j == sort.length-1) {
							for (z = 0; z < document.getElementsByClassName("div").length; z++) {
								document.getElementsByClassName("div")[z].style.backgroundColor = "#5f5";
							}
							active = false;
							interval = 0;
							document.getElementById("button").innerHTML = "run";
						}
					}, i * interval);

				}
			}, j * interval * j);
		}

	}
}

document.getElementById("slider").oninput = function() {
  document.getElementById("sped").innerHTML = ` Speed: ${Math.round(this.value/300*100)}%`;
}

document.getElementById("quantity").oninput = function() {
  document.getElementById("amm").innerHTML = ` Amount: ${this.value}/180`;
}

document.getElementById("sped").innerHTML = ` Speed: ${Math.round(document.getElementById("slider").value/300*100)}%`;
document.getElementById("amm").innerHTML = ` Amount: ${document.getElementById("quantity").value}/180`;