Skip to content

Commit 45e5713

Browse files
mime9599mime9599
committed
Merge branch 'main' of https://github.com/https-sam/algorithm-visualizer into functional_board
� Conflicts: � package-lock.json � package.json � src/components/Page/Splash/SplashScreen.js � src/components/Page/partial/Navbar/Navigation.js
2 parents 8dee51a + 4b3effe commit 45e5713

26 files changed

+296
-145
lines changed

‎.swp‎

12 KB
Binary file not shown.

‎package.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"react": "16.12.0",
7-
"react-dom": "16.12.0",
6+
"@splinetool/react-spline": "^2.2.1",
7+
"@testing-library/jest-dom": "^5.16.4",
8+
"@testing-library/react": "^13.3.0",
9+
"@testing-library/user-event": "^13.5.0",
10+
"csstype": "^3.1.0",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"react-router": "^6.3.0",
814
"react-router-dom": "^6.3.0",
915
"react-spring": "8.0.27",
1016
"react-three-fiber": "4.0.12",

‎public/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
1616
<link rel="icon" href="%PUBLIC_URL%/favicon.png" sizes="any" type="image/png">
1717
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png">
18+
<link rel="preconnect" href="https://fonts.googleapis.com">
19+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20+
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@500;600&display=swap" rel="stylesheet">
1821
<title>Algo Visualizer</title>
1922
</head>
2023
<body class="">

