Feat: Auto-play on skip & Gotify notifications

components/AudioPlayer.tsx

@@ -6,9 +6,10 @@ interface AudioPlayerProps {
     src: string;
     unlockedSeconds: number; // 2, 4, 7, 11, 16, 30 (or full length)
     onPlay?: () => void;
+    autoPlay?: boolean;
 }
 
-export default function AudioPlayer({ src, unlockedSeconds, onPlay }: AudioPlayerProps) {
+export default function AudioPlayer({ src, unlockedSeconds, onPlay, autoPlay = false }: AudioPlayerProps) {
     const audioRef = useRef<HTMLAudioElement>(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const [progress, setProgress] = useState(0);
@@ -19,8 +20,23 @@ export default function AudioPlayer({ src, unlockedSeconds, onPlay }: AudioPlaye
             audioRef.current.currentTime = 0;
             setIsPlaying(false);
             setProgress(0);
+
+            if (autoPlay) {
+                const playPromise = audioRef.current.play();
+                if (playPromise !== undefined) {
+                    playPromise
+                        .then(() => {
+                            setIsPlaying(true);
+                            onPlay?.();
+                        })
+                        .catch(error => {
+                            console.log("Autoplay prevented:", error);
+                            setIsPlaying(false);
+                        });
+                }
+            }
         }
-    }, [src, unlockedSeconds]);
+    }, [src, unlockedSeconds, autoPlay]);
 
     const togglePlay = () => {
         if (!audioRef.current) return;

components/Game.tsx

@@ -5,6 +5,7 @@ import AudioPlayer from './AudioPlayer';
 import GuessInput from './GuessInput';
 import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
+import { sendGotifyNotification } from '../app/actions';
 
 interface GameProps {
     dailyPuzzle: {
@@ -24,6 +25,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
     const [hasWon, setHasWon] = useState(false);
     const [hasLost, setHasLost] = useState(false);
     const [shareText, setShareText] = useState('Share Result');
+    const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
 
     useEffect(() => {
         if (gameState && dailyPuzzle) {
@@ -32,6 +34,10 @@ export default function Game({ dailyPuzzle }: GameProps) {
         }
     }, [gameState, dailyPuzzle]);
 
+    useEffect(() => {
+        setLastAction(null);
+    }, [dailyPuzzle?.id]);
+
     if (!dailyPuzzle) return (
         <div className="game-container" style={{ textAlign: 'center', padding: '2rem' }}>
             <h2>No Puzzle Available</h2>
@@ -43,17 +49,32 @@ export default function Game({ dailyPuzzle }: GameProps) {
     if (!gameState) return <div>Loading state...</div>;
 
     const handleGuess = (song: any) => {
+        setLastAction('GUESS');
         if (song.id === dailyPuzzle.songId) {
             addGuess(song.title, true);
             setHasWon(true);
+            sendGotifyNotification(gameState.guesses.length + 1, 'won', dailyPuzzle.id);
         } else {
             addGuess(song.title, false);
             if (gameState.guesses.length + 1 >= 7) {
                 setHasLost(true);
+                sendGotifyNotification(7, 'lost', dailyPuzzle.id);
             }
         }
     };
 
+    const handleSkip = () => {
+        setLastAction('SKIP');
+        addGuess("SKIPPED", false);
+    };
+
+    const handleGiveUp = () => {
+        setLastAction('SKIP');
+        addGuess("SKIPPED", false);
+        setHasLost(true);
+        sendGotifyNotification(7, 'lost', dailyPuzzle.id);
+    };
+
     const unlockedSeconds = UNLOCK_STEPS[Math.min(gameState.guesses.length, 6)];
 
     const handleShare = () => {
@@ -116,6 +137,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
                     <AudioPlayer
                         src={dailyPuzzle.audioUrl}
                         unlockedSeconds={unlockedSeconds}
+                        autoPlay={lastAction === 'SKIP'}
                     />
                 </div>
 
@@ -138,17 +160,14 @@ export default function Game({ dailyPuzzle }: GameProps) {
                         <GuessInput onGuess={handleGuess} disabled={false} />
                         {gameState.guesses.length < 6 ? (
                             <button
-                                onClick={() => addGuess("SKIPPED", false)}
+                                onClick={handleSkip}
                                 className="skip-button"
                             >
                                 Skip (+{UNLOCK_STEPS[Math.min(gameState.guesses.length + 1, 6)] - unlockedSeconds}s)
                             </button>
                         ) : (
                             <button
-                                onClick={() => {
-                                    addGuess("SKIPPED", false);
-                                    setHasLost(true);
-                                }}
+                                onClick={handleGiveUp}
                                 className="skip-button"
                                 style={{
                                     background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',