diff --git a/components/AudioPlayer.tsx b/components/AudioPlayer.tsx index 32056ab..5e0a528 100644 --- a/components/AudioPlayer.tsx +++ b/components/AudioPlayer.tsx @@ -9,9 +9,10 @@ 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 default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }: AudioPlayerProps) { const audioRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); @@ -24,6 +25,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 +35,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); @@ -56,6 +59,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla onReplay?.(); } else { setHasPlayedOnce(true); + onHasPlayedChange?.(true); // Notify parent } } setIsPlaying(!isPlaying); diff --git a/components/Game.tsx b/components/Game.tsx index 7aec342..1171672 100644 --- a/components/Game.tsx +++ b/components/Game.tsx @@ -37,6 +37,7 @@ 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); useEffect(() => { const updateCountdown = () => { @@ -116,7 +117,19 @@ 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 + // We'll trigger the audio player programmatically + 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); @@ -255,8 +268,9 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max src={dailyPuzzle.audioUrl} unlockedSeconds={unlockedSeconds} startTime={dailyPuzzle.startTime} - autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)} + autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost) || hasPlayedAudio} onReplay={addReplay} + onHasPlayedChange={setHasPlayedAudio} /> @@ -282,7 +296,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)` + } ) : (