Skip to content

Commit 0a4cf32

Browse files
FedorseFedorse
committed
fix bug state navigation
1 parent 0a09ade commit 0a4cf32

25 files changed

+489
-368
lines changed

‎prettier.config.js renamed to ‎prettier.config.cjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
semi: true,
33
singleQuote: true,
4-
trailingComma: "all",
4+
trailingComma: 'all',
55
printWidth: 80,
66
};

‎prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"semi": true,
3+
"singleQuote": true,
4+
"trailingComma": "all",
5+
"printWidth": 80
6+
}

‎src/App.jsx

+36-33
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { useEffect, useState } from "react";
2-
import { selectionSort } from "./components/algorithms/selectionSort";
3-
import { quickSort } from "./components/algorithms/quickSort";
4-
import Array from "./components/Array/Array";
5-
import { bubbleSort } from "./components/algorithms/bubbleSort";
6-
import { insertionSort } from "./components/algorithms/insertionSort";
7-
import { useAlgorithmState } from "./components/hooks/useAlgorithmState";
8-
import { useEvaluationState } from "./components/hooks/useEvaluationState";
9-
import PlayIcon from "./components/icon/PlayIcon";
10-
import PauseIcon from "./components/icon/PauseIcon";
11-
import ResumePlay from "./components/icon/ResumePlay";
12-
import Player from "./components/Player/Player";
13-
import { disableScroll } from "./utils/disableScroll";
1+
import { useEffect, useState } from 'react';
2+
import { selectionSort } from './components/algorithms/selectionSort';
3+
import { quickSort } from './components/algorithms/quickSort';
4+
import Array from './components/Array/Array';
5+
import { bubbleSort } from './components/algorithms/bubbleSort';
6+
import { insertionSort } from './components/algorithms/insertionSort';
7+
import { useAlgorithmState } from './components/hooks/useAlgorithmState';
8+
import { useEvaluationState } from './components/hooks/useEvaluationState';
9+
import PlayIcon from './components/icon/PlayIcon';
10+
import PauseIcon from './components/icon/PauseIcon';
11+
import ResumePlay from './components/icon/ResumePlay';
12+
import Player from './components/Player/Player';
13+
import { disableScroll } from './utils/disableScroll';
1414

1515
// type AlgState = 'started' | 'notStarted' | 'paused' | 'finished'
1616

@@ -55,13 +55,13 @@ const App = () => {
5555
}, [shouldSort]);
5656

