feat(P5C.T4): confetti burst on game win

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/desktop/package.json

@@ -25,6 +25,7 @@
     "@livekit/track-processors": "^0.7.2",
     "@supabase/supabase-js": "^2.46.0",
     "better-sqlite3": "^11.3.0",
+    "canvas-confetti": "^1.9.4",
     "electron-updater": "^6.3.0",
     "i18next": "^23.16.4",
     "libsodium-wrappers-sumo": "0.7.15",
@@ -38,6 +39,7 @@
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.0",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/libsodium-wrappers": "^0.7.14",
     "@types/libsodium-wrappers-sumo": "^0.8.2",
     "@types/react": "^18.3.12",

apps/desktop/src/components/GameModal.tsx

@@ -1,3 +1,4 @@
+import confetti from 'canvas-confetti';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -44,6 +45,22 @@ export function GameModal({ gameId, onClose }: Props) {
         : game.players[1] === game.winnerUserId
           ? 1
           : null;
+
+  useEffect(() => {
+    if (finished && winnerIdx !== null && winnerIdx === myPlayerIdx) {
+      // Two bursts from the lower corners for a celebratory feel.
+      void confetti({
+        particleCount: 80,
+        spread: 60,
+        origin: { x: 0.2, y: 0.9 },
+      });
+      void confetti({
+        particleCount: 80,
+        spread: 60,
+        origin: { x: 0.8, y: 0.9 },
+      });
+    }
+  }, [finished, winnerIdx, myPlayerIdx]);
   const title =
     game?.gameType === 'c4'
       ? t('app:game.c4', { defaultValue: 'Vier-Gewinnt' })