Laden...
;
+ if (!data) return Dashboard konnte nicht geladen werden.
;
+
+ const { hero, stats, nudges } = data;
+
+ const formatCountdown = (minutes: number): string => {
+ if (minutes < 0) return 'Läuft';
+ if (minutes < 60) return `in ${Math.round(minutes)} Min`;
+ if (minutes < 1440) return `in ${Math.round(minutes / 60)}h`;
+ const days = Math.round(minutes / 1440);
+ return `in ${days} ${days === 1 ? 'Tag' : 'Tagen'}`;
+ };
+
+ return (
+
+ {/* Hero: Next match */}
+ {hero ? (
+
navigate('/spiele')}
+ role="button"
+ tabIndex={0}
+ >
+
+ {hero.tippable ? 'Nächstes Spiel' : 'Kommendes Spiel'}
+
+ {formatCountdown(hero.match.minutesUntilKickoff)}
+
+
+
+
+ {hero.match.homeTeam.crest && (
+
+ )}
+
{hero.match.homeTeam.shortName}
+
+
vs
+
+ {hero.match.awayTeam.crest && (
+
+ )}
+
{hero.match.awayTeam.shortName}
+
+
+ Dein Tipp: {hero.userTip.home}:{hero.userTip.away} ✓
+
+ ) : hero.tippable ? (
+
+ ) : null}
+
+ ) : (
+
+ Keine anstehenden Spiele
+
+ )}
+
+ {/* Stats tiles */}
+
+
+ {stats.rank ?? '—'}
+ Dein Rang
+
+
+ {stats.totalPoints}
+ Punkte
+
+
+
+ {stats.streak > 0 ? `${stats.streak}🔥` : '0'}
+
+ Streak
+
+
+
+ {/* Nudges */}
+ {nudges.length > 0 && (
+
+ {nudges.map((nudge, i) => (
+ {
+ if (nudge.type === 'untipped') navigate('/spiele');
+ if (nudge.type === 'leader') navigate('/rangliste');
+ }}
+ >
+ {nudge.text}
+
+ ))}
+
+ )}
+
+```
+
+- [ ] **Step 3: Add countdown timer for urgent matches**
+
+```tsx
+function CountdownTimer({ minutes }: { minutes: number }) {
+ const [remaining, setRemaining] = useState(minutes);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setRemaining(r => Math.max(0, r - 1/60));
+ }, 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ if (remaining > 60) return null;
+
+ const mins = Math.floor(remaining);
+ const urgent = remaining < 5;
+
+ return (
+
+ Noch {mins} Min!
+
+ );
+}
+```
+
+- [ ] **Step 4: Style each card state**
+
+In `MatchCard.module.css`:
+
+```css
+.card_open { /* default styling */ }
+
+.card_tipped {
+ border-left: 3px solid var(--success);
+}
+
+.card_live {
+ border-left: 3px solid var(--error);
+}
+.card_live .liveDot {
+ width: 8px; height: 8px;
+ background: var(--error);
+ border-radius: 50%;
+ animation: pulse 1.5s infinite;
+}
+
+.card_finished .pointsBadge_exact {
+ background: linear-gradient(135deg, var(--gold), #FFD700);
+ color: #1a1a1a;
+ animation: shimmer 2s ease-in-out;
+}
+.card_finished .pointsBadge_tendency {
+ background: var(--success);
+ color: #1a1a1a;
+}
+.card_finished .pointsBadge_wrong {
+ background: var(--text-muted);
+}
+
+.card_missed {
+ opacity: 0.45;
+ pointer-events: none;
+}
+
+.countdown {
+ color: var(--error);
+ font-weight: 700;
+ font-size: 0.85rem;
+}
+.countdownUrgent {
+ animation: pulse 0.8s infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
+}
+
+@keyframes shimmer {
+ 0% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+ 50% { box-shadow: 0 0 12px rgba(254, 174, 50, 0.6); }
+ 100% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+}
+```
+
+- [ ] **Step 5: Build and verify**
+
+```bash
+cd frontend && npm run build
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add -A && git commit -m "feat: zustandsbasierte Match-Cards (open/tipped/live/finished/missed)
+
+Each card state has distinct visual treatment:
+- Open: standard with countdown timer when <1h
+- Tipped: green accent with tip display
+- Live: pulsing red dot
+- Finished: points badge (gold/green/gray)
+- Missed: grayed out"
+```
+
+---
+
+## Task 8: Tipp-Bestätigung Animation
+
+Add success animation after submitting a tip.
+
+**Files:**
+- Modify: `frontend/src/components/TipModal.tsx`
+- Modify: `frontend/src/components/TipModal.module.css`
+
+- [ ] **Step 1: Add success state to TipModal**
+
+After successful `api.submitTip()`, instead of immediately closing the modal, show a success state:
+
+```tsx
+const [showSuccess, setShowSuccess] = useState(false);
+
+async function handleSave() {
+ // ... existing save logic ...
+ await api.submitTip(match.id, tipHome, tipAway);
+ setShowSuccess(true);
+ // Haptic feedback on mobile
+ if (navigator.vibrate) navigator.vibrate(50);
+ // Auto-close after animation
+ setTimeout(() => {
+ setShowSuccess(false);
+ onClose(true); // true = tip was saved
+ }, 1200);
+}
+```
+
+- [ ] **Step 2: Render success overlay in modal**
+
+```tsx
+{showSuccess && (
+
+
✓
+
Dein Tipp ist drin! 🎯
+
+)}
+```
+
+- [ ] **Step 3: Style the success animation**
+
+```css
+.successOverlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: color-mix(in srgb, var(--bg-deep) 90%, transparent);
+ border-radius: inherit;
+ animation: fadeIn 0.3s ease;
+ z-index: 10;
+}
+
+.successCheck {
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ background: var(--success);
+ color: white;
+ font-size: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.successText {
+ margin-top: 12px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+@keyframes popIn {
+ 0% { transform: scale(0); opacity: 0; }
+ 100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+```
+
+- [ ] **Step 4: Build and verify**
+
+```bash
+cd frontend && npm run build
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add -A && git commit -m "feat: tip confirmation animation with haptic feedback
+
+Success overlay with animated checkmark and '🎯 Dein Tipp ist drin!'
+message. Haptic vibration on mobile. Auto-closes after 1.2s."
+```
+
+---
+
+## Task 9: Punkte-Reveal with Confetti
+
+Animated reveal when the user sees evaluated results for the first time.
+
+**Files:**
+- Create: `frontend/src/components/ConfettiReveal.tsx`
+- Create: `frontend/src/components/ConfettiReveal.module.css`
+- Create: `frontend/src/hooks/useRevealQueue.ts`
+- Modify: `frontend/src/pages/MatchesPage.tsx` (trigger reveals)
+- Install: `canvas-confetti`
+
+- [ ] **Step 1: Install canvas-confetti**
+
+```bash
+cd frontend && npm install canvas-confetti && npm install -D @types/canvas-confetti
+```
+
+- [ ] **Step 2: Create useRevealQueue hook**
+
+Create `frontend/src/hooks/useRevealQueue.ts`:
+
+```ts
+import { useState, useEffect } from 'react';
+import { Match } from '../api/client';
+
+const SEEN_KEY = 'tippspiel_seen_results';
+
+function getSeenIds(): Set
{
+ try {
+ return new Set(JSON.parse(localStorage.getItem(SEEN_KEY) || '[]'));
+ } catch { return new Set(); }
+}
+
+function markSeen(matchId: number) {
+ const seen = getSeenIds();
+ seen.add(matchId);
+ localStorage.setItem(SEEN_KEY, JSON.stringify([...seen]));
+}
+
+export function useRevealQueue(matches: Match[]) {
+ const [queue, setQueue] = useState([]);
+
+ useEffect(() => {
+ const seen = getSeenIds();
+ const unseen = matches.filter(
+ m => m.status === 'FINISHED' && m.userTip && m.userTip.points !== null && !seen.has(m.id)
+ );
+ setQueue(unseen);
+ }, [matches]);
+
+ function dismissCurrent() {
+ if (queue.length === 0) return;
+ markSeen(queue[0].id);
+ setQueue(q => q.slice(1));
+ }
+
+ return { current: queue[0] || null, remaining: queue.length, dismissCurrent };
+}
+```
+
+- [ ] **Step 3: Create ConfettiReveal component**
+
+Create `frontend/src/components/ConfettiReveal.tsx`:
+
+```tsx
+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 resultClass = points === 3 ? styles.exact : points === 1 ? styles.tendency : styles.wrong;
+
+ return (
+
+
e.stopPropagation()}>
+
+ {match.homeTeam.shortName} {match.score.home}:{match.score.away} {match.awayTeam.shortName}
+
+
+ Dein Tipp: {tip.home}:{tip.away}
+
+
+ {points} {points === 1 ? 'Punkt' : 'Punkte'}
+
+
{resultLabel}
+
+
+
+ {message}
+
+ );
+}
+```
+
+Style: fixed top, centered, glassmorphism background, slide-in from top animation, auto-dismiss after 5s.
+
+- [ ] **Step 3: Wire into App.tsx**
+
+```tsx
+import Toast from './components/Toast';
+import { useRankChange } from './hooks/useRankChange';
+
+// Inside App():
+const { message: rankMsg, dismiss: dismissRank } = useRankChange();
+
+// In JSX, after :
+{rankMsg && }
+```
+
+- [ ] **Step 4: Build and commit**
+
+```bash
+cd frontend && npm run build
+git add -A && git commit -m "feat: rank change toast notifications
+
+Shows toast on app open when rank changed since last visit.
+Auto-dismisses after 5 seconds. Tracks last rank in localStorage."
+```
+
+---
+
+## Task 11: Streak Tracker UI
+
+Display streak on dashboard (already done via API) and profile page. Add streak break nudge.
+
+**Files:**
+- Modify: `frontend/src/pages/DashboardPage.tsx` (already has streak in stats)
+- Modify: `frontend/src/pages/ProfilePage.tsx` (add streak display)
+
+- [ ] **Step 1: Add streak milestone icons**
+
+Create a helper used in DashboardPage and ProfilePage:
+
+```tsx
+function streakDisplay(streak: number): string {
+ if (streak >= 20) return `⚡${streak}`;
+ if (streak >= 10) return `🔥🔥${streak}`;
+ if (streak >= 3) return `🔥${streak}`;
+ return String(streak);
+}
+```
+
+- [ ] **Step 2: Show streak on profile**
+
+In `ProfilePage.tsx`, fetch streak from dashboard endpoint and display prominently near the stats ring.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add -A && git commit -m "feat: streak tracker UI with milestone icons
+
+Streak displayed on dashboard stats and profile.
+Milestones: 🔥 at 3, 🔥🔥 at 10, ⚡ at 20."
+```
+
+---
+
+## Task 12: Rich Profile Page
+
+Redesign ProfilePage with stats ring, tip history, and fun stats.
+
+**Files:**
+- Create: `frontend/src/components/StatsRing.tsx`
+- Create: `frontend/src/components/StatsRing.module.css`
+- Modify: `frontend/src/pages/ProfilePage.tsx`
+- Modify: `frontend/src/pages/ProfilePage.module.css`
+
+- [ ] **Step 1: Create StatsRing SVG component**
+
+Create `frontend/src/components/StatsRing.tsx` — a donut chart using SVG `` with `stroke-dasharray`:
+
+```tsx
+interface Props {
+ exact: number;
+ tendency: number;
+ wrong: number;
+ total: number;
+}
+
+export default function StatsRing({ exact, tendency, wrong, total }: Props) {
+ const radius = 60;
+ const circumference = 2 * Math.PI * radius;
+ const all = exact + tendency + wrong || 1;
+
+ const segments = [
+ { value: exact / all, color: 'var(--gold)', label: 'Exakt' },
+ { value: tendency / all, color: 'var(--success)', label: 'Tendenz' },
+ { value: wrong / all, color: 'var(--error)', label: 'Falsch' },
+ ];
+
+ let offset = 0;
+
+ return (
+
+
+
+ {segments.map((seg, i) => (
+
+
+ {seg.label}
+
+ ))}
+
+