cleaned up piano events

nickytonline · Sep 14, 2024 · cb9c10c · cb9c10c
1 parent 0aa82f9
commit cb9c10c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 60 deletions.
diff --git a/src/components/PianoKeyboard.tsx b/src/components/PianoKeyboard.tsx
@@ -5,45 +5,38 @@ interface PianoKeyboardProps {
 }
 
 export const PianoKeyboard = ({ playNote }: PianoKeyboardProps) => {
+  const pressPianoKey = (event: React.KeyboardEvent | React.MouseEvent) => {
+    const { note } = (event.target as HTMLElement).dataset;
+
+    if (!note) {
+      throw new Error("No note found on key");
+    }
+
+    playNote(note as Note);
+  };
+
   return (
-    <>
+    // Disable eslint rule for static element interactions here because the div is just handling
+    // event delegation for the piano keys. The piano keys themselves are buttons.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    <div onClick={pressPianoKey}>
       <div className="flex gap-1 relative">
-        <WhitePianoKey note="C4" playNote={playNote} />
-        <WhitePianoKey note="D4" playNote={playNote} />
-        <WhitePianoKey note="E4" playNote={playNote} />
-        <WhitePianoKey note="F4" playNote={playNote} />
-        <WhitePianoKey note="G4" playNote={playNote} />
-        <WhitePianoKey note="A4" playNote={playNote} />
-        <WhitePianoKey note="B4" playNote={playNote} />
-        <WhitePianoKey note="C5" playNote={playNote} />
+        <WhitePianoKey note="C4" />
+        <WhitePianoKey note="D4" />
+        <WhitePianoKey note="E4" />
+        <WhitePianoKey note="F4" />
+        <WhitePianoKey note="G4" />
+        <WhitePianoKey note="A4" />
+        <WhitePianoKey note="B4" />
+        <WhitePianoKey note="C5" />
       </div>
       <div className="absolute top-4">
-        <BlackPianoKey
-          note="C#4"
-          playNote={playNote}
-          leftPosition="left-[25px] md:left-[29px]"
-        />
-        <BlackPianoKey
-          note="D#4"
-          playNote={playNote}
-          leftPosition="left-[70px] md:left-[81px]"
-        />
-        <BlackPianoKey
-          note="F#4"
-          playNote={playNote}
-          leftPosition="left-[157px] md:left-[185px]"
-        />
-        <BlackPianoKey
-          note="G#4"
-          playNote={playNote}
-          leftPosition="left-[202px] md:left-[237px]"
-        />
-        <BlackPianoKey
-          note="A#4"
-          playNote={playNote}
-          leftPosition="left-[246px] md:left-[290px]"
-        />
+        <BlackPianoKey note="C#4" leftPosition="left-[25px] md:left-[29px]" />
+        <BlackPianoKey note="D#4" leftPosition="left-[70px] md:left-[81px]" />
+        <BlackPianoKey note="F#4" leftPosition="left-[157px] md:left-[185px]" />
+        <BlackPianoKey note="G#4" leftPosition="left-[202px] md:left-[237px]" />
+        <BlackPianoKey note="A#4" leftPosition="left-[246px] md:left-[290px]" />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/components/PianoKeys.tsx b/src/components/PianoKeys.tsx
@@ -19,7 +19,6 @@ export type NoteMapKey<T extends Note> = T extends `${infer L}#${infer R}`
 
 interface PianoKeyProps {
   note: string;
-  playNote: (note: Note) => void;
 }
 
 type LeftPosition = `left-[${number}px] md:left-[${number}px]`;
@@ -28,45 +27,23 @@ interface BlackPianoKeyProps extends PianoKeyProps {
   leftPosition: LeftPosition;
 }
 
-export const WhitePianoKey = ({ note, playNote }: PianoKeyProps) => {
+export const WhitePianoKey = ({ note }: PianoKeyProps) => {
   return (
     <button
       className="text-sm flex flex-col border border-black rounded-sm bg-color-white active:scale-95 hover:bg-gray-300 w-10 md:w-12 h-32 md:h-56"
       data-note={note}
-      onClick={(event) => {
-        const { note } = event.currentTarget.dataset;
-
-        if (!note) {
-          throw new Error("No note found on key");
-        }
-
-        playNote(note as Note);
-      }}
     >
       <span className="sr-only">{`piano key ${note}`}</span>
       <span className="mt-auto p-1">{note}</span>
     </button>
   );
 };
 
-export const BlackPianoKey = ({
-  note,
-  leftPosition,
-  playNote,
-}: BlackPianoKeyProps) => {
+export const BlackPianoKey = ({ note, leftPosition }: BlackPianoKeyProps) => {
   return (
     <button
       className={`text-xs md:text-sm flex flex-col border border-black rounded-sm bg-black active:scale-95 hover:bg-gray-300 w-8 md:w-10 h-20 md:p-1 md:h-36 absolute ${leftPosition}`}
       data-note={note}
-      onClick={(event) => {
-        const { note } = event.currentTarget.dataset;
-
-        if (!note) {
-          throw new Error("No note found on key");
-        }
-
-        playNote(note as Note);
-      }}
     >
       <span className="sr-only">{`piano key ${note}`}</span>
       <span