"Good" animation

This commit is contained in:
2025-12-27 17:42:41 +01:00
parent 00a2de2bad
commit c12b561bc6
2 changed files with 6 additions and 8 deletions

View File

@@ -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());

View File

@@ -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 };