Feature: Skip button becomes Start button on first attempt if audio not played
This commit is contained in:
@@ -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<HTMLAudioElement>(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);
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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)`
|
||||
}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user