diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css index 8c12281..b20a722 100644 --- a/frontend/src/pages/DashboardPage.module.css +++ b/frontend/src/pages/DashboardPage.module.css @@ -308,6 +308,20 @@ color: var(--gold); } +.rankUp { + font-size: 0.7rem; + color: var(--success); + margin-left: 4px; + font-weight: 700; +} + +.rankDown { + font-size: 0.7rem; + color: var(--error); + margin-left: 4px; + font-weight: 700; +} + .statLabel { display: block; font-size: 0.65rem; @@ -360,6 +374,10 @@ line-height: 1.4; } +.nudgeStreak { + border-left: 3px solid var(--error) !important; +} + /* ═══════════════════════════════════════ STATES ═══════════════════════════════════════ */ diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx index 7818fa3..fde0150 100644 --- a/frontend/src/pages/DashboardPage.tsx +++ b/frontend/src/pages/DashboardPage.tsx @@ -49,6 +49,21 @@ export default function DashboardPage(_props: Props) { const { hero, stats, nudges } = data; + const lastRank = parseInt(localStorage.getItem('tippspiel_last_rank') || '0'); + const rankDiff = lastRank > 0 && stats.rank !== null ? lastRank - stats.rank : 0; + + // Streak break detection via localStorage + const STREAK_KEY = 'tippspiel_last_streak'; + const lastStreak = parseInt(localStorage.getItem(STREAK_KEY) || '0'); + const streakBroken = lastStreak >= 3 && stats.streak === 0; + + // Keep stored streak up to date when active + useEffect(() => { + if (stats.streak > 0) { + localStorage.setItem(STREAK_KEY, String(stats.streak)); + } + }, [stats.streak]); + return (
{/* Hero Card */} @@ -140,7 +155,11 @@ export default function DashboardPage(_props: Props) { {/* Stats Row */}
- {stats.rank !== null ? stats.rank : '—'} + + {stats.rank !== null ? stats.rank : '—'} + {rankDiff > 0 && ↑{rankDiff}} + {rankDiff < 0 && ↓{Math.abs(rankDiff)}} + Dein Rang