diff --git a/src/App.tsx b/src/App.tsx index 4704694..09556e3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -205,7 +205,8 @@ function App() { // Common success handler const handleMatchSuccess = useCallback(() => { // Success! - setFeedbackMessage("Good!"); + const noteDetails = getNoteDetails(targetMidi); + setFeedbackMessage(`Good! ${noteDetails.name}`); setRevealed(true); setMatchStartTime(null); @@ -255,7 +256,7 @@ function App() { if (playedMidi === targetMidi) { // Instant match - if (feedbackMessage !== "Good!") { + if (!feedbackMessage.startsWith("Good!")) { handleMatchSuccess(); } } @@ -270,7 +271,7 @@ function App() { if (pitchData.midi === targetMidi) { // Prevent re-triggering success if we're already in a success state - if (feedbackMessage === "Good!") return; + if (feedbackMessage.startsWith("Good!")) return; if (matchStartTime === null) { setMatchStartTime(Date.now()); diff --git a/src/components/SheetMusic.tsx b/src/components/SheetMusic.tsx index a51f639..2d85709 100644 --- a/src/components/SheetMusic.tsx +++ b/src/components/SheetMusic.tsx @@ -157,11 +157,8 @@ export const SheetMusic: React.FC = ({ } if (type === 'played') { - if (midi === targetMidi) { - staveNote.setStyle({ fillStyle: "var(--color-success)", strokeStyle: "var(--color-success)" }); - } else { - staveNote.setStyle({ fillStyle: "var(--color-error)", strokeStyle: "var(--color-error)" }); - } + // Always use default style (text color), no green/red distinction + staveNote.setStyle({ fillStyle: "var(--color-text-main)", strokeStyle: "var(--color-text-main)" }); } return { note: staveNote, clef: noteClef };