From c12b561bc60697b7a67ff87362850ddc716a6ce0 Mon Sep 17 00:00:00 2001
From: Jens Mohrmann <mail@jensmohrmann.de>
Date: Sat, 27 Dec 2025 17:42:41 +0100
Subject: [PATCH] "Good" animation

---
 src/App.tsx                   | 7 ++++---
 src/components/SheetMusic.tsx | 7 ++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

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<SheetMusicProps> = ({
             }
 
             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 };