Merge pull request #8 from danilhendrasr/refine-ui

Refined UI

Author: danilhendrasr

algorithms-helper/bubble-sort.ts

@@ -1,4 +1,4 @@
-import { ACTIVE_BAR_COLOR, INACTIVE_BAR_COLOR, SORTING_SPEED } from "../constants"
+import { ACTIVE_BAR_COLOR, INACTIVE_BAR_COLOR } from "../constants"
 import {
   changeBarsColor,
   getAllBars,
@@ -42,7 +42,11 @@ const bubbleSort = (array: number[]): [number, number][] => {
   return animaSeq
 }
 
-export const animateBubbleSort = (barHeights: number[], callback?: () => void): void => {
+export const animateBubbleSort = (
+  barHeights: number[],
+  sortingSpeed: number,
+  callback?: () => void
+): void => {
   const animationSequence = bubbleSort(barHeights)
   const bars = getAllBars()
 
@@ -74,6 +78,6 @@ export const animateBubbleSort = (barHeights: number[], callback?: () => void):
         postSortAnimation(bars, ACTIVE_BAR_COLOR)
         callback()
       }
-    }, iteration * SORTING_SPEED)
+    }, iteration * sortingSpeed)
   })
 }

algorithms-helper/insertion-sort.ts

@@ -1,4 +1,4 @@
-import { INACTIVE_BAR_COLOR, SORTING_SPEED, ACTIVE_BAR_COLOR } from "../constants"
+import { INACTIVE_BAR_COLOR, ACTIVE_BAR_COLOR } from "../constants"
 import { getAllBars, changeBarsColor, makeBarsActive, postSortAnimation } from "../utils"
 
 interface InsertionAnimationSequence {
@@ -54,6 +54,7 @@ const insertionSort = (arrayToSort: number[]): InsertionAnimationSequence[] => {
 
 export const animateInsertionSort = (
   barHeights: number[],
+  sortingSpeed: number,
   callback?: () => void
 ): void => {
   const animationSequence = insertionSort(barHeights)
@@ -77,7 +78,7 @@ export const animateInsertionSort = (
 
       prevIdxBarHeights.push(bars[idxToInsertTo].style.height)
       makeBarsActive([{ element: bars[idxToInsertTo], height: barHeights[barToMove] }])
-    }, i * SORTING_SPEED)
+    }, i * sortingSpeed)
 
     for (let x = 1; x <= rightShift; x++) {
       setTimeout(() => {
@@ -90,7 +91,7 @@ export const animateInsertionSort = (
           postSortAnimation(bars, ACTIVE_BAR_COLOR)
           if (callback) callback()
         }
-      }, i * SORTING_SPEED)
+      }, i * sortingSpeed)
     }
   }
 }

algorithms-helper/selection-sort.ts

@@ -46,6 +46,7 @@ const selectionSort = (inputArray: number[]): [number[][], [number, number][]] =
 
 export const animateSelectionSort = (
   barHeights: number[],
+  sortingSpeed: number,
   callback?: () => void
 ): void => {
   const [arrayStates, animationSequence] = selectionSort(barHeights)
@@ -98,8 +99,8 @@ export const animateSelectionSort = (
           // to get executed.
           postSortAnimation(bars, ACTIVE_BAR_COLOR)
           if (callback) callback()
-        }, SORTING_SPEED)
+        }, sortingSpeed)
       }
-    }, i * SORTING_SPEED)
+    }, i * sortingSpeed)
   }
 }

components/AlgorithmSelector.tsx

@@ -1,13 +1,18 @@
-import { Select } from "@geist-ui/react"
+import { Select, Text, Spacer } from "@geist-ui/react"
 import { SortingAlgorithms } from "../types"
 
+// @ts-ignore
+import styles from "../styles/Home.module.scss"
+
 const algorithms: SortingAlgorithms[] = ["Selection", "Insertion", "Bubble"]
 
