Update pages/GameZen.tsx

pages/GameZen.tsx

@@ -13,7 +13,7 @@ export const GameZen: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [gameState, setGameState] = useState<'IDLE' | 'PLAYING' | 'FINISHED'>('IDLE');
   const [timeLeft, setTimeLeft] = useState(2400); // Seconds
-  const [currentVolume, setCurrentVolume] = useState(0);
+  const [currentVolume, setCurrentVolume] = useState(0); // This is now the SMOOTHED volume
   const [isFullscreen, setIsFullscreen] = useState(false);
   
   // Game Logic State
@@ -50,6 +50,9 @@ export const GameZen: React.FC = () => {
   const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
   const reqRef = useRef<number>(0);
   
+  // Logic Refs for Smoothing
+  const smoothedVolRef = useRef(0);
+  
   // Sync Refs
   useEffect(() => { isPlayingRef.current = isPlaying; }, [isPlaying]);
   useEffect(() => { gameStateRef.current = gameState; }, [gameState]);
@@ -139,6 +142,7 @@ export const GameZen: React.FC = () => {
     setQuietSeconds(0);
     setTotalSeconds(0);
     setScore(100);
+    smoothedVolRef.current = 0; // Reset smooth vol
     
     await startAudio();
     setIsPlaying(true);
@@ -170,14 +174,25 @@ export const GameZen: React.FC = () => {
     if (analyserRef.current && dataArrayRef.current) {
         analyserRef.current.getByteFrequencyData(dataArrayRef.current as any);
         const avg = dataArrayRef.current.reduce((a,b)=>a+b) / dataArrayRef.current.length;
-        const vol = Math.min(100, Math.floor(avg / 2));
-        setCurrentVolume(vol);
-
-        // Game Logic
+        const rawVol = Math.min(100, Math.floor(avg / 2));
+        
+        // --- SMOOTHING ALGORITHM (Fast Attack, Slow Decay) ---
+        // If getting louder, react fast (0.2). If getting quieter, react slow (0.05).
+        // This prevents flickering at the threshold.
+        const smoothingFactor = rawVol > smoothedVolRef.current ? 0.2 : 0.05;
+        smoothedVolRef.current = smoothedVolRef.current + (rawVol - smoothedVolRef.current) * smoothingFactor;
+        
+        // Ensure strictly non-negative
+        if (smoothedVolRef.current < 0) smoothedVolRef.current = 0;
+
+        const displayVol = Math.round(smoothedVolRef.current);
+        setCurrentVolume(displayVol);
+
+        // Game Logic uses SMOOTHED volume for stability
         if (delta > 0) {
             setTotalSeconds(prev => prev + delta);
             // Count as quiet only if below threshold (Levels 1 & 2)
-            if (vol < threshold) {
+            if (displayVol < threshold) {
                 setQuietSeconds(prev => prev + delta);
             }
         }
@@ -196,7 +211,7 @@ export const GameZen: React.FC = () => {
   // Score Calculation
   const calculatedScore = totalSeconds > 0 ? Math.round((quietSeconds / totalSeconds) * 100) : 100;
 
-  // Determine Current State (4 Levels)
+  // Determine Current State (4 Levels) based on SMOOTHED volume
   const getZenState = () => {
       if (currentVolume < threshold * 0.5) return 'DEEP';
       if (currentVolume < threshold) return 'FOCUSED';