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;

front/models/Piano.ts

@@ -46,16 +46,22 @@ export class PianoKey {
 
 export const strToKey = (str: string): PianoKey => {
 	let note: Note;
-	switch (str.substring(0, 2)) {
+	const isSimpleNote = str[1]! >= "0" && str[1]! <= "9";
+	// later we need to support different annotations
+
+	switch (isSimpleNote ? str[0] : str.substring(0, 2)) {
+		case "E":
+			note = Note.E;
+			break;
+		case "B":
+			note = Note.B;
+			break;
 		case "C":
 			note = Note.C;
 			break;
 		case "D":
 			note = Note.D;
 			break;
-		case "E":
-			note = Note.E;
-			break;
 		case "F":
 			note = Note.F;
 			break;
@@ -65,9 +71,6 @@ export const strToKey = (str: string): PianoKey => {
 		case "A":
 			note = Note.A;
 			break;
-		case "B":
-			note = Note.B;
-			break;
 		case "C#":
 			note = Note["C#"];
 			break;
@@ -86,10 +89,10 @@ export const strToKey = (str: string): PianoKey => {
 		default:
 			throw new Error("Invalid note name");
 	}
-	if (str.length < 3) {
+	if ((isSimpleNote && !str[1]) || (!isSimpleNote && str.length < 3)) {
 		return new PianoKey(note);
 	}
-	const octave = parseInt(str[2] as unknown as string);
+	const octave = parseInt(str.substring(isSimpleNote ? 1 : 2));
 	return new PianoKey(note, octave);
 };