‎src/Utility/Dropdown/Dropdown.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@ function Dropdown() {
2424
>
2525
{DescriptorItems.map((item, index) => {
2626
return (
27-
<li key = {index}>
27+
<li key = {index} className="bg-gray-300 hover:bg-gray-400 dark:bg-lightDark dark:hover:bg-darkGray">
2828
<Link
29-
className = {`${item.class} `}
29+
className = {`${item.class} text-gray-700 dark:text-gray-200 fontFamily-themeFont font-bold`}
3030
to = {item.path}
3131
onClick = {() => setClick(false)}
32+
3233
>
3334
{item.title}
3435
</Link>

‎src/Utility/Dropdown/dropdown.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.dropdown-menu {
2-
background: #dedada;
32
width: 160px;
43
position: absolute;
54
text-align: center;
@@ -13,14 +12,10 @@
1312
}
1413

1514
.dropdown-menu li {
16-
background: #565960;
1715
cursor: pointer;
1816
color: #63dbf968
1917
}
2018

21-
.dropdown-menu li:hover {
22-
background: #5cabff;
23-
}
2419

2520
.dropdown-menu.clicked {
2621
display: none;
@@ -31,7 +26,6 @@
3126
height: 100%;
3227
width: 100%;
3328
text-decoration: none;
34-
color: #d2d3ef;
3529
padding: 16px;
3630
}
3731

‎src/Utility/Navigation_Descriptor.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ export const DescriptorItems = [
1414
path: '/alorithms-source',
1515
class: 'dropdown-link'
1616
},
17-
{
18-
title: '',
19-
path: '/',
20-
class: 'dropdown-link'
21-
}
17+
// {
18+
// title: '',
19+
// path: '/',
20+
// class: 'dropdown-link'
21+
// }
2222
];

‎src/components/Animation/Animation.js‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import {Document} from 'postcss';
33

44

55
class Animation {
6+
static timeouts = [];
67

78
constructor() {
8-
Animation.timeouts = [];
99
// SG 07/09/2022 15:11 Singleton pattern
1010
if (Animation._instance) {
1111
return Animation._instance;
@@ -19,10 +19,9 @@ class Animation {
1919

2020
static async clearTimeout() {
2121
Animation.stop = true;
22-
for (const timeout of Animation.threads) {
22+
for (const timeout of Animation.timeouts) {
2323
await this.clearTimeout(timeout);
2424
}
25-
Animation.myAudioContext = new AudioContext();
2625
}
2726

2827

@@ -36,26 +35,25 @@ class Animation {
3635

3736
static swap(i, k) {
3837
let unSortedBars = document.querySelectorAll('.array-bars');
39-
var oldHeight = unSortedBars[k].style.height;
38+
var oldHeight = unSortedBars[k].style.height;
4039
unSortedBars[k].style.height = unSortedBars[i].style.height;
4140
unSortedBars[i].style.height = oldHeight;
4241

4342
var oldID = unSortedBars[k].id;
4443
unSortedBars[k].id = unSortedBars[i].id;
45-
unSortedBars[i].id = oldID; // SG 07/11/2022 09:27 temp1
44+
unSortedBars[i].id = oldID;
4645

4746
var oldContent = unSortedBars[i].getAttribute("data");
4847
unSortedBars[i].setAttribute("data", unSortedBars[k].getAttribute("data"));
49-
unSortedBars[k].setAttribute("data", oldContent); // SG 07/11/2022 09:27 temp1
50-
48+
unSortedBars[k].setAttribute("data", oldContent);
5149
}
5250

5351

5452

5553
static changeHeight(i, value, oldIndex) {
5654
let unSortedBars = document.querySelectorAll('.array-bars');
5755
unSortedBars[i].style.height = value+'px';
58-
unSortedBars[i].id = value; // SG 07/11/2022 09:27 temp1
56+
unSortedBars[i].id = value;
5957
unSortedBars[i].setAttribute("data", unSortedBars[oldIndex].getAttribute("data"));
6058
}
6159

@@ -79,25 +77,25 @@ class Animation {
7977
static async makeBeep(vol, freq, duration){
8078

8179
}
80+
8281

8382

84-
static animateMerge(options, animation) {
83+
static async animateMerge(options, animation) {
8584
const delay = options.delay;
8685
const processingColor = options.processingColor;
8786
const defaultColor = options.sortedBarColor;
8887

89-
9088
for (let i = 0; i < animation.length; i++) {
89+
await Animation.getAnimation(delay);
9190
const arrayBars = document.querySelectorAll('.array-bars');
9291
if (i % 3 !== 2) { // SG 07/10/2022 16:52 animate colors
9392
const [firstBar, secondBar] = animation[i];
9493
const color = i % 3 === 0 ? processingColor : defaultColor;
95-
setTimeout(() => {
96-
arrayBars[firstBar].style.backgroundColor = color;
97-
arrayBars[secondBar].style.backgroundColor = color;
98-
}, i * delay);
94+
95+
arrayBars[firstBar].style.backgroundColor = color;
96+
arrayBars[secondBar].style.backgroundColor = color;
97+
9998
} else { // SG 07/10/2022 16:52 animate height
100-
setTimeout(() => {
10199
const [firstBarI, swapHeight] = animation[i];
102100
arrayBars[firstBarI].style.height = swapHeight + "px";
103101
let firstBarHeight = parseInt(arrayBars[firstBarI].style.height.replace('px', ''));
@@ -110,12 +108,9 @@ class Animation {
110108
arrayBars[firstBarI].setAttribute('data', '');
111109
}
112110
arrayBars[firstBarI].id = swapHeight;
113-
}, i * delay);
114-
}
111+
}
115112
}
116113
}
117-
118-
119114
}
120115

121116

‎src/components/Canvas/AlgorithmSelection.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function AlgorithmSelection({strategy, options}) {
4848
</div>
4949

5050
{/* Dropdown menu */}
51-
<div className={`transition-all duration-200 ease-in-out absolute h-[fit] w-[9.5em] text-[.95em] dark:bg-gray-600 bg-gray-500 top-[3.5em] rounded-md z-20 ${showDropdown ? "scale-100" : "scale-[0] -translate-y-[6em]"} `}>
51+
<div className={`transition-all duration-200 ease-in-out absolute h-[fit] w-[9.5em] text-[.95em] dark:bg-gray-600 bg-gray-500 top-[3.9em] rounded-md z-20 ${showDropdown ? "scale-100" : "scale-[0] -translate-y-[8em]"} `}>
5252
<div className={`${currentAlgo === 'Radix' && 'bg-gray-200'} group cursor-pointer w-full dark:hover:bg-gray-700 hover:bg-gray-600 rounded-t-md font-semibold text-white h-[2.8em] flex items-center justify-start pl-4`}
5353
onClick={() => {
5454
setCurrentAlgo('Radix');
@@ -72,18 +72,6 @@ function AlgorithmSelection({strategy, options}) {
7272
>
7373
<p className={`${currentAlgo === 'Heap' && 'text-black group-hover:text-white'}`}>Heap Sort</p>
7474
</div>
75-
76-
<div className={`${currentAlgo === 'Merge' && 'bg-gray-200'} group cursor-pointer w-full hover:bg-gray-700 font-semibold text-white h-[2.8em] flex items-center justify-start pl-4`}
77-
onClick={() => {
78-
setCurrentAlgo('Merge');
79-
options.setState({algorithm: "Merge"});
80-
strategy.setStrategy = Merge;
81-
localStorage.setItem("algorithm", "Merge");
82-
setShowDropdown(!showDropdown)
83-
}}
84-
>
85-
<p className={`${currentAlgo === 'Merge' && 'text-black group-hover:text-white'}`}>Merge Sort</p>
86-
</div>
8775

8876
<div className={`${currentAlgo === 'Quick' && 'bg-gray-200'} group cursor-pointer w-full hover:bg-gray-700 font-semibold text-white h-[2.8em] flex items-center justify-start pl-4`}
8977
onClick={() => {
@@ -96,6 +84,19 @@ function AlgorithmSelection({strategy, options}) {
9684
>
9785
<p className={`${currentAlgo === 'Quick' && 'text-black group-hover:text-white'}`}>Quick Sort</p>
9886
</div>
87+
88+
<div className={`${currentAlgo === 'Merge' && 'bg-gray-200'} group cursor-pointer w-full hover:bg-gray-700 font-semibold text-white h-[2.8em] flex items-center justify-start pl-4`}
89+
onClick={() => {
90+
setCurrentAlgo('Merge');
91+
options.setState({algorithm: "Merge"});
92+
strategy.setStrategy = Merge;
93+
localStorage.setItem("algorithm", "Merge");
94+
setShowDropdown(!showDropdown)
95+
}}
96+
>
97+
<p className={`${currentAlgo === 'Merge' && 'text-black group-hover:text-white'}`}>Merge Sort</p>
98+
</div>
99+
99100

100101
<div className={`${currentAlgo === 'Shell' && 'bg-gray-200'} group cursor-pointer w-full hover:bg-gray-700 font-semibold text-white h-[2.8em] flex items-center justify-start pl-4`}
101102
onClick={() => {

‎src/components/Canvas/Canvas.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,26 @@ class Canvas extends Component {
1212

1313
render() {
1414
const { generatedArray, showHeight, defaultBarColor } = this.props;
15-
1615
const arrayLength = generatedArray.length;
1716
const MARGIN = CONSTANTS.margin;
1817
const SCREEN_WIDTH = window.innerWidth;
1918
const BAR_WIDTH = Math.floor((SCREEN_WIDTH - (MARGIN*arrayLength)) / arrayLength);
2019
const MARGIN_BTW_CANVAS_AND_OPTIONS = 146;
2120
const CANVAS_HEIGHT = window.innerHeight - CONSTANTS.OFFSET + MARGIN_BTW_CANVAS_AND_OPTIONS +"px";
2221
const FONT_SIZE = Math.floor(BAR_WIDTH * 0.4);
23-
2422
const PINK = "#ff595e";
2523
const PURPLE = "#6a4c93";
2624

2725

2826
return (
29-
<div className={`w-full flex justify-center dark:bg-gradient-to-b from-lightGray to-richBlue relative`} style={{minHeight:CANVAS_HEIGHT}}>
27+
<div id="sorting-main-canvas" className={`w-full flex justify-center dark:bg-gradient-to-b from-lightGray to-richBlue relative`} style={{minHeight:CANVAS_HEIGHT}}>
3028
<p className="absolute top-3 z-40 font-semibold text-red-600 font-sans" id="sort-canvas-error-msg"></p>
3129
<div className="flex items-end z-1">
3230
{arrayLength > 1 ? generatedArray.map((element) => {
3331
return (
3432
<div id={`${element}`} fontSize={FONT_SIZE} data={`${(BAR_WIDTH > 25 && element > FONT_SIZE+16 && showHeight) ? element : ''}`} length="40px" key={Math.random()} style={{"--bar-font-size" :FONT_SIZE+"px", height: element+'px', width: BAR_WIDTH+'px', backgroundColor: this.props.barColor}}
3533
className={`array-bars z-10 m-[1px] rounded-t-md relative ${(defaultBarColor !== PINK && defaultBarColor !== PURPLE && defaultBarColor !== 'black') ? "after:text-gray-700" : "after:text-white"}`}/>
36-
)
34+
)
3735
}) : <SortingCanvasDescription/>}
3836
</div>
3937
<div className="main-canvas-grid z-0 dark:opacity-[0.03]"/>

‎src/components/Canvas/Description/SortingCanvasDescription.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ import NormalParagraph from './NormalParagraph'
1010
import { InputHandler } from '../../InputHandler/InputHandler'
1111

1212

13-
function SortingCanvasDescription() {
13+
const SortingCanvasDescription = () => {
1414
return (
15-
<div className="z-10 self-center font-sans max-w-[90vw] text-gray-700 dark:text-white mt-10 md:mt-0 md:pt-0">
15+
<div className="z-10 self-center font-sans max-w-[90vw] text-gray-700 dark:text-white mt-10 xl:mt-0 md:pt-0">
1616
<p className="text-[1.5em] md:text-[2.8em] font-bold mb-5">Welcome to Sorting Visualizer</p>
1717
<div>
18-
<span className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">Let's start by entering a number. It will generate an array with <BoldParagraph text="random numbers"/> based on the input.</span><br/>
18+
<span className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">Let's start by entering a number. It will generate an array of the input length with <BoldParagraph text="random numbers"/>.</span><br/>
1919
<span className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">Next, select an <BoldParagraph text="algorithm"/> and press the <BoldParagraph text="play"/> button.</span>
2020
</div>
2121

@@ -39,4 +39,4 @@ function SortingCanvasDescription() {
3939
)
4040
}
4141

42-
export default SortingCanvasDescription
42+
export default SortingCanvasDescription;

0 commit comments

Comments
 (0)