Skip to content

Commit ae51d4a

Browse files
author
Kenneth Apeland
committed
fancy colors and split line
1 parent 6390d91 commit ae51d4a

File tree

8 files changed

+128
-196
lines changed

8 files changed

+128
-196
lines changed

‎MergeSort/css/style.css

+9-25
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,15 @@ ul.insElements li.finished div {
3535
background-color: #3adb04;
3636
}
3737

38-
ul.insElements li.pivot div {
39-
background-color: #f1f500;
40-
}
41-
42-
ul.insElements li.pivot div {
43-
background-color: #f1f500;
44-
}
45-
46-
ul.insElements li.highlightNode div {
47-
background-color: #f4a742;
48-
}
49-
ul.insElements li.pivot div {
50-
background-color: #f1f500;
51-
}
52-
53-
ul.insElements li.highlightNode div {
54-
background-color: #f4a742;
38+
ul.insElements li.middle div:after {
39+
content: "";
40+
background-color: #000;
41+
position: absolute;
42+
width: 4px;
43+
height: 100px;
44+
top: -20px;
45+
right: 73px;
46+
display: block;
5547
}
5648

5749
div#array ul#arrayUl {
@@ -138,11 +130,3 @@ div.arrow {
138130
div.underArray {
139131
margin-top: 400px;
140132
}
141-
142-
div#pivotChar {
143-
position: absolute;
144-
font-weight: bold;
145-
font-size: 1.2em;
146-
/*top: 100px;*/
147-
/*left: 200px;*/
148-
}

‎MergeSort/js/InitArray.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ function getArray(ran:string) {
7676
else if (ran === "almostSorted") {
7777
array = setAlmostSortedArray();
7878
}
79-
else { // If page is tested in another browser
79+
else { // If all else fails
8080
array = [14, 11, 19, 18, 7, 17, 15, 5];
8181
}
8282

‎MergeSort/js/MergeSortAlgorithm.js

+17-15
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,25 @@ function startMergeSort() {
2020
}
2121
function mergesort(array) {
2222
if (array.length < 2) {
23+
//denne er ekkel
24+
viewer.deselectPivotElement(array[0]);
2325
return array;
2426
}
2527
else {
2628
var mid = void 0;
2729
var left = void 0;
2830
var right = void 0;
2931
mid = Math.floor(array.length * 0.5);
30-
//viewer.setPivotElement(copyArray.indexOf(array[mid - 1]));
3132
left = array.slice(0, mid);
32-
viewer.highlightNodes(left);
33-
viewer.lowerElements(left);
34-
viewer.deHighlightNodes(left);
3533
right = array.slice(mid);
36-
viewer.highlightNodes(right);
34+
//denne og er ekkel
35+
viewer.setPivotElement(right[0]);
36+
viewer.setColorInArrayElements(left, 1, true);
37+
viewer.setColorInArrayElements(right, 2, true);
38+
viewer.lowerElements(left);
3739
viewer.lowerElements(right);
38-
viewer.deHighlightNodes(right);
40+
viewer.setColorInArrayElements(left, 1, false);
41+
viewer.setColorInArrayElements(right, 2, false);
3942
//Split until there is only 1 element left
4043
return merge(mergesort(left), mergesort(right));
4144
}
@@ -48,19 +51,19 @@ function merge(left, right) {
4851
var counter = copyArray.indexOf(left[0]);
4952
while (tempLeftIndex < left.length && tempRightIndex < right.length) {
5053
//Compare the elements from each array
51-
viewer.highlightNode(left[tempLeftIndex]);
52-
viewer.highlightNode(right[tempRightIndex]);
54+
viewer.setColorInArrayElement(left[tempLeftIndex], 0, true);
55+
viewer.setColorInArrayElement(right[tempRightIndex], 0, true);
5356
if (left[tempLeftIndex] < right[tempRightIndex]) {
57+
viewer.setColorInArrayElement(left[tempLeftIndex], 3, true);
5458
viewer.moveElementToPlace(left[tempLeftIndex], counter, copyArray.indexOf(left[tempLeftIndex]));
55-
viewer.deHighlightNode(left[tempLeftIndex]);
5659
result.push(left[tempLeftIndex]);
5760
testing[counter] = left[tempLeftIndex];
5861
counter++;
5962
tempLeftIndex++;
6063
}
6164
else {
65+
viewer.setColorInArrayElement(right[tempRightIndex], 3, true);
6266
viewer.moveElementToPlace(right[tempRightIndex], counter, copyArray.indexOf(right[tempRightIndex]));
63-
viewer.deHighlightNode(right[tempRightIndex]);
6467
result.push(right[tempRightIndex]);
6568
testing[counter] = right[tempRightIndex];
6669
counter++;
@@ -69,30 +72,29 @@ function merge(left, right) {
6972
}
7073
if (right.slice(tempRightIndex).length > 0) {
7174
var moreRight = right.slice(tempRightIndex);
72-
viewer.highlightNodes(moreRight);
75+
viewer.setColorInArrayElements(moreRight, 3, true);
7376
for (var i = 0; i < moreRight.length; i++) {
7477
viewer.moveElementToPlace(moreRight[i], counter, copyArray.indexOf(moreRight[i]));
75-
viewer.deHighlightNode(moreRight[i]);
7678
testing[counter] = moreRight[i];
7779
counter++;
7880
}
7981
}
8082
if (left.slice(tempLeftIndex).length > 0) {
8183
var moreLeft = left.slice(tempLeftIndex);
82-
viewer.highlightNodes(moreLeft);
84+
viewer.setColorInArrayElements(moreLeft, 3, true);
8385
for (var i = 0; i < moreLeft.length; i++) {
8486
viewer.moveElementToPlace(moreLeft[i], counter, copyArray.indexOf(moreLeft[i]));
85-
viewer.deHighlightNode(moreLeft[i]);
8687
testing[counter] = moreLeft[i];
8788
counter++;
8889
}
8990
}
91+
viewer.setColorInArrayElements(testing, 3, false);
9092
copyArray = testing.slice(0);
9193
return result.concat(left.slice(tempLeftIndex)).concat(right.slice(tempRightIndex));
9294
}
9395
function setRandomMyArray() {
9496
for (var i = 0; i < n; i++) {
95-
sortArray[i] = randomInt(0, 100);
97+
sortArray[i] = randomInt(0, 99);
9698
}
9799
return sortArray;
98100
}

‎MergeSort/js/MergeSortAlgorithm.ts

+23-17
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ function startMergeSort() {
2626

2727
function mergesort(array: number[]) {
2828
if (array.length < 2) {
29+
//denne er ekkel
30+
viewer.deselectPivotElement(array[0]);
2931
return array;
3032

3133
} else {
@@ -35,17 +37,20 @@ function mergesort(array: number[]) {
3537
let right: number[];
3638

3739
mid = Math.floor(array.length * 0.5);
38-
//viewer.setPivotElement(copyArray.indexOf(array[mid - 1]));
39-
4040
left = array.slice(0, mid);
41-
viewer.highlightNodes(left);
42-
viewer.lowerElements(left);
43-
viewer.deHighlightNodes(left);
44-
4541
right = array.slice(mid);
46-
viewer.highlightNodes(right);
42+
43+
//denne og er ekkel
44+
viewer.setPivotElement(right[0]);
45+
46+
viewer.setColorInArrayElements(left, 1, true);
47+
viewer.setColorInArrayElements(right, 2, true);
48+
49+
viewer.lowerElements(left);
4750
viewer.lowerElements(right);
48-
viewer.deHighlightNodes(right);
51+
52+
viewer.setColorInArrayElements(left, 1, false);
53+
viewer.setColorInArrayElements(right, 2, false);
4954

5055
//Split until there is only 1 element left
5156
return merge(mergesort(left), mergesort(right));
@@ -62,12 +67,12 @@ function merge(left: number[], right: number[]) {
6267

6368
while (tempLeftIndex < left.length && tempRightIndex < right.length) {
6469
//Compare the elements from each array
65-
viewer.highlightNode(left[tempLeftIndex]);
66-
viewer.highlightNode(right[tempRightIndex]);
70+
viewer.setColorInArrayElement(left[tempLeftIndex], 0, true);
71+
viewer.setColorInArrayElement(right[tempRightIndex], 0, true);
6772

6873
if (left[tempLeftIndex] < right[tempRightIndex]) {
74+
viewer.setColorInArrayElement(left[tempLeftIndex], 3, true);
6975
viewer.moveElementToPlace(left[tempLeftIndex], counter, copyArray.indexOf(left[tempLeftIndex]));
70-
viewer.deHighlightNode(left[tempLeftIndex]);
7176

7277
result.push(left[tempLeftIndex]);
7378
testing[counter] = left[tempLeftIndex];
@@ -76,8 +81,9 @@ function merge(left: number[], right: number[]) {
7681
tempLeftIndex++;
7782

7883
} else {
84+
viewer.setColorInArrayElement(right[tempRightIndex], 3, true);
7985
viewer.moveElementToPlace(right[tempRightIndex], counter, copyArray.indexOf(right[tempRightIndex]));
80-
viewer.deHighlightNode(right[tempRightIndex]);
86+
8187
result.push(right[tempRightIndex]);
8288
testing[counter] = right[tempRightIndex];
8389

@@ -88,34 +94,34 @@ function merge(left: number[], right: number[]) {
8894

8995
if (right.slice(tempRightIndex).length > 0) {
9096
let moreRight = right.slice(tempRightIndex);
91-
viewer.highlightNodes(moreRight);
97+
viewer.setColorInArrayElements(moreRight, 3, true);
9298
for (let i = 0; i < moreRight.length; i++) {
9399
viewer.moveElementToPlace(moreRight[i], counter, copyArray.indexOf(moreRight[i]));
94-
viewer.deHighlightNode(moreRight[i]);
95100

96101
testing[counter] = moreRight[i];
97102
counter++;
98103
}
99104
}
100105
if (left.slice(tempLeftIndex).length > 0) {
101106
let moreLeft = left.slice(tempLeftIndex);
102-
viewer.highlightNodes(moreLeft);
107+
viewer.setColorInArrayElements(moreLeft, 3, true);
103108
for (let i = 0; i < moreLeft.length; i++) {
104109
viewer.moveElementToPlace(moreLeft[i], counter, copyArray.indexOf(moreLeft[i]));
105-
viewer.deHighlightNode(moreLeft[i]);
106110

107111
testing[counter] = moreLeft[i];
108112
counter++;
109113
}
110114
}
111115

116+
viewer.setColorInArrayElements(testing, 3, false);
117+
112118
copyArray = testing.slice(0);
113119
return result.concat(left.slice(tempLeftIndex)).concat(right.slice(tempRightIndex));
114120
}
115121

116122
function setRandomMyArray() {
117123
for (let i: number = 0; i < n; i++) {
118-
sortArray[i] = randomInt(0, 100);
124+
sortArray[i] = randomInt(0, 99);
119125
}
120126
return sortArray;
121127
}

‎MergeSort/js/Methods.js

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
///<reference path="InitArray.ts"/>
22
var insElemNr = "insElemNr";
33
var LEVEL_HEIGHT = 85;
4+
var defaultColor = "#fff";
5+
var colors = ["#f1f500", "#f4a742", "#f49050", "#3adb04"];
46
function lowerElements(elements) {
57
for (var i = 0; i < elements.length; i++) {
68
var newTop;
@@ -19,29 +21,29 @@ function liftElements(elements) {
1921
}
2022
}
2123
function selectPivotElement(index) {
22-
var insElem = $("#insElemNr" + index);
23-
insElem.addClass("pivot");
24-
insElem.append('<p id="pivotChar">P</p>');
24+
console.log(index);
25+
$("#insElemNr" + index).addClass("middle");
2526
}
26-
function highlightNode(index) {
27-
$("#insElemNr" + index).addClass("highlightNode");
28-
}
29-
function deHighlightNode(index) {
30-
$("#insElemNr" + index).removeClass("highlightNode");
31-
}
32-
function highlightNodes(index) {
33-
for (var i = 0; i < index.length; i++) {
34-
$("#insElemNr" + index[i]).addClass("highlightNode");
27+
function setColor(index, color, colorOn) {
28+
if (colorOn) {
29+
$("#insElemNr" + index).css('backgroundColor', colors[color]);
30+
}
31+
else {
32+
$("#insElemNr" + index).css('backgroundColor', defaultColor); // Default color here
3533
}
3634
}
37-
function deHighlightNodes(index) {
35+
function setColors(index, color, colorOn) {
3836
for (var i = 0; i < index.length; i++) {
39-
$("#insElemNr" + index[i]).removeClass("highlightNode");
37+
if (colorOn) {
38+
$("#insElemNr" + index[i]).css('backgroundColor', colors[color]);
39+
}
40+
else {
41+
$("#insElemNr" + index[i]).css('backgroundColor', defaultColor); // Default color here
42+
}
4043
}
4144
}
4245
function deselectPivotElement(index) {
43-
$("#insElemNr" + index).removeClass("pivot");
44-
$("#insElemNr" + index).children("p").remove();
46+
$("#insElemNr" + index).removeClass("middle");
4547
}
4648
function moveElementToPlace(element, px) {
4749
var $elem = $("#" + insElemNr + element);

‎MergeSort/js/Methods.ts

+18-20
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
declare var $;
44
var insElemNr = "insElemNr";
5-
var LEVEL_HEIGHT: number = 85;
5+
let LEVEL_HEIGHT: number = 85;
6+
let defaultColor: string = "#fff";
7+
let colors: string[] = ["#f1f500", "#f4a742", "#f49050", "#3adb04"];
68

79
function lowerElements(elements: number[]) {
810
for (let i = 0; i < elements.length; i++) {
@@ -24,38 +26,34 @@ function liftElements(elements: number[]) {
2426
}
2527

2628
function selectPivotElement(index: number) {
27-
var insElem = $("#insElemNr" + index);
28-
insElem.addClass("pivot");
29-
insElem.append('<p id="pivotChar">P</p>');
29+
console.log(index);
30+
$("#insElemNr" + index).addClass("middle");
3031
}
3132

32-
function highlightNode(index: number) {
33-
$("#insElemNr" + index).addClass("highlightNode");
33+
function setColor(index: number, color: number, colorOn: boolean) {
34+
if (colorOn) {
35+
$("#insElemNr" + index).css('backgroundColor', colors[color]);
36+
} else {
37+
$("#insElemNr" + index).css('backgroundColor', defaultColor); // Default color here
38+
}
3439
}
3540

36-
function deHighlightNode(index: number) {
37-
$("#insElemNr" + index).removeClass("highlightNode");
38-
}
41+
function setColors(index: number[], color: number, colorOn: boolean) {
3942

40-
function highlightNodes(index: number[]) {
4143
for (let i = 0; i < index.length; i++) {
42-
$("#insElemNr" + index[i]).addClass("highlightNode");
44+
if (colorOn) {
45+
$("#insElemNr" + index[i]).css('backgroundColor', colors[color]);
46+
} else {
47+
$("#insElemNr" + index[i]).css('backgroundColor', defaultColor); // Default color here
48+
}
4349
}
44-
}
4550

46-
function deHighlightNodes(index: number[]) {
47-
for (let i = 0; i < index.length; i++) {
48-
$("#insElemNr" + index[i]).removeClass("highlightNode");
49-
}
5051
}
5152

5253
function deselectPivotElement(index: number) {
53-
$("#insElemNr" + index).removeClass("pivot");
54-
$("#insElemNr" + index).children("p").remove();
54+
$("#insElemNr" + index).removeClass("middle");
5555
}
5656

57-
58-
5957
function moveElementToPlace(element: number, px: number) {
6058
let $elem = $("#" + insElemNr + element);
6159
let moveLeft: string = $elem.css("left");

0 commit comments

Comments
 (0)