5757
const handleAlgorithmRun = async () => {
58-
if (evalState === "notStarted") {
58+
if (evalState === 'notStarted') {
5959
await handleSort();
60-
} else if (evalState === "started") {
61-
setEvalState("paused");
62-
} else if (evalState === "paused") {
63-
setEvalState("started");
64-
} else if (evalState === "finished") {
60+
} else if (evalState === 'started') {
61+
setEvalState('paused');
62+
} else if (evalState === 'paused') {
63+
setEvalState('started');
64+
} else if (evalState === 'finished') {
6565
resetArray();
6666
resetHistory();
6767
setShouldSort(true);
@@ -70,8 +70,8 @@ const App = () => {
7070

7171
const handleSort = async () => {
7272
try {
73-
setEvalState("started");
74-
if (selectedAlgorithm === "selection") {
73+
setEvalState('started');
74+
if (selectedAlgorithm === 'selection') {
7575
await selectionSort(
7676
array,
7777
setArray,
@@ -81,16 +81,17 @@ const App = () => {
8181
speedRef,
8282
updateHistory,
8383
);
84-
} else if (selectedAlgorithm === "bubble") {
84+
} else if (selectedAlgorithm === 'bubble') {
8585
await bubbleSort(
8686
array,
8787
setArray,
8888
setActiveIndex,
8989
setCompareIndex,
9090
evalStateRef,
9191
speedRef,
92+
updateHistory,
9293
);
93-
} else if (selectedAlgorithm === "quick") {
94+
} else if (selectedAlgorithm === 'quick') {
9495
await quickSort(
9596
array,
9697
setActiveIndex,
@@ -99,33 +100,35 @@ const App = () => {
99100
setCompareIndex,
100101
evalStateRef,
101102
speedRef,
103+
updateHistory,
102104
);
103-
} else if (selectedAlgorithm === "insertion") {
105+
} else if (selectedAlgorithm === 'insertion') {
104106
await insertionSort(
105107
array,
106108
setArray,
107109
setActiveIndex,
108110
setCompareIndex,
109111
evalStateRef,
110112
speedRef,
113+
updateHistory,
111114
);
112115
}
113-
setEvalState("finished");
116+
setEvalState('finished');
114117
resetTracking();
115118
} catch (e) {
116-
if (e.message === "cancelSort") {
117-
console.log("Sort cancelled");
119+
if (e.message === 'cancelSort') {
120+
console.log('Sort cancelled');
118121
resetTracking();
119122
}
120123
}
121124
};
122125

123126
const getButtonText = () => {
124-
if (evalState === "notStarted") {
127+
if (evalState === 'notStarted') {
125128
return <ResumePlay />;
126-
} else if (evalState === "started") {
129+
} else if (evalState === 'started') {
127130
return <PauseIcon />;
128-
} else if (evalState === "paused") {
131+
} else if (evalState === 'paused') {
129132
return <ResumePlay />;
130133
} else {
131134
return <PlayIcon />;
@@ -134,21 +137,21 @@ const App = () => {
134137

135138
const selectAlgorithm = (newAlgorithm) => {
136139
resetTracking();
137-
setEvalState("notStarted");
140+
setEvalState('notStarted');
138141
setSelectedAlgorithm(newAlgorithm);
139142
resetHistory();
140143
resetArray();
141144
};
142145

143146
const resetAlgorithm = () => {
144-
setEvalState("notStarted");
147+
setEvalState('notStarted');
145148
resetTracking();
146149
resetArray();
147150
resetHistory();
148151
};
149152

150153
const barWidth = window.screen.width / array.length;
151-
disableScroll()
154+
disableScroll();
152155

153156
return (
154157
<section>

‎src/components/Array/Array.jsx

+26-17
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
11
import { useEffect } from 'react';
2-
import Bar from '../Bar/Bar'
3-
import './Array.css'
2+
import Bar from '../Bar/Bar';
3+
import './Array.css';
44

5-
const Array = ({array, activeIndex, barWidth, compareIndex, pivotIndex, history,currentStep}) => {
6-
const displayState = history[currentStep] || { array, activeIndex, compareIndex, pivotIndex };
5+
const Array = ({
6+
array,
7+
activeIndex,
8+
barWidth,
9+
compareIndex,
10+
pivotIndex,
11+
history,
12+
currentStep,
13+
}) => {
14+
const displayState = history[currentStep] || {
15+
array,
16+
activeIndex,
17+
compareIndex,
18+
pivotIndex,
19+
};
720
// useEffect(()=>{
821
// console.log('Current Step:', currentStep);
922
// // console.log('Display State:', displayState);
1023
// // console.log('History:', history);
1124
// },[ currentStep])
12-
return (
13-
<div className="arr">
14-
{
15-
displayState.array.map((heightPx, index)=>(
16-
<Bar
25+
return (
26+
<div className="arr">
27+
{displayState.array.map((heightPx, index) => (
28+
<Bar
1729
key={index}
1830
width={barWidth}
1931
height={heightPx}
2032
isActive={index === displayState.activeIndex}
2133
isCompare={index === displayState.compareIndex}
2234
isPivot={index === displayState.pivotIndex}
23-
24-
/>
25-
))
26-
}
35+
/>
36+
))}
2737
</div>
28-
)
38+
);
39+
};
2940

30-
}
31-
32-
export default Array
41+
export default Array;

‎src/components/Bar/Bar.css

+23-18
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
.bar {
2-
background: linear-gradient(to top, rgb(3, 54, 2), rgb(67, 162, 48), rgb(208, 246, 210)); /* Градиент под углом 45 градусов от aquamarine к lightblue и violet */
3-
transition: background-color 0.5s, transform 0.5s;
4-
margin: 0 0.1rem;
5-
border: 0.01rem solid #3c3a3a ;
6-
border-radius: 3px;
2+
background: linear-gradient(
3+
to top,
4+
rgb(3, 54, 2),
5+
rgb(67, 162, 48),
6+
rgb(208, 246, 210)
7+
);
8+
transition:
9+
background-color 0.5s,
10+
transform 0.5s;
11+
margin: 0 0.1rem;
12+
border: 0.01rem solid #3c3a3a;
13+
border-radius: 3px;
14+
}
715

16+
.bar.active {
17+
background-color: rgb(254, 0, 0);
18+
z-index: 100;
19+
}
820

9-
}
10-
11-
.bar.active {
12-
background-color: rgb(254, 0, 0);
13-
z-index: 100;
14-
}
15-
16-
.bar.compare{
17-
background-color: rgb(77, 83, 83);
18-
}
19-
.bar.pivot{
20-
background-color: blue;
21-
}
21+
.bar.compare {
22+
background-color: rgb(77, 83, 83);
23+
}
24+
.bar.pivot {
25+
background-color: blue;
26+
}

‎src/components/Bar/Bar.jsx

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import './Bar.css'
1+
import './Bar.css';
22

3-
const Bar = ({width, height, isActive, isCompare , isPivot}) => {
4-
const barStyles = {
5-
height: `${height}px`,
6-
width: `${width }px`
7-
8-
}
9-
return (
10-
<div className={`bar ${isActive ? 'active' : ''} ${isCompare ? 'compare' : ''} ${isPivot ? 'pivot' :'' } `} style={barStyles}/>
11-
)
12-
}
3+
const Bar = ({ width, height, isActive, isCompare, isPivot }) => {
4+
const barStyles = {
5+
height: `${height}px`,
6+
width: `${width}px`,
7+
};
8+
return (
9+
<div
10+
className={`bar ${isActive ? 'active' : ''} ${isCompare ? 'compare' : ''} ${isPivot ? 'pivot' : ''} `}
11+
style={barStyles}
12+
/>
13+
);
14+
};
1315

14-
export default Bar
16+
export default Bar;

‎src/components/Button/Button.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.button {
2-
padding: 10px;
3-
border-radius: 100%;
4-
cursor: pointer;
5-
background-color: black;
6-
border: none;
7-
color: white;
8-
}
2+
padding: 10px;
3+
border-radius: 100%;
4+
cursor: pointer;
5+
background-color: black;
6+
border: none;
7+
color: white;
8+
}

‎src/components/Button/Button.jsx

+27-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,30 @@
1-
import './Button.css'
1+
import './Button.css';
22

3-
4-
const Button = ({onClick, children, className,onMouseDown,onMouseUp,onMouseLeave, onTouchCancel, onTouchStart, onTouchEnd}) => {
3+
const Button = ({
4+
onClick,
5+
children,
6+
className,
7+
onMouseDown,
8+
onMouseUp,
9+
onMouseLeave,
10+
onTouchCancel,
11+
onTouchStart,
12+
onTouchEnd,
13+
}) => {
514
return (
6-
<button className={`button ${className}`} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave} onClick={onClick} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onTouchStart={onTouchStart}>{children}</button>
7-
)
8-
}
15+
<button
16+
className={`button ${className}`}
17+
onMouseDown={onMouseDown}
18+
onMouseUp={onMouseUp}
19+
onMouseLeave={onMouseLeave}
20+
onClick={onClick}
21+
onTouchEnd={onTouchEnd}
22+
onTouchCancel={onTouchCancel}
23+
onTouchStart={onTouchStart}
24+
>
25+
{children}
26+
</button>
27+
);
28+
};
929

10-
export default Button
30+
export default Button;

‎src/components/DropDown/DropDown.jsx

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { useState, useEffect } from "react";
2-
import "./DropDown.css";
3-
import useClickOutside from "../hooks/useClickOutside";
4-
import DropDownIcon from "../icon/DropDownIcon";
1+
import { useState, useEffect } from 'react';
2+
import './DropDown.css';
3+
import useClickOutside from '../hooks/useClickOutside';
4+
import DropDownIcon from '../icon/DropDownIcon';
5+
import { algorithms } from '../../constants';
6+
import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
57

68
const DropDown = ({ onSelect, selectedAlgorithm }) => {
79
const [isOpen, setIsOpen] = useState(false);
8-
const algorithms = ["selection", "bubble", "quick", "insertion"];
910

1011
const toggleDropDown = () => {
1112
setIsOpen(!isOpen);
@@ -17,14 +18,10 @@ const DropDown = ({ onSelect, selectedAlgorithm }) => {
1718
};
1819
useClickOutside(() => {
1920
if (isOpen) setIsOpen(false);
20-
}, "dropdown");
21-
22-
const capitalizeFirstLetter = (string) => {
23-
return string.charAt(0).toUpperCase() + string.slice(1);
24-
};
21+
}, 'dropdown');
2522

2623
return (
27-
<div className={`dropdown ${isOpen ? "open" : ""}`}>
24+
<div className={`dropdown ${isOpen ? 'open' : ''}`}>
2825
<span className="dropdown-span" onClick={toggleDropDown}>
2926
<DropDownIcon />
3027
</span>
@@ -33,7 +30,7 @@ const DropDown = ({ onSelect, selectedAlgorithm }) => {
3330
<li
3431
key={index}
3532
onClick={() => handleSelect(algorithm)}
36-
className={algorithm === selectedAlgorithm ? "selected" : ""}
33+
className={algorithm === selectedAlgorithm ? 'selected' : ''}
3734
>
3835
{capitalizeFirstLetter(algorithm)} Sort
3936
</li>

0 commit comments

Comments
 (0)