Change hardcoded colors usage to use Geist UI's palette

Author: danilhendrasr

algorithms-helper/bubble-sort.ts

@@ -1,4 +1,4 @@
-import { ACTIVE_BAR_COLOR, INACTIVE_BAR_COLOR } from "../constants"
+import { AnimateFunctionParams } from "../types"
 import {
   changeBarsColor,
   getAllBars,
@@ -42,11 +42,8 @@ const bubbleSort = (array: number[]) => {
   return animaSeq
 }
 
-export const animateBubbleSort = (
-  barHeights: number[],
-  sortingSpeed: number,
-  callback?: () => void
-) => {
+export const animateBubbleSort = (params: AnimateFunctionParams) => {
+  const { barHeights, palette, sortingSpeed, callback } = params
   const animationSequence = bubbleSort(barHeights)
   const bars = getAllBars()
 
@@ -57,25 +54,25 @@ export const animateBubbleSort = (
       if (!isFirstIteration) {
         const [prevFirstBarIdx, prevSecondBarIdx] = animationSequence[iteration - 1]
 
-        changeBarsColor(
-          [bars[prevFirstBarIdx], bars[prevSecondBarIdx]],
-          INACTIVE_BAR_COLOR
-        )
+        changeBarsColor([bars[prevFirstBarIdx], bars[prevSecondBarIdx]], palette.inactive)
       }
 
       const activeBarHeights = [
         getNumberFromHeightString(bars[firstBarIdx].style.height),
         getNumberFromHeightString(bars[secondBarIdx].style.height),
       ]
 
-      makeBarsActive([
-        { element: bars[firstBarIdx], height: activeBarHeights[1] },
-        { element: bars[secondBarIdx], height: activeBarHeights[0] },
-      ])
+      makeBarsActive(
+        [
+          { element: bars[firstBarIdx], height: activeBarHeights[1] },
+          { element: bars[secondBarIdx], height: activeBarHeights[0] },
+        ],
+        palette.active
+      )
 
       const isLastIteration = iteration === animationSequence.length - 1
       if (isLastIteration && callback) {
-        postSortAnimation(bars, ACTIVE_BAR_COLOR)
+        postSortAnimation(bars, palette.active)
         callback()
       }
     }, iteration * sortingSpeed)

algorithms-helper/insertion-sort.ts

@@ -1,4 +1,4 @@
-import { INACTIVE_BAR_COLOR, ACTIVE_BAR_COLOR } from "../constants"
+import { AnimateFunctionParams } from "../types"
 import { getAllBars, changeBarsColor, makeBarsActive, postSortAnimation } from "../utils"
 
 interface InsertionAnimationSequence {
@@ -52,11 +52,8 @@ const insertionSort = (arrayToSort: number[]): InsertionAnimationSequence[] => {
   return animaSeq
 }
 
-export const animateInsertionSort = (
-  barHeights: number[],
-  sortingSpeed: number,
-  callback?: () => void
-) => {
+export const animateInsertionSort = (params: AnimateFunctionParams) => {
+  const { barHeights, palette, sortingSpeed, callback } = params
   const animationSequence = insertionSort(barHeights)
   const bars = getAllBars()
 
@@ -73,11 +70,14 @@ export const animateInsertionSort = (
 
     setTimeout(() => {
       if (!isFirstIteration) {
-        changeBarsColor(bars[animationSequence[i - 1].idx], INACTIVE_BAR_COLOR)
+        changeBarsColor(bars[animationSequence[i - 1].idx], palette.inactive)
       }
 
       prevIdxBarHeights.push(bars[idxToInsertTo].style.height)
-      makeBarsActive([{ element: bars[idxToInsertTo], height: barHeights[barToMove] }])
+      makeBarsActive(
+        [{ element: bars[idxToInsertTo], height: barHeights[barToMove] }],
+        palette.active
+      )
     }, i * sortingSpeed)
 
     for (let x = 1; x <= rightShift; x++) {
@@ -87,8 +87,8 @@ export const animateInsertionSort = (
 
         const isLastInnerIteration = x === rightShift
         if (isLastInnerIteration && isLastIteration) {
-          changeBarsColor(bars[idxToInsertTo], INACTIVE_BAR_COLOR)
-          postSortAnimation(bars, ACTIVE_BAR_COLOR)
+          changeBarsColor(bars[idxToInsertTo], palette.inactive)
+          postSortAnimation(bars, palette.active)
           if (callback) callback()
         }
       }, i * sortingSpeed)

algorithms-helper/selection-sort.ts

@@ -1,5 +1,4 @@
-import { INACTIVE_BAR_COLOR, ACTIVE_BAR_COLOR } from "../constants"
-import { ActiveBar } from "../types"
+import { ActiveBar, AnimateFunctionParams } from "../types"
 import { changeBarsColor, getAllBars, makeBarsActive, postSortAnimation } from "../utils"
 
 const selectionSort = (inputArray: number[]) => {
@@ -44,11 +43,8 @@ const selectionSort = (inputArray: number[]) => {
   return [arrayState, animationSequence]
 }
 
-export const animateSelectionSort = (
-  barHeights: number[],
-  sortingSpeed: number,
-  callback?: () => void
-) => {
+export const animateSelectionSort = (params: AnimateFunctionParams) => {
+  const { barHeights, palette, sortingSpeed, callback } = params
   const [arrayStates, animationSequence] = selectionSort(barHeights)
   const bars = getAllBars()
 
@@ -81,23 +77,23 @@ export const animateSelectionSort = (
         let prevAnimationSequence = animationSequence[i - 1]
         let [prevBar1Idx, prevBar2Idx] = prevAnimationSequence
         let previousActiveBars = [bars[prevBar1Idx], bars[prevBar2Idx]]
-        changeBarsColor(previousActiveBars, INACTIVE_BAR_COLOR)
+        changeBarsColor(previousActiveBars, palette.inactive)
       }
 
-      makeBarsActive(barsToActiveBars)
+      makeBarsActive(barsToActiveBars, palette.active)
 
       if (lastIteration) {
         // Revert the last bar to an inactive bar
         setTimeout(() => {
           let lastBar = activeBar1
-          changeBarsColor(lastBar, INACTIVE_BAR_COLOR)
+          changeBarsColor(lastBar, palette.inactive)
 
           // Because this animate function executes asynchronous function (setTimeout)
           // if we wanted to do something right after this function is done running,
           // we have to put the code inside the last setTimeout.
           // Otherwise, the code will get executed without waiting for the setTimeouts
           // to get executed.
-          postSortAnimation(bars, ACTIVE_BAR_COLOR)
+          postSortAnimation(bars, palette.active)
           if (callback) callback()
         }, sortingSpeed)
       }

constants.ts

@@ -1,7 +1,5 @@
 import { SortingAlgorithms, SortingSpeeds } from "./types"
 
-export const ACTIVE_BAR_COLOR = "#111"
-export const INACTIVE_BAR_COLOR = "#ff1a1a"
 export const ALGORITHMS_LIST: SortingAlgorithms[] = ["Selection", "Insertion", "Bubble"]
 export const sortingSpeedTable: SortingSpeeds = {
   slow: 160,

pages/index.tsx

@@ -14,8 +14,8 @@ import {
   SortButton,
   SpeedControl,
 } from "../components"
-import { Spacer } from "@geist-ui/react"
-import { INACTIVE_BAR_COLOR, sortingSpeedTable } from "../constants"
+import { Spacer, useTheme } from "@geist-ui/react"
+import { sortingSpeedTable } from "../constants"
 import { SortingAlgorithms, SortingSpeeds, SortingState } from "../types"
 import { default as Head } from "next/head"
 import { AppStateContext } from "../contexts/app-state"
@@ -33,6 +33,12 @@ const getBarElementsFromBarHeights = (barHeights: number[]) => {
 }
 
 const Home: React.FC = () => {
+  const { palette: geistUIPalette } = useTheme()
+  const palette = {
+    active: geistUIPalette.foreground,
+    inactive: geistUIPalette.errorLight,
+  }
+
   const [barHeights, setBarHeights] = useState<number[]>([])
   const [sortingState, setSortingState] = useState<SortingState>("Sort")
   const [arrayLength, setArrayLength] = useState(70)
@@ -50,17 +56,18 @@ const Home: React.FC = () => {
     setSortingState("Sort")
     requestAnimationFrame(() => {
       const barsDomEl = getAllBars()
-      if (barsDomEl[5].style.backgroundColor === "rgb(17, 17, 17)") {
-        changeBarsColor(barsDomEl, INACTIVE_BAR_COLOR)
+      if (barsDomEl[5].style.backgroundColor === "rgb(0, 0, 0)") {
+        changeBarsColor(barsDomEl, palette.inactive)
       }
     })
   }
 
   function triggerAnimation() {
     setSortingState("Sorting")
     startAnimation({
-      sortingAlgorithm: selectedAlgorithm,
       barHeights,
+      palette,
+      sortingAlgorithm: selectedAlgorithm,
       sortingSpeed: sortingSpeedTable[sortingSpeed],
       callback: () => setSortingState("Sorted"),
     })

types.ts

@@ -6,3 +6,9 @@ export interface SortingSpeeds {
   normal: number
   fast: number
 }
+export interface AnimateFunctionParams {
+  barHeights: number[]
+  palette: { active: string; inactive: string }
+  sortingSpeed: number
+  callback?: () => void
+}

utils/index.ts

@@ -1,8 +1,7 @@
 import { animateBubbleSort } from "../algorithms-helper/bubble-sort"
 import { animateInsertionSort } from "../algorithms-helper/insertion-sort"
 import { animateSelectionSort } from "../algorithms-helper/selection-sort"
-import { ACTIVE_BAR_COLOR } from "../constants"
-import { ActiveBar, SortingAlgorithms, SortingSpeeds } from "../types"
+import { ActiveBar, SortingAlgorithms } from "../types"
 
 export const generateARandomNumber = (min: number, max: number) => {
   min = Math.ceil(min)
@@ -47,9 +46,9 @@ export const changeBarsColor = (
   }
 }
 
-export const makeBarsActive = (bars: ActiveBar[]) => {
+export const makeBarsActive = (bars: ActiveBar[], activeBarColor: string) => {
   for (const bar of bars) {
-    changeBarsColor(bar.element, ACTIVE_BAR_COLOR)
+    changeBarsColor(bar.element, activeBarColor)
     bar.element.style.height = `${bar.height}%`
   }
 }
@@ -82,23 +81,30 @@ export const getNumberFromHeightString = (height: string) => {
 
 interface StartAnimationParams {
   barHeights: number[]
+  palette: { active: string; inactive: string }
   sortingAlgorithm: SortingAlgorithms
   sortingSpeed: number
   callback?: () => void
 }
 
 export const startAnimation = (params: StartAnimationParams) => {
-  const { barHeights, sortingAlgorithm, sortingSpeed, callback } = params
+  const { barHeights, palette, sortingAlgorithm, sortingSpeed, callback } = params
+  const animationParams = {
+    barHeights,
+    palette,
+    sortingSpeed,
+    callback,
+  }
 
   switch (sortingAlgorithm) {
     case "Selection":
-      animateSelectionSort(barHeights, sortingSpeed, callback)
+      animateSelectionSort(animationParams)
       break
     case "Insertion":
-      animateInsertionSort(barHeights, sortingSpeed, callback)
+      animateInsertionSort(animationParams)
       break
     case "Bubble":
-      animateBubbleSort(barHeights, sortingSpeed, callback)
+      animateBubbleSort(animationParams)
       break
   }
 }