Implement hex to rgb utility function

Author: danilhendrasr

pages/index.tsx

@@ -2,7 +2,13 @@
 import styles from "../styles/Home.module.scss"
 
 import React, { useEffect, useState } from "react"
-import { changeBarsColor, generateBarHeights, getAllBars, startAnimation } from "../utils"
+import {
+  changeBarsColor,
+  generateBarHeights,
+  getAllBars,
+  hexToRgb,
+  startAnimation,
+} from "../utils"
 import {
   AppTitle,
   AlgorithmSelector,
@@ -56,7 +62,8 @@ const Home: React.FC = () => {
     setSortingState("Sort")
     requestAnimationFrame(() => {
       const barsDomEl = getAllBars()
-      if (barsDomEl[5].style.backgroundColor === "rgb(0, 0, 0)") {
+      const sampleBg = barsDomEl[5].style.backgroundColor
+      if (sampleBg === hexToRgb(palette.active)) {
         changeBarsColor(barsDomEl, palette.inactive)
       }
     })

utils/index.ts

@@ -108,3 +108,19 @@ export const startAnimation = (params: StartAnimationParams) => {
       break
   }
 }
+
+export const hexToRgb = (hex: string) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+    return r + r + g + g + b + b
+  })
+
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  const rgb = {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  }
+
+  return result ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : null
+}