feat: Punkte-Reveal with confetti animation

Shows animated reveal overlay for unseen match results. Exact match (3pts) triggers confetti explosion. Each reveal shown only once (localStorage tracking). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-11 19:10:22 +02:00
parent 89046a2e29
commit f6ab2c719d
6 changed files with 199 additions and 0 deletions
@@ -0,0 +1,91 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  animation: fadeIn 0.3s ease;
+}
+
+.card {
+  background: var(--surface-mid);
+  border-radius: var(--radius-lg);
+  padding: 32px 24px;
+  text-align: center;
+  max-width: 320px;
+  width: 90%;
+  animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.result {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.tipLine {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+
+.badge {
+  display: inline-block;
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.badgeExact {
+  background: linear-gradient(135deg, var(--gold), #FFD700);
+  color: #1a1a1a;
+  animation: shimmer 2s ease-in-out;
+}
+
+.badgeTendency {
+  background: var(--success);
+  color: #1a1a1a;
+}
+
+.badgeWrong {
+  background: var(--text-muted);
+  color: var(--bg-deep);
+}
+
+.label {
+  font-size: 1rem;
+  color: var(--text-primary);
+  margin-bottom: 20px;
+}
+
+.dismissBtn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 10px 32px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { transform: scale(0.8); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes shimmer {
+  0% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+  50% { box-shadow: 0 0 20px rgba(254, 174, 50, 0.6); }
+  100% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+}
@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+import confetti from 'canvas-confetti';
+import { Match } from '../api/client';
+import styles from './ConfettiReveal.module.css';
+
+interface Props {
+  match: Match;
+  onDismiss: () => void;
+}
+
+export default function ConfettiReveal({ match, onDismiss }: Props) {
+  const didFire = useRef(false);
+  const tip = match.userTip!;
+  const points = tip.points!;
+
+  useEffect(() => {
+    if (points === 3 && !didFire.current) {
+      didFire.current = true;
+      confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } });
+    }
+  }, [points]);
+
+  const resultLabel = points === 3 ? 'EXAKT! 🎉' : points === 1 ? 'Richtige Tendenz! 👏' : 'Knapp daneben... 😅';
+  const badgeClass = points === 3 ? styles.badgeExact : points === 1 ? styles.badgeTendency : styles.badgeWrong;
+
+  return (
+    <div className={styles.overlay} onClick={onDismiss}>
+      <div className={styles.card} onClick={e => e.stopPropagation()}>
+        <div className={styles.result}>
+          {match.homeTeam.shortName} {match.score.home}:{match.score.away} {match.awayTeam.shortName}
+        </div>
+        <div className={styles.tipLine}>
+          Dein Tipp: {tip.home}:{tip.away}
+        </div>
+        <div className={`${styles.badge} ${badgeClass}`}>
+          {points} {points === 1 ? 'Punkt' : 'Punkte'}
+        </div>
+        <div className={styles.label}>{resultLabel}</div>
+        <button className={styles.dismissBtn} onClick={onDismiss}>Weiter</button>
+      </div>
+    </div>
+  );
+}