Skip to content

Commit 5c02424

Browse files
bkrmadtyabkrmadtya
authored
Merge pull request #8 from bkrmadtya/feat/responsive-styling
feat: responsive styling
2 parents 47c4160 + b9e4dbb commit 5c02424

File tree

24 files changed

+430
-230
lines changed

24 files changed

+430
-230
lines changed

‎docs/visualization.gif‎

1.98 MB
Loading

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" href="public/favicon.gif" type="image/gif" />
5+
<link rel="icon" href="favicon.gif" type="image/gif" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<meta
88
name="og:title"

‎src/components/Home/Bar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import { BarStatus } from '@/utils'
55
interface IProps {
66
value: number
77
status: BarStatus
8+
isMobileScreen: boolean
89
}
910

10-
const Bar: FC<IProps> = ({ value, status }: IProps) => {
11+
const Bar: FC<IProps> = ({ value, status, isMobileScreen }: IProps) => {
1112
const barStyle = {
12-
height: value * 2,
13+
height: value * (isMobileScreen ? 1.5 : 2),
1314
backgroundColor: `var(--${status})`
1415
}
1516
return <div className='bar' style={barStyle} />

‎src/components/Home/BarContainer.tsx‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC } from 'react'
1+
import { FC, useEffect, useState } from 'react'
22

33
import { Bar } from '@/utils'
44

@@ -8,10 +8,30 @@ interface IProps {
88
}
99

1010
const BarContainer: FC<IProps> = ({ step }: IProps) => {
11+
const [isMobileScreen, setIsMobileScreen] = useState<boolean>(true)
12+
13+
useEffect(() => {
14+
const resizeCallback = () => {
15+
const isMobile = window.innerWidth < 768
16+
setIsMobileScreen(isMobile)
17+
}
18+
19+
resizeCallback()
20+
window.addEventListener('resize', resizeCallback)
21+
return () => {
22+
window.removeEventListener('resize', resizeCallback)
23+
}
24+
}, [])
25+
1126
return (
1227
<div className='barContainer'>
1328
{step.map(a => (
14-
<BarComponent key={a.value} value={a.value} status={a.status} />
29+
<BarComponent
30+
key={a.value}
31+
value={a.value}
32+
status={a.status}
33+
isMobileScreen={isMobileScreen}
34+
/>
1535
))}
1636
</div>
1737
)

‎src/components/Home/Legend.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,9 @@ const Legend: FC<{ type: BarStatus }> = ({ type }) => {
77
<div className='legend'>
88
<div
99
className='legend__color'
10-
style={{
11-
backgroundColor: `var(--${type})`
12-
}}
13-
></div>
14-
<div className='legend__text'>
15-
<strong>{type}</strong>
16-
</div>
10+
style={{ backgroundColor: `var(--${type})` }}
11+
/>
12+
<strong>{type}</strong>
1713
</div>
1814
)
1915
}

‎src/components/Home/OptionContainer.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FC, ReactEventHandler, useCallback, useMemo } from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
3+
import { ActionCreatorWithPayload } from '@reduxjs/toolkit/dist/createAction'
34

