feat: rich profile page with stats ring, tip history, fun stats
Donut chart showing exact/tendency/wrong distribution. Scrollable tip history with point badges. Fun stats: favorite tip, home win percentage. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ronny
@@ -1,23 +1,49 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { api, UserStats } from '../api/client';
|
||||
import { api, UserStats, MyTip } from '../api/client';
|
||||
import StatsRing from '../components/StatsRing';
|
||||
import styles from './ProfilePage.module.css';
|
||||
|
||||
function initials(name: string) {
|
||||
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
||||
}
|
||||
|
||||
function mostCommonTip(tips: MyTip[]): string {
|
||||
const counts: Record<string, number> = {};
|
||||
for (const t of tips) {
|
||||
const key = `${t.tip_home}:${t.tip_away}`;
|
||||
counts[key] = (counts[key] ?? 0) + 1;
|
||||
}
|
||||
let best = '';
|
||||
let max = 0;
|
||||
for (const [key, count] of Object.entries(counts)) {
|
||||
if (count > max) { max = count; best = key; }
|
||||
}
|
||||
return best ? `${best} (${max}x getippt)` : '—';
|
||||
}
|
||||
|
||||
function homeWinPct(tips: MyTip[]): number {
|
||||
if (!tips.length) return 0;
|
||||
const homeWins = tips.filter(t => t.tip_home > t.tip_away).length;
|
||||
return Math.round((homeWins / tips.length) * 100);
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [stats, setStats] = useState<UserStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [teamEdit, setTeamEdit] = useState(false);
|
||||
const [teamValue, setTeamValue] = useState('');
|
||||
const [stats, setStats] = useState<UserStats | null>(null);
|
||||
const [tips, setTips] = useState<MyTip[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [teamEdit, setTeamEdit] = useState(false);
|
||||
const [teamValue, setTeamValue] = useState('');
|
||||
const [teamSaving, setTeamSaving] = useState(false);
|
||||
const [teamMsg, setTeamMsg] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
const [teamMsg, setTeamMsg] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.getMyStats().then(s => {
|
||||
Promise.all([
|
||||
api.getMyStats(),
|
||||
api.getMyTips(),
|
||||
]).then(([s, t]) => {
|
||||
setStats(s);
|
||||
setTeamValue(s.team ?? '');
|
||||
setTips(t.tips);
|
||||
}).finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
@@ -41,19 +67,37 @@ export default function ProfilePage() {
|
||||
if (loading) return <div className={styles.loading}><div className={styles.spinner} /></div>;
|
||||
if (!stats) return <div className={styles.empty}>Profil nicht verfügbar.</div>;
|
||||
|
||||
const evaluated = stats.exactCount + stats.tendencyCount + stats.wrongCount;
|
||||
const evaluatedTips = tips.filter(t => t.points !== null);
|
||||
const recentTips = evaluatedTips.slice(0, 10);
|
||||
|
||||
const favTip = mostCommonTip(tips);
|
||||
const homePct = homeWinPct(tips);
|
||||
|
||||
function pointBadgeClass(points: number | null) {
|
||||
if (points === null) return '';
|
||||
if (points >= 3) return styles.badgeExact;
|
||||
if (points >= 1) return styles.badgeTendency;
|
||||
return styles.badgeWrong;
|
||||
}
|
||||
|
||||
function pointLabel(points: number | null) {
|
||||
if (points === null) return '';
|
||||
if (points >= 3) return `${points} Pkt ✓✓`;
|
||||
if (points >= 1) return `${points} Pkt ✓`;
|
||||
return `${points} Pkt ✗`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
|
||||
{/* Hero card */}
|
||||
{/* Header card */}
|
||||
<div className={`card ${styles.heroCard}`}>
|
||||
<div className={styles.avatar}>{initials(stats.fullName)}</div>
|
||||
<div className={styles.heroInfo}>
|
||||
<h1 className={`font-display ${styles.name}`}>{stats.fullName}</h1>
|
||||
{stats.rank && <div className={styles.rankBadge}>🏆 Platz {stats.rank}</div>}
|
||||
|
||||
{/* Team-Feld */}
|
||||
{/* Team field */}
|
||||
<div className={styles.teamRow}>
|
||||
{teamEdit ? (
|
||||
<div className={styles.teamEditRow}>
|
||||
@@ -64,12 +108,20 @@ export default function ProfilePage() {
|
||||
placeholder="z. B. Vertrieb Süd"
|
||||
maxLength={80}
|
||||
autoFocus
|
||||
onKeyDown={e => { if (e.key === 'Enter') saveTeam(); if (e.key === 'Escape') setTeamEdit(false); }}
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') saveTeam();
|
||||
if (e.key === 'Escape') setTeamEdit(false);
|
||||
}}
|
||||
/>
|
||||
<button className={styles.teamSaveBtn} onClick={saveTeam} disabled={teamSaving}>
|
||||
{teamSaving ? <span className={styles.spinnerSm} /> : '✓'}
|
||||
</button>
|
||||
<button className={styles.teamCancelBtn} onClick={() => { setTeamEdit(false); setTeamValue(stats.team ?? ''); }}>✕</button>
|
||||
<button
|
||||
className={styles.teamCancelBtn}
|
||||
onClick={() => { setTeamEdit(false); setTeamValue(stats.team ?? ''); }}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className={styles.teamBtn} onClick={() => setTeamEdit(true)}>
|
||||
@@ -86,49 +138,67 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.heroPoints}>
|
||||
<span className={`font-display ${styles.pointsVal}`}>{stats.totalPoints}</span>
|
||||
<span className={styles.pointsLbl}>Punkte</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats grid */}
|
||||
<div className={styles.statsGrid}>
|
||||
<div className={`card ${styles.statCard}`}>
|
||||
<span className={`font-display ${styles.statVal} text-gold`}>{stats.exactCount}</span>
|
||||
<span className={styles.statLbl}>🎯 Exakt</span>
|
||||
</div>
|
||||
<div className={`card ${styles.statCard}`}>
|
||||
<span className={`font-display ${styles.statVal} text-primary`}>{stats.tendencyCount}</span>
|
||||
<span className={styles.statLbl}>✓ Tendenz</span>
|
||||
</div>
|
||||
<div className={`card ${styles.statCard}`}>
|
||||
<span className={`font-display ${styles.statVal}`} style={{ color: 'var(--error)' }}>{stats.wrongCount}</span>
|
||||
<span className={styles.statLbl}>✗ Falsch</span>
|
||||
</div>
|
||||
<div className={`card ${styles.statCard}`}>
|
||||
<span className={`font-display ${styles.statVal}`}>{stats.tipsCount}</span>
|
||||
<span className={styles.statLbl}>Tipps gesamt</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accuracy bar */}
|
||||
{evaluated > 0 && (
|
||||
<div className={`card ${styles.accuracyCard}`}>
|
||||
<div className={styles.accuracyHeader}>
|
||||
{/* Stats donut ring */}
|
||||
<div className={`card ${styles.ringCard}`}>
|
||||
<h2 className={styles.sectionTitle}>Tipp-Statistik</h2>
|
||||
<StatsRing
|
||||
exact={stats.exactCount}
|
||||
tendency={stats.tendencyCount}
|
||||
wrong={stats.wrongCount}
|
||||
total={stats.totalPoints}
|
||||
/>
|
||||
{stats.accuracy > 0 && (
|
||||
<div className={styles.accuracyRow}>
|
||||
<span className={styles.accuracyLabel}>Trefferquote</span>
|
||||
<span className={`font-display ${styles.accuracyVal}`}>{stats.accuracy}%</span>
|
||||
</div>
|
||||
<div className={styles.bar}>
|
||||
<div className={`${styles.barFill} ${styles.exact}`}
|
||||
style={{ width: `${(stats.exactCount / evaluated) * 100}%` }} />
|
||||
<div className={`${styles.barFill} ${styles.tendency}`}
|
||||
style={{ width: `${(stats.tendencyCount / evaluated) * 100}%` }} />
|
||||
</div>
|
||||
<div className={styles.barLegend}>
|
||||
<span><span className={styles.dot} style={{ background: 'var(--gold)' }} /> Exakt</span>
|
||||
<span><span className={styles.dot} style={{ background: 'var(--primary)' }} /> Tendenz</span>
|
||||
<span><span className={styles.dot} style={{ background: 'var(--surface-high)' }} /> Falsch</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tip history */}
|
||||
{recentTips.length > 0 && (
|
||||
<div className={`card ${styles.historyCard}`}>
|
||||
<h2 className={styles.sectionTitle}>Letzte Tipps</h2>
|
||||
<ul className={styles.tipList}>
|
||||
{recentTips.map((tip, i) => (
|
||||
<li key={tip.match_id} className={`${styles.tipRow} ${i % 2 === 1 ? styles.tipRowAlt : ''}`}>
|
||||
<span className={styles.tipMatch}>
|
||||
{tip.home_team_short} vs {tip.away_team_short}
|
||||
</span>
|
||||
<span className={styles.tipScore}>
|
||||
Tipp: {tip.tip_home}:{tip.tip_away}
|
||||
</span>
|
||||
<span className={`${styles.pointBadge} ${pointBadgeClass(tip.points)}`}>
|
||||
{pointLabel(tip.points)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fun stats */}
|
||||
{tips.length > 0 && (
|
||||
<div className={styles.funStats}>
|
||||
<h2 className={styles.sectionTitle}>Fun Facts</h2>
|
||||
<div className={styles.funGrid}>
|
||||
<div className={`card ${styles.funCard}`}>
|
||||
<span className={styles.funIcon}>🎯</span>
|
||||
<span className={styles.funLabel}>Lieblings-Tipp</span>
|
||||
<span className={styles.funValue}>{favTip}</span>
|
||||
</div>
|
||||
<div className={`card ${styles.funCard}`}>
|
||||
<span className={styles.funIcon}>🏠</span>
|
||||
<span className={styles.funLabel}>Heimsiege getippt</span>
|
||||
<span className={styles.funValue}>{homePct}%</span>
|
||||
</div>
|
||||
<div className={`card ${styles.funCard}`}>
|
||||
<span className={styles.funIcon}>📊</span>
|
||||
<span className={styles.funLabel}>Tipps abgegeben</span>
|
||||
<span className={styles.funValue}>{stats.tipsCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user