add background color for LevelButton when is in progress

Author: odrail

src/components/LevelSelection/components/LevelButton.jsx

@@ -1,17 +1,19 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import Queen from "../../../components/Queen";
-import { isLevelCompleted } from "../../../utils/localStorage";
+import { isLevelCompleted, isLevelInProgress } from "../../../utils/localStorage";
 
 const LevelButton = ({ level, disabled }) => {
-  const completed = isLevelCompleted(level);
+  const completed = useMemo(() => isLevelCompleted(level), [level]);
+  const inProgress = useMemo(() => isLevelInProgress(level), [level]);
 
   return (
     <Link to={`/level/${level}`} key={level}>
       <button
-        className={`relative rounded p-2 w-full text-white bg-[#F96C51] ${
+        className={`relative rounded p-2 w-full text-white ${
           disabled ? "opacity-75" : ""
         }`}
+        style={{ backgroundColor: inProgress ? "red" : "#F96C51" }}
       >
         {level}
         {completed && (

src/utils/localStorage.js

@@ -87,6 +87,11 @@ export const isLevelCompleted = (levelNumber) => {
   return storedLevels[levelNumber]?.completed;
 };
 
+export const isLevelInProgress = (levelNumber) => {
+  const storedLevels = getStoredLevels();
+  return storedLevels[levelNumber]?.completed === false && storedLevels[levelNumber]?.time > 0;
+}
+
 export const resetCompletedLevels = () => {
   storeLevels(JSON.stringify(LOCAL_STORAGE.completedLevels.defaultValue));
 };