From a86976ea0eb19f3c8d2d8baa13faffa1176e7962 Mon Sep 17 00:00:00 2001
From: Pierre Le Fevre <hello@pierrelf.com>
Date: Sat, 14 Mar 2026 09:44:32 +0100
Subject: [PATCH] Add sound effects for correct/incorrect answers and lesson
 completion

Synthesize short tones via Web Audio API - no external audio files needed.
Correct answers play an ascending two-note ding, incorrect answers play a
gentle descending tone, and lesson completion plays a four-note fanfare.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/components/feedback/CorrectBanner.tsx |  7 ++-
 .../components/feedback/IncorrectBanner.tsx   |  7 ++-
 web/src/pages/ReviewPage.tsx                  |  3 +
 web/src/utils/sounds.ts                       | 56 +++++++++++++++++++
 4 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 web/src/utils/sounds.ts

diff --git a/web/src/components/feedback/CorrectBanner.tsx b/web/src/components/feedback/CorrectBanner.tsx
index 436eba3..6a10d7b 100644
--- a/web/src/components/feedback/CorrectBanner.tsx
+++ b/web/src/components/feedback/CorrectBanner.tsx
@@ -1,8 +1,9 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { keyframes } from '@emotion/react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { Rambi } from '../mascot/Rambi';
+import { playCorrectSound } from '../../utils/sounds';
 
 const slideUp = keyframes`
   from { transform: translateY(100%); opacity: 0; }
@@ -24,6 +25,10 @@ export function CorrectBanner() {
     [],
   );
 
+  useEffect(() => {
+    playCorrectSound();
+  }, []);
+
   return (
     <Box
       sx={{
diff --git a/web/src/components/feedback/IncorrectBanner.tsx b/web/src/components/feedback/IncorrectBanner.tsx
index eab2ba8..33b2d4d 100644
--- a/web/src/components/feedback/IncorrectBanner.tsx
+++ b/web/src/components/feedback/IncorrectBanner.tsx
@@ -1,8 +1,9 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { keyframes } from '@emotion/react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { Rambi } from '../mascot/Rambi';
+import { playIncorrectSound } from '../../utils/sounds';
 
 const slideUp = keyframes`
   from { transform: translateY(100%); opacity: 0; }
@@ -28,6 +29,10 @@ export function IncorrectBanner({ correctAnswer }: IncorrectBannerProps) {
     [],
   );
 
+  useEffect(() => {
+    playIncorrectSound();
+  }, []);
+
   return (
     <Box
       sx={{
diff --git a/web/src/pages/ReviewPage.tsx b/web/src/pages/ReviewPage.tsx
index 0964965..af6eb69 100644
--- a/web/src/pages/ReviewPage.tsx
+++ b/web/src/pages/ReviewPage.tsx
@@ -8,6 +8,7 @@ import Button from '@mui/material/Button';
 import BoltIcon from '@mui/icons-material/Bolt';
 import { SpeechBubble } from '../components/mascot/SpeechBubble';
 import { apiClient } from '../api/client';
+import { playCompletionSound } from '../utils/sounds';
 
 interface ReviewState {
   correctCount: number;
@@ -34,6 +35,8 @@ export function ReviewPage() {
     if (savedRef.current) return;
     savedRef.current = true;
 
+    playCompletionSound();
+
     const score = Math.round(
       (reviewState.correctCount / reviewState.total) * 100,
     );
diff --git a/web/src/utils/sounds.ts b/web/src/utils/sounds.ts
new file mode 100644
index 0000000..6760711
--- /dev/null
+++ b/web/src/utils/sounds.ts
@@ -0,0 +1,56 @@
+let audioCtx: AudioContext | null = null;
+
+function getAudioContext(): AudioContext {
+  if (!audioCtx) {
+    audioCtx = new AudioContext();
+  }
+  return audioCtx;
+}
+
+function playTone(
+  frequency: number,
+  startTime: number,
+  duration: number,
+  type: OscillatorType = 'sine',
+  volume = 0.3,
+) {
+  const ctx = getAudioContext();
+  const osc = ctx.createOscillator();
+  const gain = ctx.createGain();
+
+  osc.type = type;
+  osc.frequency.value = frequency;
+  gain.gain.setValueAtTime(volume, startTime);
+  gain.gain.exponentialRampToValueAtTime(0.001, startTime + duration);
+
+  osc.connect(gain);
+  gain.connect(ctx.destination);
+  osc.start(startTime);
+  osc.stop(startTime + duration);
+}
+
+export function playCorrectSound() {
+  const ctx = getAudioContext();
+  const now = ctx.currentTime;
+  // Cheerful ascending two-note ding
+  playTone(523.25, now, 0.15, 'sine', 0.25); // C5
+  playTone(659.25, now + 0.12, 0.2, 'sine', 0.25); // E5
+}
+
+export function playIncorrectSound() {
+  const ctx = getAudioContext();
+  const now = ctx.currentTime;
+  // Gentle descending two-note
+  playTone(330, now, 0.15, 'triangle', 0.2); // E4
+  playTone(262, now + 0.12, 0.25, 'triangle', 0.2); // C4
+}
+
+export function playCompletionSound() {
+  const ctx = getAudioContext();
+  const now = ctx.currentTime;
+  // Ascending fanfare
+  playTone(523.25, now, 0.15, 'sine', 0.2); // C5
+  playTone(659.25, now + 0.1, 0.15, 'sine', 0.2); // E5
+  playTone(783.99, now + 0.2, 0.15, 'sine', 0.2); // G5
+  playTone(1046.5, now + 0.3, 0.35, 'sine', 0.25); // C6
+}
-- 
2.51.2