Fix: Properly handle async play() and remove autoPlay conflict

components/AudioPlayer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 
 interface AudioPlayerProps {
     src: string;
@@ -9,9 +9,14 @@ interface AudioPlayerProps {
     onPlay?: () => void;
     onReplay?: () => void;
     autoPlay?: boolean;
+    onHasPlayedChange?: (hasPlayed: boolean) => void;
 }
 
-export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false }: AudioPlayerProps) {
+export interface AudioPlayerRef {
+    play: () => void;
+}
+
+const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }, ref) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const [progress, setProgress] = useState(0);
@@ -24,6 +29,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
             setIsPlaying(false);
             setProgress(0);
             setHasPlayedOnce(false); // Reset for new segment
+            onHasPlayedChange?.(false); // Notify parent
 
             if (autoPlay) {
                 const playPromise = audioRef.current.play();
@@ -33,6 +39,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
                             setIsPlaying(true);
                             onPlay?.();
                             setHasPlayedOnce(true);
+                            onHasPlayedChange?.(true); // Notify parent
                         })
                         .catch(error => {
                             console.log("Autoplay prevented:", error);
@@ -43,6 +50,30 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
         }
     }, [src, unlockedSeconds, startTime, autoPlay]);
 
+    // Expose play method to parent component
+    useImperativeHandle(ref, () => ({
+        play: () => {
+            if (!audioRef.current) return;
+
+            const playPromise = audioRef.current.play();
+            if (playPromise !== undefined) {
+                playPromise
+                    .then(() => {
+                        setIsPlaying(true);
+                        onPlay?.();
+                        if (!hasPlayedOnce) {
+                            setHasPlayedOnce(true);
+                            onHasPlayedChange?.(true);
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Play failed:", error);
+                        setIsPlaying(false);
+                    });
+            }
+        }
+    }));
+
     const togglePlay = () => {
         if (!audioRef.current) return;
 
@@ -56,6 +87,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
                 onReplay?.();
             } else {
                 setHasPlayedOnce(true);
+                onHasPlayedChange?.(true); // Notify parent
             }
         }
         setIsPlaying(!isPlaying);
@@ -112,4 +144,8 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
             </div>
         </div>
     );
-}
+});
+
+AudioPlayer.displayName = 'AudioPlayer';
+
+export default AudioPlayer;

components/Game.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import AudioPlayer from './AudioPlayer';
+import { useEffect, useState, useRef } from 'react';
+import AudioPlayer, { AudioPlayerRef } from './AudioPlayer';
 import GuessInput from './GuessInput';
 import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
@@ -37,6 +37,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     const [timeUntilNext, setTimeUntilNext] = useState('');
     const [hasRated, setHasRated] = useState(false);
     const [showYearModal, setShowYearModal] = useState(false);
+    const [hasPlayedAudio, setHasPlayedAudio] = useState(false);
+    const audioPlayerRef = useRef<AudioPlayerRef>(null);
 
     useEffect(() => {
         const updateCountdown = () => {
@@ -116,7 +118,20 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         setTimeout(() => setIsProcessingGuess(false), 500);
     };
 
+    const handleStartAudio = () => {
+        // This will be called when user clicks "Start" button on first attempt
+        // Trigger the audio player to start playing
+        audioPlayerRef.current?.play();
+        setHasPlayedAudio(true);
+    };
+
     const handleSkip = () => {
+        // If user hasn't played audio yet on first attempt, start it instead of skipping
+        if (gameState.guesses.length === 0 && !hasPlayedAudio) {
+            handleStartAudio();
+            return;
+        }
+
         setLastAction('SKIP');
         addGuess("SKIPPED", false);
 
@@ -252,11 +267,13 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                     <ScoreDisplay score={gameState.score} breakdown={gameState.scoreBreakdown} />
 
                     <AudioPlayer
+                        ref={audioPlayerRef}
                         src={dailyPuzzle.audioUrl}
                         unlockedSeconds={unlockedSeconds}
                         startTime={dailyPuzzle.startTime}
                         autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
                         onReplay={addReplay}
+                        onHasPlayedChange={setHasPlayedAudio}
                     />
                 </div>
 
@@ -282,7 +299,10 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                                 onClick={handleSkip}
                                 className="skip-button"
                             >
-                                Skip (+{unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)
+                                {gameState.guesses.length === 0 && !hasPlayedAudio
+                                    ? 'Start'
+                                    : `Skip (+${unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)`
+                                }
                             </button>
                         ) : (
                             <button