feat: Ergebnis-Banner, Dev-Simulations-Panel & Spiele-Reset
- MatchCard: farbiger Ergebnis-Banner (Exakt/Tendenz/Falsch) ersetzt tipRow, passender Card-Glow je Ergebnis; Lucide-Icons (lucide-react) - MatchCard: Ändern-Button links, vertikal mittig zur Tipp-Box ausgerichtet - DevPanel: Simulationsmodus mit User-Switcher, Zeit- & Status-Presets - DevPanel: Reset-Section mit "Spiel zurücksetzen", "Alle Spiele" und "Tipps löschen" (3 Buttons, farblich differenziert) - Backend: dev.ts mit set-time, set-status, reset-tips, reset-match - reset-match stellt Original-Datum wieder her (original_utc_date Spalte) - set-time sichert Original-Datum per COALESCE beim ersten Aufruf - Supabase Migration: original_utc_date TIMESTAMPTZ zu matches hinzugefügt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ronny
@@ -39,6 +39,17 @@
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.devBadge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
background: rgba(254,174,50,0.1);
|
||||
border: 1px solid rgba(254,174,50,0.25);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
+56
-3
@@ -1,3 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Routes, Route, NavLink } from 'react-router-dom';
|
||||
import MatchesPage from './pages/MatchesPage';
|
||||
import LeaderboardPage from './pages/LeaderboardPage';
|
||||
@@ -5,7 +6,47 @@ import ProfilePage from './pages/ProfilePage';
|
||||
import AdminPage from './pages/AdminPage';
|
||||
import styles from './App.module.css';
|
||||
|
||||
const IS_DEV = import.meta.env.DEV;
|
||||
|
||||
// Lazy-load DevPanel nur in Development
|
||||
let DevPanel: React.ComponentType<any> | null = null;
|
||||
if (IS_DEV) {
|
||||
// Dynamic import — kein Bundle-Impact in Production
|
||||
import('./components/DevPanel').then(m => { DevPanel = m.default; });
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [devUser, setDevUser] = useState(1);
|
||||
const [devMatches, setDevMatches] = useState<any[]>([]);
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
|
||||
// DevUser als Query-Parameter im API-Fetch setzen
|
||||
useEffect(() => {
|
||||
if (!IS_DEV) return;
|
||||
// Patch fetch für Dev-Mode: devUser Query-Param anhängen
|
||||
const origFetch = window.fetch;
|
||||
window._devUser = devUser;
|
||||
window.fetch = (input, init) => {
|
||||
if (typeof input === 'string' && input.startsWith('/api')) {
|
||||
const url = new URL(input, window.location.origin);
|
||||
url.searchParams.set('devUser', String(window._devUser ?? 1));
|
||||
return origFetch(url.toString(), init);
|
||||
}
|
||||
return origFetch(input, init);
|
||||
};
|
||||
return () => { window.fetch = origFetch; };
|
||||
}, [devUser]);
|
||||
|
||||
// Matches für DevPanel laden
|
||||
useEffect(() => {
|
||||
if (!IS_DEV) return;
|
||||
fetch('/api/matches').then(r => r.json()).then(d => setDevMatches(d.matches ?? [])).catch(() => {});
|
||||
}, [refreshKey, devUser]);
|
||||
|
||||
function handleDevRefresh() {
|
||||
setRefreshKey(k => k + 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.app}>
|
||||
<header className={styles.header}>
|
||||
@@ -13,6 +54,9 @@ export default function App() {
|
||||
<div className={styles.logo}>
|
||||
<span className={styles.logoFlag}>🏆</span>
|
||||
<span className={styles.logoText}>WM 2026 Tippspiel</span>
|
||||
{IS_DEV && (
|
||||
<span className={styles.devBadge}>DEV · User {devUser}</span>
|
||||
)}
|
||||
</div>
|
||||
<nav className={styles.nav}>
|
||||
<NavLink to="/" end className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
|
||||
@@ -33,12 +77,21 @@ export default function App() {
|
||||
|
||||
<main className={styles.main}>
|
||||
<Routes>
|
||||
<Route path="/" element={<MatchesPage />} />
|
||||
<Route path="/rangliste" element={<LeaderboardPage />} />
|
||||
<Route path="/profil" element={<ProfilePage />} />
|
||||
<Route path="/" element={<MatchesPage key={refreshKey} devUser={devUser} />} />
|
||||
<Route path="/rangliste" element={<LeaderboardPage key={refreshKey} />} />
|
||||
<Route path="/profil" element={<ProfilePage key={refreshKey} />} />
|
||||
<Route path="/admin" element={<AdminPage />} />
|
||||
</Routes>
|
||||
</main>
|
||||
|
||||
{IS_DEV && DevPanel && (
|
||||
<DevPanel
|
||||
currentUser={devUser}
|
||||
onUserChange={(u: number) => { setDevUser(u); setRefreshKey(k => k + 1); }}
|
||||
matches={devMatches}
|
||||
onRefresh={handleDevRefresh}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
/* Dev Panel — floating bottom right */
|
||||
.wrap {
|
||||
position: fixed;
|
||||
bottom: 80px; /* über der Nav-Bar */
|
||||
right: 16px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toggleBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 24px;
|
||||
background: rgba(254,174,50,0.15);
|
||||
border: 1px solid rgba(254,174,50,0.3);
|
||||
color: var(--gold);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.toggleBtn:hover { background: rgba(254,174,50,0.25); }
|
||||
.toggleLabel { font-size: 12px; }
|
||||
|
||||
/* Panel */
|
||||
.panel {
|
||||
width: 300px;
|
||||
background: #111827;
|
||||
border: 1px solid rgba(254,174,50,0.2);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panelHeader {
|
||||
padding: 12px 16px;
|
||||
background: rgba(254,174,50,0.08);
|
||||
border-bottom: 1px solid rgba(254,174,50,0.15);
|
||||
}
|
||||
|
||||
.panelTitle {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section:last-child { border-bottom: none; }
|
||||
|
||||
.sectionDisabled { opacity: 0.4; pointer-events: none; }
|
||||
|
||||
.sectionLabel {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* User buttons */
|
||||
.userButtons { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
.userBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface-high);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
.userBtn:hover { border-color: rgba(75,183,248,0.3); }
|
||||
.userBtnActive {
|
||||
background: rgba(75,183,248,0.12);
|
||||
border-color: rgba(75,183,248,0.4);
|
||||
}
|
||||
|
||||
.userInitial {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-dim);
|
||||
color: var(--primary);
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.userBtnActive .userInitial { background: rgba(75,183,248,0.2); }
|
||||
|
||||
.userName { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
|
||||
.userRole { font-size: 10px; color: var(--text-muted); }
|
||||
|
||||
/* Select */
|
||||
.select {
|
||||
width: 100%;
|
||||
background: var(--surface-high);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
.select:focus { border-color: var(--primary); }
|
||||
|
||||
/* Preset grid */
|
||||
.presetGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.presetBtn {
|
||||
padding: 7px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-high);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: center;
|
||||
}
|
||||
.presetBtn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
|
||||
.presetBtn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.presetBtnLive { color: var(--error) !important; border-color: rgba(248,113,113,0.2) !important; }
|
||||
.presetBtnDanger { color: #34D399 !important; border-color: rgba(52,211,153,0.2) !important; }
|
||||
|
||||
/* Reset */
|
||||
.resetGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Tipps-löschen nimmt volle Breite (dritte Zeile) */
|
||||
.resetBtnTips {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.resetBtn {
|
||||
padding: 8px 6px;
|
||||
border-radius: 8px;
|
||||
background: rgba(75,183,248,0.08);
|
||||
border: 1px solid rgba(75,183,248,0.18);
|
||||
color: var(--primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.resetBtn:hover:not(:disabled) { background: rgba(75,183,248,0.16); }
|
||||
.resetBtn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
/* "Alle Spiele" — etwas warnender */
|
||||
.resetBtnAll {
|
||||
background: rgba(254,174,50,0.08);
|
||||
border-color: rgba(254,174,50,0.2);
|
||||
color: var(--gold);
|
||||
}
|
||||
.resetBtnAll:hover:not(:disabled) { background: rgba(254,174,50,0.16); }
|
||||
|
||||
/* Tipps löschen — rot */
|
||||
.resetBtnTips {
|
||||
background: rgba(248,113,113,0.08);
|
||||
border-color: rgba(248,113,113,0.18);
|
||||
color: var(--error);
|
||||
}
|
||||
.resetBtnTips:hover:not(:disabled) { background: rgba(248,113,113,0.18); }
|
||||
|
||||
/* Log */
|
||||
.log {
|
||||
padding: 10px 16px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.logLine {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
import { useState } from 'react';
|
||||
import { api, Match } from '../api/client';
|
||||
import styles from './DevPanel.module.css';
|
||||
|
||||
const DEV_USERS = [
|
||||
{ id: 1, name: 'Ronny M.', role: 'Editor' },
|
||||
{ id: 2, name: 'Max M.', role: 'Viewer' },
|
||||
{ id: 3, name: 'Anna S.', role: 'Viewer' },
|
||||
];
|
||||
|
||||
const TIME_PRESETS = [
|
||||
{ label: 'In 2 Std.', minutes: 120 },
|
||||
{ label: 'In 10 Min.', minutes: 10 },
|
||||
{ label: 'Jetzt +1 Min.', minutes: 1 },
|
||||
{ label: 'Läuft (−30)', minutes: -30 },
|
||||
{ label: 'Beendet (−120)', minutes: -120 },
|
||||
];
|
||||
|
||||
const STATUS_PRESETS = [
|
||||
{ label: 'TIMED', status: 'TIMED', scoreHome: null, scoreAway: null },
|
||||
{ label: 'LIVE', status: 'IN_PLAY', scoreHome: 0, scoreAway: 0 },
|
||||
{ label: 'Pause', status: 'PAUSED', scoreHome: 1, scoreAway: 0 },
|
||||
{ label: '2:1 Fertig', status: 'FINISHED', scoreHome: 2, scoreAway: 1 },
|
||||
{ label: '0:0 Fertig', status: 'FINISHED', scoreHome: 0, scoreAway: 0 },
|
||||
];
|
||||
|
||||
interface Props {
|
||||
currentUser: number;
|
||||
onUserChange: (userId: number) => void;
|
||||
matches: Match[];
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
export default function DevPanel({ currentUser, onUserChange, matches, onRefresh }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedMatch, setSelectedMatch] = useState<number | ''>('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [log, setLog] = useState<string[]>([]);
|
||||
|
||||
function addLog(msg: string) {
|
||||
setLog(prev => [`${new Date().toLocaleTimeString('de-DE')} ${msg}`, ...prev].slice(0, 8));
|
||||
}
|
||||
|
||||
async function applyTime(minutes: number) {
|
||||
if (!selectedMatch) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await fetch(`/api/dev/match/${selectedMatch}/set-time`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ minutesFromNow: minutes }),
|
||||
});
|
||||
addLog(`✓ Spiel #${selectedMatch}: Zeit → ${minutes > 0 ? `+${minutes}` : minutes} Min.`);
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function applyStatus(status: string, scoreHome: number | null, scoreAway: number | null) {
|
||||
if (!selectedMatch) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await fetch(`/api/dev/match/${selectedMatch}/set-status`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status, scoreHome, scoreAway }),
|
||||
});
|
||||
addLog(`✓ Spiel #${selectedMatch}: Status → ${status}`);
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function resetTips() {
|
||||
setBusy(true);
|
||||
try {
|
||||
await fetch('/api/dev/reset-tips', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ userId: `dev-user-00${currentUser}` }),
|
||||
});
|
||||
addLog(`✓ Tipps von User ${currentUser} gelöscht`);
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function resetMatch(all: boolean) {
|
||||
setBusy(true);
|
||||
try {
|
||||
const body = all ? {} : { matchId: selectedMatch };
|
||||
const res = await fetch('/api/dev/reset-match', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await res.json() as { count?: number; matchId?: number };
|
||||
if (all) {
|
||||
addLog(`✓ ${data.count ?? 0} Spiele zurückgesetzt (TIMED)`);
|
||||
} else {
|
||||
addLog(`✓ Spiel #${selectedMatch} zurückgesetzt (TIMED)`);
|
||||
}
|
||||
onRefresh();
|
||||
} catch (e) {
|
||||
addLog(`✗ Fehler: ${(e as Error).message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Nur erste 20 Spiele zur Auswahl anbieten
|
||||
const selectableMatches = matches.slice(0, 20);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
{/* Toggle Button */}
|
||||
<button className={styles.toggleBtn} onClick={() => setOpen(o => !o)}>
|
||||
{open ? '✕' : '🧪'} {!open && <span className={styles.toggleLabel}>Dev</span>}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className={styles.panel}>
|
||||
<div className={styles.panelHeader}>
|
||||
<span className={styles.panelTitle}>🧪 Simulations-Modus</span>
|
||||
</div>
|
||||
|
||||
{/* User Switcher */}
|
||||
<section className={styles.section}>
|
||||
<div className={styles.sectionLabel}>Aktiver User</div>
|
||||
<div className={styles.userButtons}>
|
||||
{DEV_USERS.map(u => (
|
||||
<button
|
||||
key={u.id}
|
||||
className={`${styles.userBtn} ${currentUser === u.id ? styles.userBtnActive : ''}`}
|
||||
onClick={() => {
|
||||
onUserChange(u.id);
|
||||
addLog(`→ Wechsel zu User ${u.id}: ${u.name}`);
|
||||
}}
|
||||
>
|
||||
<span className={styles.userInitial}>{u.name.charAt(0)}</span>
|
||||
<span className={styles.userName}>{u.name}</span>
|
||||
<span className={styles.userRole}>{u.role}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Match Selector */}
|
||||
<section className={styles.section}>
|
||||
<div className={styles.sectionLabel}>Spiel auswählen</div>
|
||||
<select
|
||||
className={styles.select}
|
||||
value={selectedMatch}
|
||||
onChange={e => setSelectedMatch(e.target.value ? parseInt(e.target.value) : '')}
|
||||
>
|
||||
<option value="">— Spiel wählen —</option>
|
||||
{selectableMatches.map(m => (
|
||||
<option key={m.id} value={m.id}>
|
||||
#{m.id} {m.homeTeam.shortName} vs {m.awayTeam.shortName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</section>
|
||||
|
||||
{/* Zeit-Manipulation */}
|
||||
<section className={`${styles.section} ${!selectedMatch ? styles.sectionDisabled : ''}`}>
|
||||
<div className={styles.sectionLabel}>Anstoßzeit setzen</div>
|
||||
<div className={styles.presetGrid}>
|
||||
{TIME_PRESETS.map(p => (
|
||||
<button
|
||||
key={p.label}
|
||||
className={styles.presetBtn}
|
||||
onClick={() => applyTime(p.minutes)}
|
||||
disabled={!selectedMatch || busy}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Status-Manipulation */}
|
||||
<section className={`${styles.section} ${!selectedMatch ? styles.sectionDisabled : ''}`}>
|
||||
<div className={styles.sectionLabel}>Status setzen</div>
|
||||
<div className={styles.presetGrid}>
|
||||
{STATUS_PRESETS.map(p => (
|
||||
<button
|
||||
key={p.label}
|
||||
className={`${styles.presetBtn} ${p.status === 'FINISHED' ? styles.presetBtnDanger : p.status === 'IN_PLAY' ? styles.presetBtnLive : ''}`}
|
||||
onClick={() => applyStatus(p.status, p.scoreHome, p.scoreAway)}
|
||||
disabled={!selectedMatch || busy}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Reset */}
|
||||
<section className={styles.section}>
|
||||
<div className={styles.sectionLabel}>Zurücksetzen</div>
|
||||
<div className={styles.resetGrid}>
|
||||
<button
|
||||
className={styles.resetBtn}
|
||||
onClick={() => resetMatch(false)}
|
||||
disabled={!selectedMatch || busy}
|
||||
title="Ausgewähltes Spiel auf TIMED zurücksetzen"
|
||||
>
|
||||
↺ Spiel zurücksetzen
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.resetBtn} ${styles.resetBtnAll}`}
|
||||
onClick={() => resetMatch(true)}
|
||||
disabled={busy}
|
||||
title="Alle laufenden/beendeten Spiele zurücksetzen"
|
||||
>
|
||||
↺ Alle Spiele
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.resetBtn} ${styles.resetBtnTips}`}
|
||||
onClick={resetTips}
|
||||
disabled={busy}
|
||||
>
|
||||
🗑 Tipps löschen
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Log */}
|
||||
{log.length > 0 && (
|
||||
<div className={styles.log}>
|
||||
{log.map((l, i) => <div key={i} className={styles.logLine}>{l}</div>)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -183,6 +183,13 @@
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Wenn tipRow zum Banner wird */
|
||||
.tipRow.resultBanner {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.tipBtn {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
@@ -191,20 +198,36 @@
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Existing tip display */
|
||||
/* Existing tip display — 3-column grid so center stays centered */
|
||||
.tipDisplay {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tipLeft { display: flex; justify-content: flex-start; align-items: center; }
|
||||
.tipRight { display: flex; justify-content: flex-end; align-items: center; }
|
||||
|
||||
/* Banner-Variante: Icon + Label als Zeile */
|
||||
.bannerLeft {
|
||||
gap: 6px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.tipCenter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tipLabel {
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.tipScore {
|
||||
@@ -213,21 +236,90 @@
|
||||
font-size: 17px;
|
||||
color: var(--primary);
|
||||
background: var(--primary-dim);
|
||||
padding: 3px 12px;
|
||||
padding: 3px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(75,183,248,0.15);
|
||||
}
|
||||
|
||||
.points {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
/* ── Ergebnis-Banner ──────────────────────────────────────────── */
|
||||
.resultBanner {
|
||||
margin: 0 -24px -20px !important;
|
||||
padding: 10px 24px !important;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
|
||||
.exact { background: rgba(52,211,153,0.12); color: var(--success); border: 1px solid rgba(52,211,153,0.2); }
|
||||
.tendency { background: rgba(75,183,248,0.12); color: var(--primary); border: 1px solid rgba(75,183,248,0.2); }
|
||||
.wrong { background: rgba(248,113,113,0.10); color: var(--error); border: 1px solid rgba(248,113,113,0.15); }
|
||||
.resultIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resultLabel {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* tipScore-Variante im Banner: dunkler Hintergrund statt Primary-Blau */
|
||||
.tipScoreBanner {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 17px;
|
||||
padding: 3px 14px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0,0,0,0.18);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.resultPoints {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* Farb-Varianten Banner */
|
||||
.exact {
|
||||
background: linear-gradient(90deg, rgba(52,211,153,0.18) 0%, rgba(52,211,153,0.08) 100%);
|
||||
color: #4ade80;
|
||||
border-top: 1px solid rgba(52,211,153,0.20);
|
||||
}
|
||||
|
||||
.tendency {
|
||||
background: linear-gradient(90deg, rgba(75,183,248,0.18) 0%, rgba(75,183,248,0.08) 100%);
|
||||
color: var(--primary);
|
||||
border-top: 1px solid rgba(75,183,248,0.20);
|
||||
}
|
||||
|
||||
.wrong {
|
||||
background: linear-gradient(90deg, rgba(248,113,113,0.15) 0%, rgba(248,113,113,0.06) 100%);
|
||||
color: var(--error);
|
||||
border-top: 1px solid rgba(248,113,113,0.18);
|
||||
}
|
||||
|
||||
/* Card-Glow je Ergebnis */
|
||||
.glowExact {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(52,211,153,0.18),
|
||||
0 10px 30px rgba(52,211,153,0.07),
|
||||
inset 0 1px 0 rgba(255,255,255,0.07) !important;
|
||||
}
|
||||
|
||||
.glowTendency {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(75,183,248,0.18),
|
||||
0 10px 30px rgba(75,183,248,0.07),
|
||||
inset 0 1px 0 rgba(255,255,255,0.07) !important;
|
||||
}
|
||||
|
||||
.glowWrong {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(248,113,113,0.15),
|
||||
0 10px 30px rgba(248,113,113,0.05),
|
||||
inset 0 1px 0 rgba(255,255,255,0.07) !important;
|
||||
}
|
||||
|
||||
.editBtn {
|
||||
background: transparent;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { Check, TrendingUp, X } from 'lucide-react';
|
||||
import { Match } from '../api/client';
|
||||
import styles from './MatchCard.module.css';
|
||||
|
||||
@@ -47,9 +48,19 @@ export default function MatchCard({ match, onTip }: Props) {
|
||||
const isFinished = match.status === 'FINISHED';
|
||||
const isLive = match.status === 'IN_PLAY' || match.status === 'PAUSED';
|
||||
const hasTip = !!match.userTip;
|
||||
const points = match.userTip?.points ?? null;
|
||||
const resultClass =
|
||||
points === 3 ? styles.exact :
|
||||
points === 1 ? styles.tendency :
|
||||
(points === 0 && isFinished) ? styles.wrong : '';
|
||||
|
||||
const glowClass =
|
||||
isFinished && points === 3 ? styles.glowExact :
|
||||
isFinished && points === 1 ? styles.glowTendency :
|
||||
isFinished && points === 0 ? styles.glowWrong : '';
|
||||
|
||||
return (
|
||||
<div className={`card ${styles.card} ${isLive ? styles.live : ''}`}>
|
||||
<div className={`card ${styles.card} ${isLive ? styles.live : ''} ${glowClass}`}>
|
||||
|
||||
{/* Top row: Status / Kickoff / Badges */}
|
||||
<div className={styles.topRow}>
|
||||
@@ -92,27 +103,56 @@ export default function MatchCard({ match, onTip }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tipp area */}
|
||||
<div className={styles.tipRow}>
|
||||
{/* Tipp area — wird zum farbigen Banner wenn Punkte ausgewertet */}
|
||||
<div className={`${styles.tipRow} ${hasTip && points !== null ? `${styles.resultBanner} ${resultClass}` : ''}`}>
|
||||
{hasTip ? (
|
||||
<div className={styles.tipDisplay}>
|
||||
<span className={styles.tipLabel}>Dein Tipp</span>
|
||||
<span className={styles.tipScore}>
|
||||
{match.userTip!.home} : {match.userTip!.away}
|
||||
</span>
|
||||
{match.userTip!.points !== null && (
|
||||
<span className={`${styles.points} ${
|
||||
match.userTip!.points === 3 ? styles.exact :
|
||||
match.userTip!.points === 1 ? styles.tendency : styles.wrong
|
||||
}`}>
|
||||
{match.userTip!.points === 3 ? '🎯 3 Punkte' :
|
||||
match.userTip!.points === 1 ? '✓ 1 Punkt' : '✗ 0 Punkte'}
|
||||
</span>
|
||||
)}
|
||||
{match.tippable && (
|
||||
<button className={styles.editBtn} onClick={onTip}>Ändern</button>
|
||||
)}
|
||||
</div>
|
||||
points !== null ? (
|
||||
/* ── Auswertungs-Banner ── */
|
||||
<div className={styles.tipDisplay}>
|
||||
{/* Links: Icon + Ergebnis-Label nebeneinander, zentriert zur Tippbox */}
|
||||
<div className={`${styles.tipLeft} ${styles.bannerLeft}`}>
|
||||
<span className={styles.resultIcon}>
|
||||
{points === 3 ? <Check size={14} strokeWidth={3} /> :
|
||||
points === 1 ? <TrendingUp size={14} strokeWidth={2.5} /> :
|
||||
<X size={14} strokeWidth={3} />}
|
||||
</span>
|
||||
<span className={styles.resultLabel}>
|
||||
{points === 3 ? 'Exakt' : points === 1 ? 'Tendenz' : 'Falsch'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Mitte: nur Score, kein Label */}
|
||||
<div className={styles.tipCenter}>
|
||||
<span className={styles.tipScoreBanner}>
|
||||
{match.userTip!.home} : {match.userTip!.away}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Rechts: Punkte */}
|
||||
<div className={styles.tipRight}>
|
||||
<span className={styles.resultPoints}>
|
||||
{points === 0 ? '0 Pkt.' : `+${points} Pkt.`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* ── Tipp vorhanden, noch nicht ausgewertet ── */
|
||||
<div className={styles.tipDisplay}>
|
||||
<div className={styles.tipLeft}>
|
||||
{match.tippable && (
|
||||
<button className={styles.editBtn} onClick={onTip}>Ändern</button>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.tipCenter}>
|
||||
{/* Label nur zeigen wenn kein Ändern-Button da ist, sonst fluchtet der Button nicht */}
|
||||
{!match.tippable && <span className={styles.tipLabel}>DEIN TIPP</span>}
|
||||
<span className={styles.tipScore}>
|
||||
{match.userTip!.home} : {match.userTip!.away}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.tipRight} />
|
||||
</div>
|
||||
)
|
||||
) : match.tippable ? (
|
||||
<button className={`btn-primary ${styles.tipBtn}`} onClick={onTip}>
|
||||
Tipp abgeben
|
||||
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
interface Window {
|
||||
_devUser?: number;
|
||||
}
|
||||
@@ -52,6 +52,34 @@
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Gruppen-Filter (zweite Ebene) */
|
||||
.groupFilters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 4px 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.groupFilter, .groupFilterActive {
|
||||
padding: 5px 13px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.groupFilter:hover { border-color: rgba(75,183,248,0.3); color: var(--text-secondary); }
|
||||
.groupFilterActive {
|
||||
background: rgba(75,183,248,0.12);
|
||||
border-color: rgba(75,183,248,0.25);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.dayGroup { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
.dayHeader {
|
||||
@@ -62,6 +90,18 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.todayDot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 6px rgba(75,183,248,0.6);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.matchList { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { api, Match } from '../api/client';
|
||||
import MatchCard from '../components/MatchCard';
|
||||
import TipModal from '../components/TipModal';
|
||||
@@ -7,37 +7,54 @@ import styles from './MatchesPage.module.css';
|
||||
const STAGES: { key: string; label: string }[] = [
|
||||
{ key: '', label: 'Alle' },
|
||||
{ key: 'GROUP_STAGE', label: 'Gruppenphase' },
|
||||
{ key: 'ROUND_OF_32', label: 'Runde der 32' },
|
||||
{ key: 'ROUND_OF_16', label: 'Achtelfinale' },
|
||||
{ key: 'LAST_32', label: 'Runde der 32' },
|
||||
{ key: 'LAST_16', label: 'Achtelfinale' },
|
||||
{ key: 'QUARTER_FINALS', label: 'Viertelfinale' },
|
||||
{ key: 'SEMI_FINALS', label: 'Halbfinale' },
|
||||
{ key: 'THIRD_PLACE', label: 'Platz 3' },
|
||||
{ key: 'FINAL', label: 'Finale' },
|
||||
];
|
||||
|
||||
const GROUPS = ['A','B','C','D','E','F','G','H','I','J','K','L'];
|
||||
|
||||
export default function MatchesPage() {
|
||||
const [matches, setMatches] = useState<Match[]>([]);
|
||||
const [allMatches, setAllMatches] = useState<Match[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [stage, setStage] = useState('');
|
||||
const [group, setGroup] = useState('');
|
||||
const [selectedMatch, setSelectedMatch] = useState<Match | null>(null);
|
||||
const todayRef = useRef<HTMLDivElement | null>(null);
|
||||
const hasScrolled = useRef(false);
|
||||
|
||||
// Alle Spiele einmalig laden — Filterung passiert im Frontend
|
||||
const loadMatches = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await api.getMatches(stage ? { stage } : undefined);
|
||||
setMatches(res.matches);
|
||||
const res = await api.getMatches();
|
||||
setAllMatches(res.matches);
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [stage]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { loadMatches(); }, [loadMatches]);
|
||||
|
||||
// Auto-Scroll zum heutigen Datum nach dem ersten Laden
|
||||
useEffect(() => {
|
||||
if (!loading && !hasScrolled.current && todayRef.current && !stage) {
|
||||
hasScrolled.current = true;
|
||||
setTimeout(() => {
|
||||
todayRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 100);
|
||||
}
|
||||
}, [loading, stage]);
|
||||
|
||||
const handleTipSaved = (matchId: number, tipHome: number, tipAway: number) => {
|
||||
setMatches(prev => prev.map(m =>
|
||||
setAllMatches(prev => prev.map(m =>
|
||||
m.id === matchId
|
||||
? { ...m, userTip: { home: tipHome, away: tipAway, points: null } }
|
||||
: m
|
||||
@@ -45,19 +62,40 @@ export default function MatchesPage() {
|
||||
setSelectedMatch(null);
|
||||
};
|
||||
|
||||
// Spiele nach Datum gruppieren
|
||||
// Gefilterte Matches für aktuelle Ansicht
|
||||
const matches = allMatches
|
||||
.filter(m => !stage || m.stage === stage)
|
||||
.filter(m => !group || m.group === `GROUP_${group}`);
|
||||
|
||||
// Stats immer über alle Spiele (nicht gefiltert)
|
||||
const tipped = allMatches.filter(m => m.userTip).length;
|
||||
const tippable = allMatches.filter(m => m.tippable && !m.userTip).length;
|
||||
|
||||
// Verfügbare Gruppen für den aktiven Stage-Filter
|
||||
const availableGroups = stage === 'GROUP_STAGE'
|
||||
? [...new Set(allMatches
|
||||
.filter(m => m.stage === 'GROUP_STAGE' && m.group)
|
||||
.map(m => m.group!.replace('GROUP_', ''))
|
||||
)].sort()
|
||||
: [];
|
||||
|
||||
// Spiele nach Datum gruppieren (Gruppenphase) oder nach Gruppe (wenn Gruppe gewählt)
|
||||
const grouped = matches.reduce<Record<string, Match[]>>((acc, m) => {
|
||||
const day = new Date(m.utcDate).toLocaleDateString('de-DE', {
|
||||
weekday: 'long', day: 'numeric', month: 'long'
|
||||
});
|
||||
if (!acc[day]) acc[day] = [];
|
||||
acc[day].push(m);
|
||||
let key: string;
|
||||
if (stage === 'GROUP_STAGE' && !group) {
|
||||
// Gruppenphase ohne Gruppen-Filter: nach Gruppe gruppieren
|
||||
key = `Gruppe ${m.group?.replace('GROUP_', '') ?? '?'}`;
|
||||
} else {
|
||||
// Sonst nach Datum
|
||||
key = new Date(m.utcDate).toLocaleDateString('de-DE', {
|
||||
weekday: 'long', day: 'numeric', month: 'long'
|
||||
});
|
||||
}
|
||||
if (!acc[key]) acc[key] = [];
|
||||
acc[key].push(m);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const tipped = matches.filter(m => m.userTip).length;
|
||||
const tippable = matches.filter(m => m.tippable).length;
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
{/* Header Stats */}
|
||||
@@ -82,13 +120,34 @@ export default function MatchesPage() {
|
||||
<button
|
||||
key={s.key}
|
||||
className={stage === s.key ? styles.filterActive : styles.filter}
|
||||
onClick={() => setStage(s.key)}
|
||||
onClick={() => { setStage(s.key); setGroup(''); }}
|
||||
>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Gruppen-Filter (nur bei Gruppenphase) */}
|
||||
{availableGroups.length > 0 && (
|
||||
<div className={styles.groupFilters}>
|
||||
<button
|
||||
className={group === '' ? styles.groupFilterActive : styles.groupFilter}
|
||||
onClick={() => setGroup('')}
|
||||
>
|
||||
Alle Gruppen
|
||||
</button>
|
||||
{availableGroups.map(g => (
|
||||
<button
|
||||
key={g}
|
||||
className={group === g ? styles.groupFilterActive : styles.groupFilter}
|
||||
onClick={() => setGroup(g)}
|
||||
>
|
||||
Gruppe {g}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{loading && (
|
||||
<div className={styles.loadingState}>
|
||||
@@ -114,20 +173,56 @@ export default function MatchesPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && Object.entries(grouped).map(([day, dayMatches]) => (
|
||||
<div key={day} className={styles.dayGroup}>
|
||||
<h2 className={styles.dayHeader}>{day}</h2>
|
||||
<div className={styles.matchList}>
|
||||
{dayMatches.map(match => (
|
||||
<MatchCard
|
||||
key={match.id}
|
||||
match={match}
|
||||
onTip={() => setSelectedMatch(match)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{!loading && !error && (() => {
|
||||
const entries = Object.entries(grouped);
|
||||
if (stage === 'GROUP_STAGE' && !group) {
|
||||
entries.sort(([a], [b]) => a.localeCompare(b));
|
||||
}
|
||||
|
||||
const todayLabel = new Date().toLocaleDateString('de-DE', {
|
||||
weekday: 'long', day: 'numeric', month: 'long'
|
||||
});
|
||||
|
||||
// "Nächster bevorstehender Tag" als Fallback wenn kein heutiger Spieltag
|
||||
let scrollTarget: string | null = null;
|
||||
if (!stage) {
|
||||
if (entries.find(([l]) => l === todayLabel)) {
|
||||
scrollTarget = todayLabel;
|
||||
} else {
|
||||
const now = Date.now();
|
||||
const future = entries.find(([, ms]) => new Date(ms[0].utcDate).getTime() > now);
|
||||
scrollTarget = future?.[0] ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
return entries.map(([label, labelMatches]) => {
|
||||
const isScrollTarget = label === scrollTarget;
|
||||
return (
|
||||
<div
|
||||
key={label}
|
||||
className={styles.dayGroup}
|
||||
ref={isScrollTarget ? todayRef : null}
|
||||
>
|
||||
<h2 className={styles.dayHeader}>
|
||||
{label === todayLabel ? (
|
||||
<><span className={styles.todayDot} />Heute — {label}</>
|
||||
) : label}
|
||||
</h2>
|
||||
<div className={styles.matchList}>
|
||||
{labelMatches
|
||||
.sort((a, b) => new Date(a.utcDate).getTime() - new Date(b.utcDate).getTime())
|
||||
.map(match => (
|
||||
<MatchCard
|
||||
key={match.id}
|
||||
match={match}
|
||||
onTip={() => setSelectedMatch(match)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
|
||||
{selectedMatch && (
|
||||
<TipModal
|
||||
|
||||
Reference in New Issue
Block a user