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.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
170
frontend/src/components/WinnerCelebration.jsx
Normal file
170
frontend/src/components/WinnerCelebration.jsx
Normal file
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user