feat: adds pause button

src/css/style.css

@@ -31,6 +31,7 @@ body {
   width: 300px;
   height: 300px;
   background-color: rgb(53, 45, 106);
+  transform: translateX(30px);
 }
 
 svg {
@@ -125,3 +126,62 @@ path {
   transform: translate(-45px, -45px);
   background-color: yellow;
 }
+
+button {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 4px;
+  border: none;
+  background-color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+button:hover {
+  background-color: rgb(242, 242, 242);
+}
+
+img {
+  height: 25px;
+  width: 25px;
+}
+
+#menu {
+  display: flex;
+  flex-direction: column;
+  transform: translate(40px, -150px);
+}
+
+button span {
+  position: absolute;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.2);
+  width: 40px;
+  height: 40px;
+  animation: ripple 1s;
+  opacity: 0;
+}
+
+@keyframes ripple {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(10);
+  }
+}
+
+.active {
+  background-color: rgb(236, 236, 236);
+}
+
+.active:hover {
+  background-color: rgb(226, 226, 226);
+}

src/index.html

@@ -35,6 +35,11 @@
         </div>
       </div>
     </div>
+    <div id="menu">
+      <button id="pause">
+        <img src="./icons/square-pause-svgrepo-com.svg" alt="pause" />
+      </button>
+    </div>
     <script type="module" src="ts/index.ts"></script>
   </body>
 </html>

src/modules/addRippleEffect.ts

@@ -0,0 +1,8 @@
+export const addRippleEffect = (button: HTMLButtonElement): void => {
+  const ripple = document.createElement('span');
+  ripple.classList.add('ripple');
+  button.appendChild(ripple);
+  setTimeout(() => {
+    ripple.remove();
+  }, 600);
+};

src/modules/handleMenuButtons.ts

@@ -0,0 +1,16 @@
+import { addRippleEffect } from './addRippleEffect';
+import { setPauseRewind } from './rewindColors';
+
+export const handleMenuButtons = (): void => {
+  document.querySelectorAll('button').forEach((button) => {
+    button.addEventListener('click', (evt) => {
+      const button = evt.currentTarget as HTMLButtonElement;
+      addRippleEffect(button);
+
+      if (button.id === 'pause') {
+        button.classList.toggle('active');
+        setPauseRewind();
+      }
+    });
+  });
+};

src/modules/index.ts

@@ -3,3 +3,4 @@ export * from './colorSVG';
 export * from './colorReflection';
 export * from './handleClickableElement';
 export * from './recordColorChange';
+export * from './handleMenuButtons';

src/modules/rewindColors.ts

@@ -7,11 +7,12 @@ const TIMEOUT = 5000;
 let idleTime: NodeJS.Timeout;
 let interval: NodeJS.Timeout;
 let stopRewind = true;
+let pauseRewind = false;
 let initialDelay: number;
 
 const rewind = (): void => {
   const removeStep = (): void => {
-    if (stopRewind) return;
+    if (stopRewind || pauseRewind) return;
     if (steps.length > 0) {
       console.log(steps.length);
       const removedStep = steps.pop();
@@ -29,8 +30,12 @@ export const setStopRewind = (arg: boolean): void => {
   stopRewind = arg;
 };
 
+export const setPauseRewind = (): void => {
+  pauseRewind = !pauseRewind;
+};
+
 export const resetTimer = (): void => {
-  if (stopRewind) return;
+  if (stopRewind || pauseRewind) return;
   clearTimeout(idleTime);
   clearTimeout(interval);
   initialDelay = DELAY;

src/ts/index.ts

@@ -1,5 +1,6 @@
-import { handleClickableElement } from '../modules';
+import { handleClickableElement, handleMenuButtons } from '../modules';
 
 ((): void => {
   handleClickableElement();
+  handleMenuButtons();
 })();