updating the showNoteNames policy down to PianoKey

front/components/VirtualPiano/Octave.tsx

@@ -104,6 +104,7 @@ const Octave = (props: OctaveProps) => {
 						<PianoKeyComp
 							key={i} 
 							pianoKey={key}
+							showNoteName={showNoteNames}
 							bg={isHighlighted ? highlightColor :whiteKeyBg}
 							bgPressed={isHighlighted ? highlightColor : whiteKeyBgPressed}
 							bgHovered={isHighlighted ? highlightColor : whiteKeyBgHovered}
@@ -129,6 +130,7 @@ const Octave = (props: OctaveProps) => {
 						<PianoKeyComp
 							key={i}
 							pianoKey={key}
+							showNoteName={showNoteNames}
 							bg={isHighlighted ? highlightColor : blackKeyBg}
 							bgPressed={isHighlighted ? highlightColor : blackKeyBgPressed}
 							bgHovered={isHighlighted ? highlightColor : blackKeyBgHovered}

front/components/VirtualPiano/PianoKeyComp.tsx

@@ -14,7 +14,7 @@ import {
 type PianoKeyProps = {
 	key?: Key;
 	pianoKey: PianoKey;
-	showNoteNames: NoteNameBehavior;
+	showNoteName: NoteNameBehavior;
 	bg: string;
 	bgPressed: string;
 	bgHovered: string;
@@ -43,7 +43,7 @@ const isNoteVisible = (
 const PianoKeyComp = ({
 	key,
 	pianoKey,
-	showNoteNames,
+	showNoteName,
 	bg,
 	bgPressed,
 	bgHovered,
@@ -85,7 +85,7 @@ const PianoKeyComp = ({
 					justifyContent="flex-end"
 					alignItems="center"
 				>
-					{isNoteVisible(showNoteNames, isPressed, isHovered) && (
+					{isNoteVisible(showNoteName, isPressed, isHovered) && (
 						<Text {...textProps}>{keyToStr(pianoKey, false)}</Text>
 					)}
 				</Box>

front/components/VirtualPiano/VirtualPiano.tsx

@@ -84,10 +84,10 @@ VirtualPiano.defaultProps = {
 	startNote: Note.C,
 	endOctave: 2,
 	endNote: Note.B,
-	showNoteNames: "onhover",
+	showNoteNames: NoteNameBehavior.onpress,
 	highlightedNotes: [],
 	highlightColor: "red",
-	specialHighlightedNotes: [],
+	specialHighlightedNotes: [Note.D, Note.G],
 	specialHighlightColor: "blue",
 	showOctaveNumbers: true,
 	keyPressStyle: "subtle",