45
import {
56
changeAlgorithm,
@@ -9,11 +10,12 @@ import {
910
} from '@/store/slice/sorting'
1011
import { RootState } from '@/store'
1112

12-
import { Header, Dropdown } from '@/components/shared'
13+
import { Dropdown } from '@/components/shared'
1314

1415
const SizeOption = 'Size'
1516
const AlgorithmOption = 'Algorithm'
16-
const ModeOption = 'Color mode'
17+
const ModeOption = 'Color Mode'
18+
const SpeedOption = 'Speed'
1719

1820
const getMenuOptions = (allAlgorithms: string[]) => [
1921
{
@@ -38,7 +40,7 @@ const getMenuOptions = (allAlgorithms: string[]) => [
3840
]
3941
},
4042
{
41-
name: 'Speed',
43+
name: SpeedOption,
4244
value: [
4345
{
4446
key: '1x',
@@ -58,34 +60,34 @@ const getMenuOptions = (allAlgorithms: string[]) => [
5860
name: ModeOption,
5961
value: [
6062
{
61-
key: 'True',
63+
key: 'On',
6264
value: true.toString()
6365
},
6466
{
65-
key: 'False',
67+
key: 'Off',
6668
value: false.toString()
6769
}
6870
]
6971
}
7072
]
7173

74+
const OptionHandlerMap: {
75+
[key: string]: ActionCreatorWithPayload<any, string>
76+
} = {
77+
[SizeOption]: changeArraySize,
78+
[AlgorithmOption]: changeAlgorithm,
79+
[ModeOption]: changeColorMode,
80+
[SpeedOption]: changeAnimationSpeed
81+
}
82+
7283
const OptionContainer: FC = () => {
7384
const { allAlgorithms } = useSelector((state: RootState) => state.sorting)
7485
const dispatch = useDispatch()
7586

7687
const handleChangeEvent: ReactEventHandler<HTMLSelectElement> = useCallback(
7788
event => {
7889
const { name, value } = event.currentTarget
79-
if (name === SizeOption) {
80-
dispatch(changeArraySize(value))
81-
} else if (name === AlgorithmOption) {
82-
dispatch(changeAlgorithm(value))
83-
} else if (name === ModeOption) {
84-
// console.log(value)
85-
dispatch(changeColorMode(value))
86-
} else {
87-
dispatch(changeAnimationSpeed(value))
88-
}
90+
dispatch(OptionHandlerMap[name](value))
8991
},
9092
[dispatch]
9193
)
@@ -97,16 +99,13 @@ const OptionContainer: FC = () => {
9799
return useMemo(() => {
98100
return (
99101
<div className='optionContainer'>
100-
{options.map(op => (
101-
<Header className='panelHeader' key={op.name}>
102-
<span>{op.name}: </span>
103-
<Dropdown
104-
name={op.name}
105-
options={op.value}
106-
onChange={handleChangeEvent}
107-
value={op.value[1].value}
108-
/>
109-
</Header>
102+
{options.map(({ name, value }) => (
103+
<Dropdown
104+
name={name}
105+
options={value}
106+
onChange={handleChangeEvent}
107+
value={value[1].value}
108+
/>
110109
))}
111110
</div>
112111
)

‎src/components/shared/Dropdown/index.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,22 @@ type IProps = {
1212

1313
const Dropdown: FC<IProps> = ({ name, options, onChange, value }) => {
1414
return (
15-
<select
16-
name={name}
17-
className='dropdown'
18-
onChange={onChange}
19-
defaultValue={value}
20-
>
21-
{options.map(({ key, value }) => (
22-
<option key={key} value={value}>
23-
{key}
24-
</option>
25-
))}
26-
</select>
15+
<div className='dropdown'>
16+
<label className='dropdown__label'>{name}:</label>
17+
<select
18+
className='dropdown__select'
19+
defaultValue={value}
20+
data-name={name}
21+
name={name}
22+
onChange={onChange}
23+
>
24+
{options.map(({ key, value }) => (
25+
<option key={key} value={value}>
26+
{key}
27+
</option>
28+
))}
29+
</select>
30+
</div>
2731
)
2832
}
2933

‎src/components/shared/NavBar/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const NavBar: FC<IProps> = ({ children }) => {
1111
return (
1212
<div className='navbar'>
1313
<Header className='navbar__header'>
14-
<Link to='/'>SORTING ALGORITHM VISUALIZER</Link>
14+
<Link to='/'>
15+
SORTING ALGORITHM <br /> VISUALIZER
16+
</Link>
1517
</Header>
1618
<div className='navbar__content'>{children}</div>
1719
</div>

‎src/hooks/useSort.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { RootState } from '@/store'
66
import {
77
goToNextStep,
88
goToPreviousStep,
9-
resetSorting
9+
resetSorting,
10+
getSortingStatus
1011
} from '@/store/slice/sorting'
1112

1213
type IState = number[]
@@ -24,6 +25,7 @@ const useSort = (): {
2425
const { animationSpeed, currentStep, steps, arraySize } = useSelector(
2526
(state: RootState) => state.sorting
2627
)
28+
const status = useSelector(getSortingStatus)
2729
const dispatch = useDispatch()
2830

2931
const pause = (): void => {
@@ -33,14 +35,18 @@ const useSort = (): {
3335

3436
useEffect(() => {
3537
pause()
36-
return pause
38+
return () => {
39+
pause
40+
}
3741
}, [steps, arraySize])
3842

3943
useEffect(() => {
40-
if (currentStep > 0) {
44+
if (status === 'SORTING') {
4145
sort()
4246
}
43-
return sort
47+
return () => {
48+
sort
49+
}
4450
}, [animationSpeed])
4551

4652
const sort = (): void => {

‎src/pages/About/index.tsx‎

Lines changed: 50 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,58 @@
11
import { FC } from 'react'
22

3+
const githubURL = 'https://github.com/bkrmadtya/sorting-algorithm-visualizer'
4+
const thesisURL = 'https://www.theseus.fi/handle/10024/507342'
35
const About: FC = () => {
4-
const url = 'https://github.com/bkrmadtya/sorting-algorithm-visualizer'
56
return (
67
<div className='aboutPage'>
7-
<div>
8-
<section>
9-
<h1 className='header'>About the project</h1>
10-
<p className='description'>
11-
This is project is part of the thesis project done for my Bachelor
12-
thesis in Helsinki Metropolia University of Applied Sciences. The
13-
thesis aims to visualize sorting process of different sorting
14-
algorithms and observe how visualization assists in understanding
15-
different ideas, in this case, sorting algorithms. This is project
16-
is part of the thesis project done for my Bachelor thesis in
17-
Helsinki Metropolia University of Applied Sciences. The thesis aims
18-
to visualize sorting process of different sorting algorithms and
19-
observe how visualization assists in understanding different ideas,
20-
in this case, sorting algorithms.
21-
</p>
22-
<table className='details-table'>
23-
<tr>
24-
<td>Tech stack</td>
25-
<td>
26-
<ul>
27-
<li>React</li>
28-
<li>TypeScript</li>
29-
<li>Redux</li>
30-
<li>React-Router</li>
31-
<li>SASS</li>
32-
<li>Webpack</li>
33-
<li>Babel</li>
34-
<li>Eslint</li>
35-
</ul>
36-
</td>
37-
</tr>
38-
<tr>
39-
<td>Github link</td>
40-
<td>
41-
<a className='link' href={url}>
42-
{url}
43-
</a>
44-
</td>
45-
</tr>
46-
</table>
47-
</section>
48-
</div>
8+
<section>
9+
<h1 className='aboutPage__header'>About the project</h1>
10+
<p className='aboutPage__description'>
11+
This is project is part of the thesis project done for my Bachelor
12+
thesis in Helsinki Metropolia University of Applied Sciences. The
13+
thesis aims to visualize sorting process of different sorting
14+
algorithms and observe how visualization assists in understanding
15+
different ideas, in this case, sorting algorithms. This is project is
16+
part of the thesis project done for my Bachelor thesis in Helsinki
17+
Metropolia University of Applied Sciences. The thesis aims to
18+
visualize sorting process of different sorting algorithms and observe
19+
how visualization assists in understanding different ideas, in this
20+
case, sorting algorithms.
21+
</p>
22+
<table className='aboutPage__details'>
23+
<tr>
24+
<td>Tech stack</td>
25+
<td>
26+
<ul>
27+
<li>React</li>
28+
<li>TypeScript</li>
29+
<li>Redux</li>
30+
<li>React-Router</li>
31+
<li>SASS</li>
32+
<li>Vite</li>
33+
<li>Eslint</li>
34+
</ul>
35+
</td>
36+
</tr>
37+
<tr>
38+
<td>Github link</td>
39+
<td>
40+
<a className='aboutPage__details-link' href={githubURL}>
41+
{githubURL}
42+
</a>
43+
</td>
44+
</tr>
45+
<tr>
46+
<td>Thesis link</td>
47+
<td>
48+
<a className='aboutPage__details-link' href={thesisURL}>
49+
{thesisURL}
50+
</a>
51+
</td>
52+
</tr>
53+
</table>
54+
</section>
55+
<footer className='aboutPage__footer'>@bkrmadtya 2021, 2022</footer>
4956
</div>
5057
)
5158
}

0 commit comments

Comments
 (0)