fixed a bug in strToKey function where the octaveNumber isn't parsed and filtering correctly highlighted notes to the correct octave (default broadcasted to every octave)

front/components/VirtualPiano/Octave.tsx

@@ -99,10 +99,8 @@ const Octave = (props: OctaveProps) => {
 					const isHighlighted = highlightedKey !== undefined;
 					const highlightColor =
 						highlightedKey?.bgColor ?? defaultHighlightColor;
-					console.log(key, highlightedNotes, highlightedKey, isHighlighted, highlightColor);
 					return (
 						<PianoKeyComp
-							key={i}
 							pianoKey={key}
 							showNoteName={showNoteNames}
 							bg={isHighlighted ? highlightColor : whiteKeyBg}
@@ -126,7 +124,6 @@ const Octave = (props: OctaveProps) => {
 						highlightedKey?.bgColor ?? defaultHighlightColor;
 					return (
 						<PianoKeyComp
-							key={i}
 							pianoKey={key}
 							showNoteName={showNoteNames}
 							bg={isHighlighted ? highlightColor : blackKeyBg}

front/components/VirtualPiano/PianoKeyComp.tsx

@@ -10,7 +10,6 @@ import {
 } from "../../models/Piano";
 
 type PianoKeyProps = {
-	key?: Key;
 	pianoKey: PianoKey;
 	showNoteName: NoteNameBehavior;
 	bg: string;
@@ -39,7 +38,6 @@ const isNoteVisible = (
 };
 
 const PianoKeyComp = ({
-	key,
 	pianoKey,
 	showNoteName,
 	bg,
@@ -64,7 +62,6 @@ const PianoKeyComp = ({
 	const textProps = { ...textDefaultProps, ...text };
 	return (
 		<Pressable
-			key={key}
 			onPressIn={onKeyDown}
 			onPressOut={onKeyUp}
 			style={style}

front/components/VirtualPiano/VirtualPiano.tsx

@@ -7,8 +7,8 @@ import {
 	NoteNameBehavior,
 	KeyPressStyle,
 	keyToStr,
-    strToKey,
-    HighlightedKey,
+	strToKey,
+	HighlightedKey,
 } from "../../models/Piano";
 
 type VirtualPianoProps = Parameters<typeof Row>[0] & {
@@ -20,10 +20,7 @@ type VirtualPianoProps = Parameters<typeof Row>[0] & {
 	endNote: Note;
 	showNoteNames: NoteNameBehavior; // default "onpress"
 	highlightedNotes: Array<HighlightedKey>;
-	highlightColor: string;
 	showOctaveNumbers: boolean;
-	keyPressStyle: KeyPressStyle;
-	vividKeyPressColor: string;
 };
 
 const VirtualPiano = ({
@@ -35,10 +32,7 @@ const VirtualPiano = ({
 	endNote,
 	showNoteNames,
 	highlightedNotes,
-	highlightColor,
 	showOctaveNumbers,
-	keyPressStyle,
-	vividKeyPressColor,
 }: VirtualPianoProps) => {
 	const notesList: Array<Note> = [
 		Note.C,
@@ -66,7 +60,9 @@ const VirtualPiano = ({
 						number={octaveNum}
 						showNoteNames={showNoteNames}
 						showOctaveNumber={showOctaveNumbers}
-						highlightedNotes={highlightedNotes}
+						highlightedNotes={highlightedNotes.filter(
+							(n) => n.key.octave ? n.key.octave == octaveNum : true
+						)}
 						startNote={octaveNum == startOctave ? startNote : notesList[0]}
 						endNote={
 							octaveNum == endOctave ? endNote : notesList[notesList.length - 1]
@@ -89,14 +85,14 @@ VirtualPiano.defaultProps = {
 	},
 	startOctave: 2,
 	startNote: Note.C,
-	endOctave: 2,
-	endNote: Note.B,
+	endOctave: 6,
+	endNote: Note.C,
 	showNoteNames: NoteNameBehavior.onpress,
-	highlightedNotes: [{ key: strToKey("D") }, { key: strToKey("A#"), bgColor: "#00FF00" }],
-	highlightColor: "red",
+	highlightedNotes: [
+		{ key: strToKey("D3") },
+		{ key: strToKey("A#"), bgColor: "#00FF00" },
+	],
 	showOctaveNumbers: true,
-	keyPressStyle: "subtle",
-	vividKeyPressColor: "red",
 };
 
 export default VirtualPiano;