var
container = document.getElementById(
"array"
);
function
generatearray() {
for
(
var
i = 0; i < 20; i++) {
var
value = Math.ceil(Math.random() * 100);
var
array_ele = document.createElement(
"div"
);
array_ele.classList.add(
"block"
);
array_ele.style.height =
`${value * 3}px`;
array_ele.style.transform =
`translate(${i * 30}px)`;
var
array_ele_label =
document.createElement(
"label"
);
array_ele_label.classList.add(
"block_id"
);
array_ele_label.innerText = value;
array_ele.appendChild(array_ele_label);
container.appendChild(array_ele);
}
}
var
count_container = document.getElementById(
"count"
);
function
generate_idx() {
for
(
var
i = 0; i < 20; i++) {
var
array_ele2 = document.createElement(
"div"
);
array_ele2.classList.add(
"block2"
);
array_ele2.style.height =
`${20}px`;
array_ele2.style.transform =
`translate(${i * 30}px)`;
var
array_ele_label2 =
document.createElement(
"label"
);
array_ele_label2.classList.add(
"block_id3"
);
array_ele_label2.innerText = i;
array_ele2.appendChild(array_ele_label2);
count_container.appendChild(array_ele2);
}
}
async
function
hoare_partition(l, r, delay = 700) {
var
blocks =
document.querySelectorAll(
".block"
);
var
pivot =
Number(blocks[l].childNodes[0].innerHTML);
var
i = l - 1;
var
j = r + 1;
while
(
true
) {
do
{
i++;
if
(i - 1 >= l) blocks[i - 1].style.backgroundColor =
"red"
;
blocks[i].style.backgroundColor =
"yellow"
;
await
new
Promise((resolve) =>
setTimeout(() => {
resolve();
}, delay)
);
}
while
(Number(blocks[i].childNodes[0].innerHTML) < pivot);
do
{
j--;
if
(j + 1 <= r) blocks[j + 1].style.backgroundColor =
"green"
;
blocks[j].style.backgroundColor =
"yellow"
;
await
new
Promise((resolve) =>
setTimeout(() => {
resolve();
}, delay)
);
}
while
(Number(blocks[j].childNodes[0].innerHTML) > pivot);
if
(i >= j) {
for
(
var
k = 0; k < 20; k++) blocks[k].style.backgroundColor =
"#6b5b95"
;
return
j;
}
var
temp1 = blocks[i].style.height;
var
temp2 = blocks[i].childNodes[0].innerText;
blocks[i].style.height = blocks[j].style.height;
blocks[j].style.height = temp1;
blocks[i].childNodes[0].innerText = blocks[j].childNodes[0].innerText;
blocks[j].childNodes[0].innerText = temp2;
await
new
Promise((resolve) =>
setTimeout(() => {
resolve();
}, delay)
);
}
}
async
function
QuickSort(l, r, delay = 100) {
if
(l < r) {
var
pivot_idx = await hoare_partition(l, r);
await QuickSort(l, pivot_idx);
await QuickSort(pivot_idx + 1, r);
}
}
generatearray();
generate_idx();
QuickSort(0, 19);