feat: implement MusicalNote component with animation and interaction

Author: tomast1337

web/src/modules/shared/components/layout/BlockTab.tsx

@@ -1,8 +1,8 @@
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Link from 'next/link';
-
 import { cn } from '@web/src/lib/tailwind.utils';
+import Link from 'next/link';
+import { MusicalNote } from './MusicalNote';
 
 export const BlockTab = ({
   href,
@@ -25,6 +25,7 @@ export const BlockTab = ({
     >
       <FontAwesomeIcon icon={icon} />
       <span className='hidden sm:block'>{label}</span>
+      <MusicalNote />
     </Link>
   );
 };

web/src/modules/shared/components/layout/MusicalNote.css

@@ -0,0 +1,39 @@
+@keyframes noteAnimation {
+    0% {
+        transform: scale(0) translate(0, 0);
+        opacity: 0;
+    }
+
+    1% {
+        transform: scale(1) translate(0, 0);
+        opacity: 1;
+    }
+
+    50% {
+        transform: scale(1.2) translate(0, 0);
+        transform: scale(1) translate(0, -20px);
+        opacity: 1;
+    }
+
+    99% {
+        transform: scale(1) translate(0, -40px);
+        opacity: 1;
+    }
+
+    100% {
+        transform: scale(0) translate(0, -40px);
+        opacity: 0;
+    }
+}
+
+.animate-note {
+    animation: noteAnimation 0.8s ease-out;
+    animation-fill-mode: forwards;
+    transform-origin: 50% 50%;
+    position: absolute;
+    display: none;
+}
+
+.animate-note-active {
+    display: block;
+}

web/src/modules/shared/components/layout/MusicalNote.tsx

@@ -1,6 +1,6 @@
 'use client';
-import { useCallback, useState } from 'react';
-
+import { useCallback, useEffect, useRef, useState } from 'react';
+import './MusicalNote.css';
 const notesSpritesSheet = '/notes_sprites.png';
 
 const spritesSheetSize = {
@@ -24,44 +24,68 @@ interface MusicalNoteProps {
   size?: number;
 }
 
-export const MusicalNote = ({ size = 8 }: MusicalNoteProps) => {
-  const [currentNote, setCurrentNote] = useState(0);
+export const MusicalNote = ({ size = 4 }: MusicalNoteProps) => {
+  const [currentNote, setCurrentNote] = useState(
+    Math.floor(Math.random() * totalNotes),
+  );
 
   const noteToCell = useCallback(() => {
+    const index = Math.abs(currentNote) % totalNotes;
     return {
-      x: currentNote % gridDimensions.x,
-      y: Math.floor(currentNote / gridDimensions.x),
+      x: index % gridDimensions.x,
+      y: Math.floor(index / gridDimensions.x),
     };
   }, [currentNote]);
 
-  const nextNote = () => {
-    setCurrentNote((currentNote + 1) % totalNotes);
-  };
+  const cell = noteToCell();
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleClick = () => {
+      if (ref.current) {
+        ref.current.classList.remove('animate-note');
+        ref.current.classList.add('animate-note-active');
+        // Trigger reflow to restart the animation
+        void ref.current.offsetWidth;
+        ref.current.classList.add('animate-note');
 
-  const onNoteClick = () => {
-    nextNote();
-  };
+        setTimeout(() => {
+          ref.current?.classList.remove('animate-note-active');
+        }, 500); // Match the duration of the animation
 
-  const cell = noteToCell();
+        setCurrentNote((prev) => (prev === totalNotes - 1 ? 0 : prev + 1));
+      }
+    };
+
+    ref.current?.parentElement?.addEventListener('click', handleClick);
+
+    return () => {
+      ref.current?.parentElement?.removeEventListener('click', handleClick);
+    };
+  }, []);
 
   return (
     <div
+      className='musical-note animate-note-active'
+      ref={ref}
       style={{
         width: singleNoteSize.width * size, // Scale display size
         height: singleNoteSize.height * size, // Scale display size
-
         backgroundImage: `url(${notesSpritesSheet})`,
         backgroundPosition: `-${cell.x * singleNoteSize.width * size}px -${
           cell.y * singleNoteSize.height * size
         }px`,
         backgroundSize: `${spritesSheetSize.width * size}px ${
           spritesSheetSize.height * size
         }px`, // Scale background
-
+        zIndex: 999,
         imageRendering: 'pixelated',
         cursor: 'pointer',
+        position: 'absolute', // Ensure the parent element is positioned relatively
+        opacity: 0,
+        // disable pointer events to allow the parent element to handle the click event
+        pointerEvents: 'none',
       }}
-      onClick={onNoteClick}
     />
   );
 };