feat(game): play confetti for finished games

src/pages/GameDetail.jsx

@@ -1,4 +1,4 @@
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import {Link, useNavigate, useParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {ArrowLeft, Clock, ExternalLink, Eye, EyeOff, Gamepad2, Image as ImageIcon, ImageOff, Merge, PanelTop, PencilLine, RotateCcw, ShieldOff, Timer, Trophy} from 'lucide-react';
@@ -10,6 +10,7 @@ import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
 import {cn} from '@/lib/utils';
 import BacklogCard from '../components/BacklogCard.jsx';
+import Confetti from '../components/Confetti.jsx';
 import GameCover from '../components/GameCover.jsx';
 import GameStatusBadge from '../components/GameStatusBadge.jsx';
 import ManualGameCard from '../components/ManualGameCard.jsx';
@@ -28,6 +29,7 @@ import PageContainer from '../components/PageContainer.jsx';
 import {apiFetch} from '../utils/api.js';
 import {ACHIEVEMENT_ICONS, reportBrokenImage} from '../utils/brokenImages.js';
 import {canCorrect} from '../utils/corrections.js';
+import {celebrationFor, celebrationLevel} from '../utils/confetti.js';
 import {setGameHidden} from '../utils/hiddenGames.js';
 import {hasSession} from '../utils/auth.js';
 import {isSteamKey} from '../utils/manualGames.js';
@@ -71,6 +73,16 @@ export default function GameDetail() {
     const [merging, setMerging] = useState(false);
     const [reloads, setReloads] = useState(0);
     const auditor = canCorrect(useCurrentUser(true));
+    const [celebration, setCelebration] = useState(null);
+    const shownLevel = useRef(null);
+
+    // Every status change on this page (backlog card, hints) goes through setData.
+    useEffect(() => {
+        if (!data) return;
+        const size = celebrationFor(shownLevel.current, data);
+        if (size) setCelebration({size, id: Date.now()});
+        shownLevel.current = {appid: data.appid, level: celebrationLevel(data)};
+    }, [data]);
 
     useEffect(() => {
         let cancelled = false;
@@ -357,6 +369,7 @@ export default function GameDetail() {
                     )}
                 </>
             )}
+            {celebration && <Confetti key={celebration.id} size={celebration.size} onDone={() => setCelebration(null)}/>}
             {/* Outside the content: the reload after a save must not close it. */}
             {data && auditor && (
                 <GameCorrectionDialog game={data} open={correcting} onOpenChange={setCorrecting}