From a9cd0f16ae0dfdf84b5eb5cf4c308431b4ad73c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sun, 19 Mar 2023 18:06:52 +0100
Subject: [PATCH] added support for showOctaveNumber property

---
 front/components/VirtualPiano/Octave.tsx      | 21 ++++++++++++++++++-
 .../components/VirtualPiano/VirtualPiano.tsx  |  1 +
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/front/components/VirtualPiano/Octave.tsx b/front/components/VirtualPiano/Octave.tsx
index 961e949..46c7640 100644
--- a/front/components/VirtualPiano/Octave.tsx
+++ b/front/components/VirtualPiano/Octave.tsx
@@ -43,12 +43,13 @@ type OctaveProps = Parameters<typeof Box>[0] & {
 	startNote: Note;
 	endNote: Note;
 	showNoteNames: NoteNameBehavior;
+	showOctaveNumber: boolean;
 	onNoteDown: (note: PianoKey) => void;
 	onNoteUp: (note: PianoKey) => void;
 };
 
 const Octave = (props: OctaveProps) => {
-	const { number, startNote, endNote, showNoteNames, onNoteDown, onNoteUp } =
+	const { number, startNote, endNote, showNoteNames, showOctaveNumber, onNoteDown, onNoteUp } =
 		props;
 	const oK: PianoKey[] = octaveKeys.map((k) => {
 		return new PianoKey(k.note, k.accidental, number);
@@ -169,6 +170,24 @@ const Octave = (props: OctaveProps) => {
 					);
 				})}
 			</Row>
+			{showOctaveNumber && (
+				<Text
+					style={{
+						userSelect: "none",
+						WebkitUserSelect: "none",
+						MozUserSelect: "none",
+						msUserSelect: "none",
+					}}
+					fontSize="2xs"
+					color="black"
+					position="absolute"
+					bottom="0px"
+					left="2px"
+					m="2px"
+				>
+					{number}
+				</Text>
+			)}
 		</Box>
 	);
 };
diff --git a/front/components/VirtualPiano/VirtualPiano.tsx b/front/components/VirtualPiano/VirtualPiano.tsx
index 0e64eeb..8d5106f 100644
--- a/front/components/VirtualPiano/VirtualPiano.tsx
+++ b/front/components/VirtualPiano/VirtualPiano.tsx
@@ -53,6 +53,7 @@ const VirtualPiano = ({
                         key={octaveNum}
                         number={octaveNum}
                         showNoteNames={showNoteNames}
+                        showOctaveNumber={showOctaveNumbers}
                         startNote={octaveNum == startOctave ? startNote : notesList[0]}
                         endNote={octaveNum == endOctave ? endNote : notesList[notesList.length - 1]}
                         onNoteDown={onNoteDown}