-export const AlgorithmSelector: React.FC<{
+interface Props {
   disabled: boolean
   selectedAlgorithm: string | string[]
   onChangeHandler: (algorithm: string | string[]) => void
-}> = (props) => {
+}
+
+export const AlgorithmSelector: React.FC<Props> = (props) => {
   let { disabled, selectedAlgorithm, onChangeHandler } = props
 
   const selectOptions = algorithms.map((algorithm, idx) => (
@@ -17,11 +22,16 @@ export const AlgorithmSelector: React.FC<{
   ))
 
   return (
-    <Select
-      disabled={disabled}
-      onChange={(algorithm) => onChangeHandler(algorithm)}
-      initialValue={selectedAlgorithm}>
-      {selectOptions}
-    </Select>
+    <div className={styles.sideBarInputContainer}>
+      <Text>Select Algorithm</Text>
+      <Spacer y={-0.4} />
+      <Select
+        disabled={disabled}
+        value={selectedAlgorithm}
+        onChange={(algorithm) => onChangeHandler(algorithm)}
+        size="large">
+        {selectOptions}
+      </Select>
+    </div>
   )
 }

components/AppTitle.tsx

@@ -0,0 +1,12 @@
+import { Text } from "@geist-ui/react"
+
+// @ts-ignore
+import styles from "../styles/Home.module.scss"
+
+export const AppTitle: React.FC = () => {
+  return (
+    <Text h1 size="2em" className={styles.textCenter}>
+      Sorting Algorithms Visualizer
+    </Text>
+  )
+}

components/ArrayLengthModifier.tsx

@@ -0,0 +1,29 @@
+import { Text, Slider } from "@geist-ui/react"
+
+// @ts-ignore
+import styles from "../styles/Home.module.scss"
+
+interface Props {
+  disabled: boolean
+  value: number
+  onChange: (value: number) => void
+}
+
+export const ArrayLengthModifier: React.FC<Props> = (props): JSX.Element => {
+  const { disabled, value, onChange } = props
+
+  return (
+    <div className={styles.sideBarInputContainer}>
+      <Text>Length of array</Text>
+      <Slider
+        disabled={disabled}
+        max={100}
+        min={10}
+        onChange={onChange}
+        showMarkers
+        step={10}
+        value={value}
+      />
+    </div>
+  )
+}

components/Bar.tsx

@@ -2,18 +2,19 @@ import { useTheme } from "@geist-ui/react"
 
 export const Bar: React.FC<{
   height: number
-  elRef: (element: HTMLDivElement) => void
+  width: number
 }> = (props) => {
-  const { height, elRef } = props
+  const { height, width } = props
 
   const { palette } = useTheme()
 
   const barStylings: React.CSSProperties = {
     height: `${height}%`,
     backgroundColor: palette.errorLight,
-    width: "5px",
-    marginRight: 5,
+    width: width,
+    borderTopLeftRadius: 5,
+    borderTopRightRadius: 5,
   }
 
-  return <div className="bar" style={barStylings} ref={elRef}></div>
+  return <div className="bar" style={barStylings}></div>
 }

components/ChartWrapper.tsx

@@ -0,0 +1,7 @@
+import { Text } from "@geist-ui/react"
+
+export const Footer: React.FC = () => {
+  return (
+    <Text size=".7em">&copy; {new Date().getFullYear()} - Danil Hendra Suryawan</Text>
+  )
+}

components/Footer.tsx

@@ -0,0 +1,15 @@
+import { Github } from "@geist-ui/react-icons"
+
+// @ts-ignore
+import styles from "../styles/Home.module.scss"
+
+export const LinkToRepo: React.FC = (props) => {
+  return (
+    <a
+      className={styles.githubIconWrapper}
+      href="https://github.com/danilhendrasr/sorting-visualizer"
+      target="_blank">
+      <Github size={20} color="#000" />
+    </a>
+  )
+}