feat: adds undo/redo functionality

src/index.html

@@ -39,6 +39,12 @@
       <button id="pause">
         <img src="./icons/square-pause-svgrepo-com.svg" alt="pause" />
       </button>
+      <button id="redo">
+        <img src="./icons/square-arrow-right-svgrepo-com.svg" alt="redo" />
+      </button>
+      <button id="undo">
+        <img src="./icons/square-arrow-left-svgrepo-com.svg" alt="undo" />
+      </button>
     </div>
     <script type="module" src="ts/index.ts"></script>
   </body>

src/modules/handleClickableElement.ts

@@ -5,13 +5,7 @@ import { recordColorChange } from './recordColorChange';
 import { resetTimer, setStopRewind } from './rewindColors';
 import { scrollThroughSteps } from './scrollThroughSteps';
 
-export type StepType = {
-  target: string;
-  color: string;
-};
-
 let isScroll = false;
-export const steps: StepType[] = [];
 
 type ClickableElement = HTMLElement & { id: string };
 

src/modules/handleMenuButtons.ts

@@ -1,5 +1,9 @@
 import { addRippleEffect } from './addRippleEffect';
-import { setPauseRewind } from './rewindColors';
+import {
+  redoColorChange,
+  setPauseRewind,
+  undoColorChange,
+} from './rewindColors';
 
 export const handleMenuButtons = (): void => {
   document.querySelectorAll('button').forEach((button) => {
@@ -11,6 +15,12 @@ export const handleMenuButtons = (): void => {
         button.classList.toggle('active');
         setPauseRewind();
       }
+      if (button.id === 'redo') {
+        redoColorChange();
+      }
+      if (button.id === 'undo') {
+        undoColorChange();
+      }
     });
   });
 };

src/modules/recordColorChange.ts

@@ -1,4 +1,4 @@
-import { type StepType, steps } from './handleClickableElement';
+import { type StepType, steps, updateStepIndex } from './rewindColors';
 
 const pushStep = (step: StepType): void => {
   steps.push(step);
@@ -11,12 +11,14 @@ export const recordColorChange = (target: Element): void => {
       target: target.id,
       color: computedStyle.backgroundColor,
     });
+    updateStepIndex();
   }
   if (target instanceof SVGElement) {
     const computedStyle = window.getComputedStyle(target);
     pushStep({
       target: target.id,
       color: computedStyle.fill,
     });
+    updateStepIndex();
   }
 };

src/modules/rewindColors.ts

@@ -1,6 +1,13 @@
-import { steps } from './handleClickableElement';
 import { applyColorFromStep } from './applyColorFromStep';
 
+export type StepType = {
+  target: string;
+  color: string;
+};
+
+export const steps: StepType[] = [];
+let stepIndex = steps.length - 1;
+
 const DELAY = 1000;
 const TIMEOUT = 5000;
 
@@ -10,6 +17,22 @@ let stopRewind = true;
 let pauseRewind = false;
 let initialDelay: number;
 
+export const updateStepIndex = (): void => {
+  stepIndex = stepIndex + 1;
+};
+
+export const undoColorChange = (): void => {
+  if (stepIndex < 0) return;
+  applyColorFromStep(steps[stepIndex]);
+  stepIndex = stepIndex - 1;
+};
+
+export const redoColorChange = (): void => {
+  if (stepIndex > steps.length - 1) return;
+  applyColorFromStep(steps[stepIndex]);
+  stepIndex = stepIndex + 1;
+};
+
 const rewind = (): void => {
   const removeStep = (): void => {
     if (stopRewind || pauseRewind) return;

src/modules/scrollThroughSteps.ts

@@ -1,5 +1,5 @@
 import { applyColorFromStep } from './applyColorFromStep';
-import { steps } from './handleClickableElement';
+import { steps } from './rewindColors';
 
 let scrollIndex = 0;