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
@@ -0,0 +1,35 @@
|
||||
.ring {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.svg {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.legendItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import styles from './StatsRing.module.css';
|
||||
|
||||
interface Props {
|
||||
exact: number;
|
||||
tendency: number;
|
||||
wrong: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export default function StatsRing({ exact, tendency, wrong, total }: Props) {
|
||||
const radius = 55;
|
||||
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 (
|
||||
<div className={styles.ring}>
|
||||
<svg viewBox="0 0 140 140" className={styles.svg}>
|
||||
{/* Background circle */}
|
||||
<circle cx="70" cy="70" r={radius} fill="none" stroke="var(--surface-high)" strokeWidth="12" />
|
||||
{segments.map((seg, i) => {
|
||||
if (seg.value === 0) return null;
|
||||
const dashArray = `${seg.value * circumference} ${circumference}`;
|
||||
const rotation = offset * 360 - 90;
|
||||
offset += seg.value;
|
||||
return (
|
||||
<circle
|
||||
key={i}
|
||||
cx="70" cy="70" r={radius}
|
||||
fill="none"
|
||||
stroke={seg.color}
|
||||
strokeWidth="12"
|
||||
strokeDasharray={dashArray}
|
||||
transform={`rotate(${rotation} 70 70)`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<text x="70" y="65" textAnchor="middle" dominantBaseline="central"
|
||||
fill="var(--text-primary)" fontSize="28" fontWeight="700">
|
||||
{total}
|
||||
</text>
|
||||
<text x="70" y="85" textAnchor="middle"
|
||||
fill="var(--text-secondary)" fontSize="11">
|
||||
Punkte
|
||||
</text>
|
||||
</svg>
|
||||
<div className={styles.legend}>
|
||||
{segments.map((seg, i) => (
|
||||
<span key={i} className={styles.legendItem}>
|
||||
<span className={styles.dot} style={{ background: seg.color }} />
|
||||
{seg.label}: {Math.round(seg.value * all)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +1,42 @@
|
||||
/* ── Layout ── */
|
||||
.page { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
|
||||
|
||||
.loading { display: flex; justify-content: center; padding: 60px; }
|
||||
.spinner { width: 32px; height: 32px; border: 3px solid var(--surface-high); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||||
.spinnerSm { width: 14px; height: 14px; border: 2px solid var(--surface-high); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.empty { color: var(--text-secondary); padding: 40px; text-align: center; }
|
||||
|
||||
.heroCard { padding: 28px; display: flex; align-items: flex-start; gap: 20px; }
|
||||
.avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--primary-dim); border: 2px solid rgba(75,183,248,0.3); display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
|
||||
.heroInfo { flex: 1; min-width: 0; }
|
||||
.name { font-size: 22px; font-weight: 800; }
|
||||
.rankBadge { font-size: 13px; color: var(--gold); margin-top: 4px; font-weight: 600; }
|
||||
/* ── Header card ── */
|
||||
.heroCard {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Team-Feld */
|
||||
.teamRow { margin-top: 8px; }
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-dim);
|
||||
border: 2px solid rgba(75,183,248,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.heroInfo { flex: 1; min-width: 0; }
|
||||
.name { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
|
||||
.rankBadge { font-size: 13px; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
|
||||
|
||||
/* ── Team field ── */
|
||||
.teamRow { margin-top: 4px; }
|
||||
|
||||
.teamBtn {
|
||||
background: none;
|
||||
@@ -85,22 +109,122 @@
|
||||
.teamMsg { font-size: 12px; margin-top: 4px; }
|
||||
.teamMsgOk { color: var(--success); }
|
||||
.teamMsgErr { color: var(--error); }
|
||||
.heroPoints { text-align: right; }
|
||||
.pointsVal { font-size: 40px; font-weight: 800; color: var(--primary); line-height: 1; display: block; }
|
||||
.pointsLbl { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
|
||||
.statsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.statCard { padding: 20px; text-align: center; }
|
||||
.statVal { font-size: 36px; font-weight: 800; display: block; }
|
||||
.statLbl { font-size: 13px; color: var(--text-secondary); display: block; margin-top: 4px; }
|
||||
/* ── Section title ── */
|
||||
.sectionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.accuracyCard { padding: 24px; }
|
||||
.accuracyHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
|
||||
.accuracyLabel { font-size: 14px; color: var(--text-secondary); }
|
||||
.accuracyVal { font-size: 28px; font-weight: 800; color: var(--text-primary); }
|
||||
.bar { height: 10px; background: var(--surface-high); border-radius: 5px; overflow: hidden; display: flex; margin-bottom: 12px; }
|
||||
.barFill { height: 100%; transition: width 0.5s ease; }
|
||||
.exact { background: var(--gold); }
|
||||
.tendency { background: var(--primary); }
|
||||
.barLegend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); }
|
||||
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
|
||||
/* ── Stats ring card ── */
|
||||
.ringCard { padding: 20px 24px 16px; }
|
||||
|
||||
.accuracyRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--surface-high);
|
||||
}
|
||||
.accuracyLabel { font-size: 13px; color: var(--text-secondary); }
|
||||
.accuracyVal { font-size: 24px; font-weight: 800; color: var(--text-primary); }
|
||||
|
||||
/* ── Tip history ── */
|
||||
.historyCard { padding: 20px 0 8px; overflow: hidden; }
|
||||
.historyCard .sectionTitle { padding: 0 20px; }
|
||||
|
||||
.tipList {
|
||||
list-style: none;
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tipRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
font-size: 13px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tipRowAlt {
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
.tipMatch {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tipScore {
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pointBadge {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
background: var(--surface-high);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.badgeExact { background: rgba(255,196,0,0.15); color: var(--gold); }
|
||||
.badgeTendency { background: rgba(34,197,94,0.15); color: var(--success); }
|
||||
.badgeWrong { background: rgba(239,68,68,0.12); color: var(--error); }
|
||||
|
||||
/* ── Fun stats ── */
|
||||
.funStats { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
.funGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.funGrid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.funCard {
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.funIcon { font-size: 22px; line-height: 1; }
|
||||
|
||||
.funLabel {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.funValue {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,35 @@
|
||||
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 [tips, setTips] = useState<MyTip[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [teamEdit, setTeamEdit] = useState(false);
|
||||
const [teamValue, setTeamValue] = useState('');
|
||||
@@ -15,9 +37,13 @@ export default function ProfilePage() {
|
||||
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>
|
||||
|
||||
{/* 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 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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user