Add winner celebration feature with confetti effects

This update introduces a winner celebration overlay displayed when a game's winner is announced. It includes confetti animations along with a congratulatory message, enhancing user experience. The feature resets appropriately during game transitions and logout to maintain correct behavior.

frontend/package.json

@@ -9,7 +9,8 @@
     },
     "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "canvas-confetti": "^1.9.3"
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^4.3.1",

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import WinnerCelebration from "./components/WinnerCelebration";
 
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
@@ -79,6 +80,14 @@ export default function App() {
   const lastMemberIdsRef = useRef(new Set());
   const membersBaselineRef = useRef(false);
 
+  // ===== Winner Celebration =====
+  const [celebrateOpen, setCelebrateOpen] = useState(false);
+  const [celebrateName, setCelebrateName] = useState("");
+
+  // baseline per game: beim ersten Meta-Load NICHT feiern
+  const winnerBaselineRef = useRef(false);
+  const lastWinnerIdRef = useRef(null);
+
   const showSnack = (msg) => {
     setSnack(msg);
     if (snackTimerRef.current) clearTimeout(snackTimerRef.current);
@@ -185,6 +194,12 @@ export default function App() {
     membersBaselineRef.current = false;
     lastMemberIdsRef.current = new Set();
 
+    // reset winner celebration baseline when switching games
+    winnerBaselineRef.current = false;
+    lastWinnerIdRef.current = null;
+    setCelebrateOpen(false);
+    setCelebrateName("");
+
     (async () => {
       if (!gameId) return;
       try {
@@ -225,6 +240,32 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [me?.id, gameId]);
 
+  // ✅ Winner Celebration Trigger:
+  // - beim ersten Load eines Spiels NICHT feiern
+  // - feiern nur, wenn winner_user_id sich danach ändert (Host speichert)
+  useEffect(() => {
+    const wid = gameMeta?.winner_user_id ? String(gameMeta.winner_user_id) : "";
+    if (!wid) return;
+
+    if (!winnerBaselineRef.current) {
+      winnerBaselineRef.current = true;
+      lastWinnerIdRef.current = wid;
+      return;
+    }
+
+    if (lastWinnerIdRef.current !== wid) {
+      lastWinnerIdRef.current = wid;
+
+      const name =
+        (gameMeta?.winner_display_name || "").trim() ||
+        (gameMeta?.winner_email || "").trim() ||
+        "Jemand";
+
+      setCelebrateName(name);
+      setCelebrateOpen(true);
+    }
+  }, [gameMeta?.winner_user_id, gameMeta?.winner_display_name, gameMeta?.winner_email]);
+
   // ===== Auth actions =====
   const doLogin = async () => {
     await api("/auth/login", {
@@ -243,6 +284,12 @@ export default function App() {
     setGameMeta(null);
     setMembers([]);
     setWinnerUserId("");
+
+    // reset winner celebration on logout
+    winnerBaselineRef.current = false;
+    lastWinnerIdRef.current = null;
+    setCelebrateOpen(false);
+    setCelebrateName("");
   };
 
   // ===== Password =====
@@ -338,6 +385,12 @@ export default function App() {
     setChipOpen(false);
     setChipEntry(null);
 
+    // reset winner celebration baseline for the new game
+    winnerBaselineRef.current = false;
+    lastWinnerIdRef.current = null;
+    setCelebrateOpen(false);
+    setCelebrateName("");
+
     const g = await api("/games", {
       method: "POST",
       body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
@@ -491,6 +544,13 @@ export default function App() {
 
   return (
     <div style={styles.page}>
+      {/* Winner Celebration Overlay */}
+      <WinnerCelebration
+        open={celebrateOpen}
+        winnerName={celebrateName}
+        onClose={() => setCelebrateOpen(false)}
+      />
+
       <div style={styles.bgFixed} aria-hidden="true">
         <div style={styles.bgMap} />
       </div>
@@ -630,8 +690,7 @@ export default function App() {
             {snack}
           </div>,
           document.body
-        )
+        )}
-      }
     </div>
   );
 }

frontend/src/components/WinnerCelebration.jsx

@@ -0,0 +1,170 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import confetti from "canvas-confetti";
+import { stylesTokens } from "../styles/theme";
+
+export default function WinnerCelebration({ open, winnerName, onClose }) {
+  useEffect(() => {
+    if (!open) return;
+
+    // Scroll lock
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const reduceMotion =
+      window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (!reduceMotion) {
+      const end = Date.now() + 4500;
+
+      // 2 große Bursts
+      confetti({
+        particleCount: 150,
+        spread: 95,
+        startVelocity: 38,
+        origin: { x: 0.12, y: 0.62 },
+        zIndex: 999999,
+      });
+      confetti({
+        particleCount: 150,
+        spread: 95,
+        startVelocity: 38,
+        origin: { x: 0.88, y: 0.62 },
+        zIndex: 999999,
+      });
+
+      // “Rain” über die Zeit
+      (function frame() {
+        confetti({
+          particleCount: 6,
+          spread: 70,
+          startVelocity: 32,
+          origin: { x: Math.random(), y: Math.random() * 0.18 },
+          scalar: 1.0,
+          zIndex: 999999,
+        });
+        if (Date.now() < end) requestAnimationFrame(frame);
+      })();
+    }
+
+    const t = setTimeout(() => onClose?.(), 5500);
+
+    return () => {
+      clearTimeout(t);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onClose?.();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const node = (
+    <div
+      role="dialog"
+      aria-modal="true"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483646,
+        display: "grid",
+        placeItems: "center",
+        background: "rgba(0,0,0,0.58)",
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+        padding: 12,
+      }}
+      onMouseDown={onClose}
+    >
+      <div
+        onMouseDown={(e) => e.stopPropagation()}
+        style={{
+          width: "min(560px, 92vw)",
+          borderRadius: 22,
+          padding: "16px 16px",
+          border: `1px solid ${stylesTokens.panelBorder}`,
+          background: stylesTokens.panelBg,
+          boxShadow: "0 22px 90px rgba(0,0,0,0.60)",
+          backdropFilter: "blur(10px)",
+          WebkitBackdropFilter: "blur(10px)",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* dezente “Gold Line” */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            background: `linear-gradient(90deg, transparent, ${stylesTokens.goldLine}, transparent)`,
+            opacity: 0.35,
+            pointerEvents: "none",
+          }}
+        />
+
+        {/* kleine “shine” Ecke oben rechts */}
+        <div
+          style={{
+            position: "absolute",
+            top: -80,
+            right: -120,
+            width: 260,
+            height: 220,
+            background: `radial-gradient(circle at 30% 30%, ${stylesTokens.goldLine}, transparent 60%)`,
+            opacity: 0.12,
+            transform: "rotate(12deg)",
+            pointerEvents: "none",
+          }}
+        />
+
+        <div style={{ position: "relative" }}>
+          <div style={{ fontSize: 34, lineHeight: 1 }}>🏆</div>
+
+          <div
+            style={{
+              marginTop: 8,
+              fontSize: 18,
+              fontWeight: 900,
+              color: stylesTokens.textMain,
+            }}
+          >
+            Spieler{" "}
+            <span style={{ color: stylesTokens.textGold }}>
+              {winnerName || "Unbekannt"}
+            </span>{" "}
+            hat die richtige Lösung!
+          </div>
+
+          <div style={{ marginTop: 8, color: stylesTokens.textDim, opacity: 0.95 }}>
+            Fall gelöst. Respekt. ✨
+          </div>
+
+          <div style={{ marginTop: 14, display: "flex", justifyContent: "flex-end" }}>
+            <button
+              onClick={onClose}
+              style={{
+                padding: "10px 12px",
+                borderRadius: 14,
+                border: `1px solid ${stylesTokens.panelBorder}`,
+                background: "rgba(255,255,255,0.06)",
+                color: stylesTokens.textMain,
+                fontWeight: 900,
+                cursor: "pointer",
+              }}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(node, document.body);
+}