chore: cleanup — remove compiled .js files and .superpowers artifacts
Added frontend/src/**/*.js and .superpowers/ to .gitignore. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
@@ -26,3 +26,9 @@ backend/public/
|
|||||||
# Docs / local tools
|
# Docs / local tools
|
||||||
DEPLOY_DOCKER_TEST.md
|
DEPLOY_DOCKER_TEST.md
|
||||||
tools.yaml
|
tools.yaml
|
||||||
|
|
||||||
|
# Compiled JS in TypeScript source
|
||||||
|
frontend/src/**/*.js
|
||||||
|
|
||||||
|
# Superpowers brainstorm artifacts
|
||||||
|
.superpowers/
|
||||||
|
|||||||
@@ -1,87 +0,0 @@
|
|||||||
<h2>Neue Startseite: Dashboard statt Spielliste</h2>
|
|
||||||
<p class="subtitle">Aktuell sieht man 104 Spiele als endlose Liste. Die neue Startseite soll sofort zeigen: Was ist relevant für MICH, JETZT?</p>
|
|
||||||
|
|
||||||
<div class="cards">
|
|
||||||
|
|
||||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
|
||||||
<div class="card-image">
|
|
||||||
<div style="background: linear-gradient(135deg, #0a1628, #1a2744); border-radius: 12px; padding: 16px; font-family: system-ui; color: #e0e8f0; font-size: 13px;">
|
|
||||||
<div style="text-align:center; margin-bottom: 14px;">
|
|
||||||
<div style="font-size: 11px; color: #64b5f6; text-transform: uppercase; letter-spacing: 1px;">Nächstes Spiel · in 2h 14min</div>
|
|
||||||
<div style="display:flex; justify-content:center; align-items:center; gap: 20px; margin: 10px 0;">
|
|
||||||
<div style="text-align:center"><div style="font-size: 24px;">🇲🇽</div><div style="font-size: 11px;">Mexico</div></div>
|
|
||||||
<div style="font-size: 18px; font-weight: bold; color: #ffd54f;">vs</div>
|
|
||||||
<div style="text-align:center"><div style="font-size: 24px;">🇿🇦</div><div style="font-size: 11px;">S. Africa</div></div>
|
|
||||||
</div>
|
|
||||||
<div style="background: #1e3a5f; border-radius: 8px; padding: 8px; margin-top: 6px;">
|
|
||||||
<span style="color: #ffd54f; font-weight: bold;">Dein Tipp: 2:1</span> ✓
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px;">
|
|
||||||
<div style="background: #1e3a5f; border-radius: 8px; padding: 8px; text-align:center;">
|
|
||||||
<div style="font-size: 20px; font-weight: bold; color: #ffd54f;">5.</div>
|
|
||||||
<div style="font-size: 10px; color: #90a4ae;">Dein Rang</div>
|
|
||||||
</div>
|
|
||||||
<div style="background: #1e3a5f; border-radius: 8px; padding: 8px; text-align:center;">
|
|
||||||
<div style="font-size: 20px; font-weight: bold; color: #4fc3f7;">12</div>
|
|
||||||
<div style="font-size: 10px; color: #90a4ae;">Punkte</div>
|
|
||||||
</div>
|
|
||||||
<div style="background: #1e3a5f; border-radius: 8px; padding: 8px; text-align:center;">
|
|
||||||
<div style="font-size: 20px; font-weight: bold; color: #81c784;">3🔥</div>
|
|
||||||
<div style="font-size: 10px; color: #90a4ae;">Streak</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="font-size: 11px; color: #90a4ae; border-top: 1px solid #1e3a5f; padding-top: 8px;">
|
|
||||||
<div>📅 <strong>Heute noch 2 Spiele</strong> ohne Tipp</div>
|
|
||||||
<div style="margin-top: 4px;">🏆 Max führt mit 15 Punkten</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h3>A: Hero + Stats + Nudges</h3>
|
|
||||||
<p>Großes "Nächstes Spiel" oben, darunter persönliche Stats (Rang, Punkte, Streak), unten Handlungsaufforderungen und Social-Info. Kompakt, alles Wichtige auf einen Blick.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
|
||||||
<div class="card-image">
|
|
||||||
<div style="background: linear-gradient(135deg, #0a1628, #1a2744); border-radius: 12px; padding: 16px; font-family: system-ui; color: #e0e8f0; font-size: 13px;">
|
|
||||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px;">
|
|
||||||
<div><span style="font-size: 16px; font-weight: bold;">Hallo Ronny!</span><br><span style="font-size: 11px; color: #90a4ae;">Platz 5 · 12 Punkte</span></div>
|
|
||||||
<div style="background: #ffd54f; color: #0a1628; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: bold;">3🔥</div>
|
|
||||||
</div>
|
|
||||||
<div style="font-size: 11px; color: #64b5f6; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">⏰ Jetzt tippen</div>
|
|
||||||
<div style="background: #1e3a5f; border-radius: 10px; padding: 10px; margin-bottom: 6px;">
|
|
||||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
||||||
<span>🇲🇽 Mexico vs S. Africa 🇿🇦</span>
|
|
||||||
<span style="background: #e53935; color:white; border-radius: 12px; padding: 2px 8px; font-size: 10px;">2h 14m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="background: #1e3a5f; border-radius: 10px; padding: 10px; margin-bottom: 6px;">
|
|
||||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
||||||
<span>🇰🇷 S. Korea vs Croatia 🇭🇷</span>
|
|
||||||
<span style="background: #ff9800; color:white; border-radius: 12px; padding: 2px 8px; font-size: 10px;">5h 14m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="font-size: 11px; color: #64b5f6; text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 6px;">📊 Ergebnisse</div>
|
|
||||||
<div style="background: #1e3a5f; border-radius: 10px; padding: 10px;">
|
|
||||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
||||||
<span>🇧🇷 Brazil 3:1 Serbia 🇷🇸</span>
|
|
||||||
<span style="background: #4caf50; color:white; border-radius: 12px; padding: 2px 8px; font-size: 10px;">+3 🎯</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h3>B: Feed-Style Timeline</h3>
|
|
||||||
<p>Persönliche Begrüßung oben, dann chronologisch: erst offene Tipps (dringendste zuerst mit Countdown), dann letzte Ergebnisse mit Punkte-Badges. Wie ein persönlicher WM-Feed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section" style="margin-top: 24px;">
|
|
||||||
<h3>Beide Varianten ersetzen die 104-Spiele-Liste als Startseite</h3>
|
|
||||||
<p>Der komplette Spielplan bleibt erreichbar über "Alle Spiele" in der Navigation. Die Startseite wird zum persönlichen WM-Cockpit.</p>
|
|
||||||
</div></content>
|
|
||||||
</invoke>
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
<h2>Emotionale Momente: Wo die App "lebendig" wird</h2>
|
|
||||||
<p class="subtitle">5 Schlüsselmomente, in denen die App ein Lächeln erzeugen soll. Welche sind dir am wichtigsten?</p>
|
|
||||||
|
|
||||||
<div class="options" data-multiselect>
|
|
||||||
|
|
||||||
<div class="option" data-choice="tipp-confirm" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">1</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Tipp-Bestätigung</h3>
|
|
||||||
<p>Nach "Tipp bestätigen" kurze Erfolgsanimation: Card pulsiert grün, Häkchen fliegt rein, subtiles Haptic-Feedback (Vibration auf Mobile). Statt nur Modal schließen → <strong>"Dein Tipp ist drin! 🎯"</strong> mit sanfter Animation.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="countdown" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">2</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Live-Countdown vor Anpfiff</h3>
|
|
||||||
<p>Wenn ein Spiel in <1 Stunde startet: pulsierender roter Countdown auf der Match-Card. <strong>"Noch 12 Minuten zum Tippen!"</strong> — erzeugt Dringlichkeit und FOMO. Nach Anpfiff: "Tippfenster geschlossen" mit Schloss-Icon.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="punkte-reveal" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">3</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Punkte-Reveal nach Spielende</h3>
|
|
||||||
<p>Der stärkste Moment: Wenn ein Spiel auf FINISHED geht, <strong>Punkte nicht einfach anzeigen — enthüllen</strong>. Kurzsequenz: Ergebnis einblenden → "Dein Tipp war..." → Punkte-Zähler animiert hochzählen. Bei exaktem Treffer: 🎉 <strong>Konfetti-Explosion + goldener "EXAKT!"-Badge</strong>. Bei Tendenz: 👏 grüner Puls. Bei falsch: 😅 kurzes Kopfschütteln-Emoji.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="rang-change" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">4</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Ranglistenveränderung</h3>
|
|
||||||
<p>Wenn sich dein Rang ändert: <strong>"Du bist auf Platz 3 aufgestiegen! ⬆️"</strong> als Toast-Notification beim nächsten App-Öffnen. Oder: <strong>"Achtung, Anna ist nur noch 1 Punkt hinter dir!"</strong> — erzeugt freundschaftliche Rivalität.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="streak" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">5</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Streak-Tracker</h3>
|
|
||||||
<p>Visueller Feuer-Counter: <strong>🔥3</strong> wenn du 3 Spiele in Folge getippt hast (nicht korrekt, nur abgegeben). Motiviert zum Dranbleiben. Bei 10er-Streak: besonderes Icon. Wenn Streak bricht: <strong>"Deine 7er-Serie ist gerissen! Starte eine neue."</strong></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section" style="margin-top: 20px;">
|
|
||||||
<p><strong>Klicke auf alle Momente, die du umsetzen möchtest</strong> (Mehrfachauswahl möglich). Oder sag mir im Terminal, wenn du alle willst oder Änderungswünsche hast.</p>
|
|
||||||
</div>
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
<h2>Spielplan & Navigation: 104 Spiele im Griff</h2>
|
|
||||||
<p class="subtitle">Aktuell: endlose Liste mit Stage-Filter oben. Wie machen wir das besser für Mobile?</p>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h3>Spielplan-Struktur</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="options">
|
|
||||||
|
|
||||||
<div class="option" data-choice="smart-sections" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">A</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Smart Sections (Empfehlung)</h3>
|
|
||||||
<p>Spielplan automatisch in Abschnitte unterteilt:
|
|
||||||
<br><strong>"Heute"</strong> (expandiert, farbig hervorgehoben)
|
|
||||||
<br><strong>"Morgen"</strong> (expandiert)
|
|
||||||
<br><strong>"Diese Woche"</strong> (kollapsiert, Anzahl angezeigt)
|
|
||||||
<br><strong>"Vergangene Spiele"</strong> (kollapsiert, zeigt letzte Ergebnisse + deine Punkte)
|
|
||||||
<br><br>Kein manuelles Filtern nötig — die App weiß, was jetzt relevant ist. Stage-Filter (Gruppenphase, Achtelfinale...) bleiben als optionaler Zweitmodus.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="tabbed" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">B</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Tab-basiert</h3>
|
|
||||||
<p>Drei Haupt-Tabs am oberen Rand:
|
|
||||||
<br><strong>"Offen"</strong> — Spiele, die noch getippt werden können (nach Kick-off sortiert)
|
|
||||||
<br><strong>"Live"</strong> — Laufende Spiele mit Echtzeit-Status
|
|
||||||
<br><strong>"Ergebnisse"</strong> — Abgeschlossene Spiele mit Punkten
|
|
||||||
<br><br>Klar getrennt, aber weniger zeitlicher Kontext ("heute/morgen").</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section" style="margin-top: 32px;">
|
|
||||||
<h3>Mobile Navigation</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="options">
|
|
||||||
|
|
||||||
<div class="option" data-choice="bottom-nav" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">C</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Bottom Navigation Bar (Empfehlung)</h3>
|
|
||||||
<p>Feste Leiste am unteren Bildschirmrand mit Icons + Label:
|
|
||||||
<br>🏠 <strong>Home</strong> (Dashboard) · ⚽ <strong>Spiele</strong> · 🏆 <strong>Rangliste</strong> · 👤 <strong>Profil</strong>
|
|
||||||
<br><br>Standard-Pattern für Mobile-Apps (Staffbase, Instagram, etc.). Header wird schlank — nur Logo + evtl. Notification-Badge. Admin nur für Editoren sichtbar als Extra-Icon.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="keep-header" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">D</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Header-Nav beibehalten</h3>
|
|
||||||
<p>Bestehende Navigation oben lassen, aber scrollbar machen auf Mobile (horizontal swipe). Weniger Aufwand, aber der Header nimmt auf kleinen Screens viel Platz ein und ist weniger daumenfreundlich.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
<h2>Profil-Seite & Match-Cards aufwerten</h2>
|
|
||||||
<p class="subtitle">Zwei Bereiche, die aktuell etwas leblos wirken</p>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<h3>Profil-Seite: Von Nullen zu Persönlichkeit</h3>
|
|
||||||
<p>Aktuell: Name, Rang, 4 Stat-Boxen mit Nullen. Kein Grund hier wiederzukommen.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="options">
|
|
||||||
|
|
||||||
<div class="option" data-choice="profil-rich" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">A</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Reiches Profil (Empfehlung)</h3>
|
|
||||||
<p>
|
|
||||||
<strong>Header:</strong> Avatar (Initialen-Circle wie jetzt), Name, Rang-Badge, Lieblingsteam mit Flagge
|
|
||||||
<br><strong>Stats-Ring:</strong> Kreisdiagramm mit Exakt/Tendenz/Falsch-Verteilung statt 4 separate Boxen
|
|
||||||
<br><strong>Tipp-Historie:</strong> Scrollbare Liste der letzten Tipps mit Ergebnis + Punkte — "Deine letzten 10 Tipps"
|
|
||||||
<br><strong>Achievements:</strong> Badge-Leiste (grau wenn noch nicht erreicht, farbig wenn freigeschaltet) — Vorgriff auf Phase 2
|
|
||||||
<br><strong>Fun-Stat:</strong> "Dein Lieblings-Tipp: 1:0 (5x getippt)" oder "Du tippst 70% Heimsiege"
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="profil-minimal" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">B</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Minimal-Upgrade</h3>
|
|
||||||
<p>Bestehende Struktur beibehalten, aber: Stat-Boxen mit Animationen beim Laden, Tipp-Historie als einfache Liste darunter, Lieblingsteam-Auswahl prominenter platzieren. Weniger Aufwand, aber auch weniger Wow.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section" style="margin-top: 32px;">
|
|
||||||
<h3>Match-Cards: Mehr Status, mehr Emotion</h3>
|
|
||||||
<p>Aktuell: Team-Flaggen + Uhrzeit + "Tipp abgeben"-Button. Funktional, aber alle Karten sehen gleich aus.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="options">
|
|
||||||
|
|
||||||
<div class="option" data-choice="cards-states" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">C</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Zustandsbasierte Cards (Empfehlung)</h3>
|
|
||||||
<p>Jede Card sieht anders aus je nach Zustand:
|
|
||||||
<br>⏳ <strong>Offen:</strong> "Tipp abgeben"-Button, Countdown wenn <24h
|
|
||||||
<br>✅ <strong>Getippt:</strong> Dein Tipp prominent angezeigt, grüner Rand, "Ändern"-Link
|
|
||||||
<br>🔴 <strong>Live:</strong> Pulsierender roter Punkt, aktueller Spielstand (wenn verfügbar)
|
|
||||||
<br>🏁 <strong>Beendet:</strong> Ergebnis + dein Tipp + Punkte-Badge (Gold/Grün/Grau), bei exaktem Treffer: goldener Schimmer
|
|
||||||
<br>🔒 <strong>Verpasst:</strong> Ausgegraut, "Nicht getippt" — leichter Shame-Effekt als Motivation
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="cards-simple" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">D</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Einfache Verbesserung</h3>
|
|
||||||
<p>Bestehende Cards beibehalten, nur Farb-Akzente für Status hinzufügen (grüner Rand = getippt, grau = verpasst). Kein grundlegender Redesign. Weniger Aufwand, aber auch weniger visuell differenziert.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
<h2>Aufräumen: Was fällt weg, was ändert sich?</h2>
|
|
||||||
<p class="subtitle">Damit die App schlanker und fokussierter wird</p>
|
|
||||||
|
|
||||||
<div class="options" data-multiselect>
|
|
||||||
|
|
||||||
<div class="option" data-choice="remove-agent" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">1</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>KI-Agent / Expertenblick entfernen</h3>
|
|
||||||
<p>Der Chat-Widget (Fußball-Icon unten rechts) und "Expertenblick" im Tipp-Modal. Wurde als Nice-to-have eingestuft. Spart Platz auf Mobile und reduziert Ablenkung vom Kernflow. Der Platz unten rechts wird frei für den Dev-Button (nur Dev-Mode).</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="remove-stage-filter" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">2</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Stage-Filter vereinfachen</h3>
|
|
||||||
<p>Aktuell: 8 Filter-Buttons (Alle, Gruppenphase, Runde der 32, Achtelfinale...). Wird durch Smart Sections ersetzt. Stage-Filter nur noch als Dropdown im Spielplan-View, nicht mehr als Button-Leiste. Weniger visueller Lärm.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="admin-hidden" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">3</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Admin aus der Hauptnav entfernen</h3>
|
|
||||||
<p>Aktuell sieht jeder "Admin" in der Navigation (auch Viewer). Besser: Admin nur für Editoren sichtbar, und zwar als kleines Zahnrad-Icon — nicht als vollwertiger Nav-Punkt. Hält die Navigation sauber für normale User.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="option" data-choice="simplify-tip-modal" onclick="toggleSelect(this)">
|
|
||||||
<div class="letter">4</div>
|
|
||||||
<div class="content">
|
|
||||||
<h3>Tipp-Modal verschlanken</h3>
|
|
||||||
<p>Aktuell enthält das Modal: Gruppeninfo, Kick-off-Datum, Picker, Tendenz-Anzeige, Expertenblick-Accordion, Bestätigen, Abbrechen. Vereinfachen auf: Teams + Flaggen, Picker, Tendenz, Bestätigen. Kompakter, schnellerer Flow.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section" style="margin-top: 24px;">
|
|
||||||
<h3>Zusammenfassung Phase 1</h3>
|
|
||||||
<div class="pros-cons">
|
|
||||||
<div class="pros">
|
|
||||||
<h4>Neu</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Dashboard als Startseite (Hero + Stats + Nudges)</li>
|
|
||||||
<li>Bottom Navigation Bar</li>
|
|
||||||
<li>Smart Sections im Spielplan</li>
|
|
||||||
<li>5 emotionale Momente (Animationen, Konfetti, Streaks)</li>
|
|
||||||
<li>Zustandsbasierte Match-Cards</li>
|
|
||||||
<li>Reiches Profil mit Stats-Ring + Historie</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cons">
|
|
||||||
<h4>Phase 2 & 3 (später)</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Badges & Achievements</li>
|
|
||||||
<li>Wochenwertung</li>
|
|
||||||
<li>Tipps anderer sehen</li>
|
|
||||||
<li>Reaktionen / Emojis</li>
|
|
||||||
<li>Abteilungs-Challenge</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="subtitle" style="margin-top: 16px;">Wähle aus, was wegfallen soll. Dann schreibe ich das komplette Design-Dokument.</p>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
|
||||||
<p class="subtitle">Design-Dokument wird geschrieben... weiter im Terminal.</p>
|
|
||||||
</div>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
{"reason":"idle timeout","timestamp":1775926519574}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
{"type":"server-started","port":52250,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:52250","screen_dir":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content","state_dir":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/state"}
|
|
||||||
{"type":"screen-added","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/01-dashboard-concept.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/01-dashboard-concept.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/01-dashboard-concept.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/01-dashboard-concept.html"}
|
|
||||||
{"source":"user-event","type":"click","text":"Nächstes Spiel · in 2h 14min\n \n 🇲🇽Mexico\n vs\n 🇿🇦S. Africa\n \n \n Dein Tipp: 2:1 ✓\n \n \n \n \n 5.\n Dein Rang\n \n \n 12\n Punkte\n \n \n 3🔥\n Streak\n \n \n \n 📅 Heute noch 2 Spiele ohne Tipp\n 🏆 Max führt mit 15 Punkten\n \n \n \n \n A: Hero + Stats + Nudges\n Großes \"Nächstes Spiel\" oben, darunter persönliche Stats (Rang, Punkte, Streak), unten Handlungsaufforderungen und Social-Info. Kompakt, alles Wichtige auf einen Blick.","choice":"a","id":null,"timestamp":1775924301735}
|
|
||||||
{"type":"screen-added","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/02-emotional-moments.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/02-emotional-moments.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/02-emotional-moments.html"}
|
|
||||||
{"source":"user-event","type":"click","text":"1\n \n Tipp-Bestätigung\n Nach \"Tipp bestätigen\" kurze Erfolgsanimation: Card pulsiert grün, Häkchen fliegt rein, subtiles Haptic-Feedback (Vibration auf Mobile). Statt nur Modal schließen → \"Dein Tipp ist drin! 🎯\" mit sanfter Animation.","choice":"tipp-confirm","id":null,"timestamp":1775924389765}
|
|
||||||
{"source":"user-event","type":"click","text":"2\n \n Live-Countdown vor Anpfiff\n Wenn ein Spiel in <1 Stunde startet: pulsierender roter Countdown auf der Match-Card. \"Noch 12 Minuten zum Tippen!\" — erzeugt Dringlichkeit und FOMO. Nach Anpfiff: \"Tippfenster geschlossen\" mit Schloss-Icon.","choice":"countdown","id":null,"timestamp":1775924391183}
|
|
||||||
{"source":"user-event","type":"click","text":"3\n \n Punkte-Reveal nach Spielende\n Der stärkste Moment: Wenn ein Spiel auf FINISHED geht, Punkte nicht einfach anzeigen — enthüllen. Kurzsequenz: Ergebnis einblenden → \"Dein Tipp war...\" → Punkte-Zähler animiert hochzählen. Bei exaktem Treffer: 🎉 Konfetti-Explosion + goldener \"EXAKT!\"-Badge. Bei Tendenz: 👏 grüner Puls. Bei falsch: 😅 kurzes Kopfschütteln-Emoji.","choice":"punkte-reveal","id":null,"timestamp":1775924392631}
|
|
||||||
{"source":"user-event","type":"click","text":"4\n \n Ranglistenveränderung\n Wenn sich dein Rang ändert: \"Du bist auf Platz 3 aufgestiegen! ⬆️\" als Toast-Notification beim nächsten App-Öffnen. Oder: \"Achtung, Anna ist nur noch 1 Punkt hinter dir!\" — erzeugt freundschaftliche Rivalität.","choice":"rang-change","id":null,"timestamp":1775924394132}
|
|
||||||
{"source":"user-event","type":"click","text":"5\n \n Streak-Tracker\n Visueller Feuer-Counter: 🔥3 wenn du 3 Spiele in Folge getippt hast (nicht korrekt, nur abgegeben). Motiviert zum Dranbleiben. Bei 10er-Streak: besonderes Icon. Wenn Streak bricht: \"Deine 7er-Serie ist gerissen! Starte eine neue.\"","choice":"streak","id":null,"timestamp":1775924395415}
|
|
||||||
{"type":"screen-added","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/03-spielplan-navigation.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/03-spielplan-navigation.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/03-spielplan-navigation.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/03-spielplan-navigation.html"}
|
|
||||||
{"source":"user-event","type":"click","text":"A\n \n Smart Sections (Empfehlung)\n Spielplan automatisch in Abschnitte unterteilt:\n \"Heute\" (expandiert, farbig hervorgehoben)\n \"Morgen\" (expandiert)\n \"Diese Woche\" (kollapsiert, Anzahl angezeigt)\n \"Vergangene Spiele\" (kollapsiert, zeigt letzte Ergebnisse + deine Punkte)\n Kein manuelles Filtern nötig — die App weiß, was jetzt relevant ist. Stage-Filter (Gruppenphase, Achtelfinale...) bleiben als optionaler Zweitmodus.","choice":"smart-sections","id":null,"timestamp":1775924457903}
|
|
||||||
{"source":"user-event","type":"click","text":"C\n \n Bottom Navigation Bar (Empfehlung)\n Feste Leiste am unteren Bildschirmrand mit Icons + Label:\n 🏠 Home (Dashboard) · ⚽ Spiele · 🏆 Rangliste · 👤 Profil\n Standard-Pattern für Mobile-Apps (Staffbase, Instagram, etc.). Header wird schlank — nur Logo + evtl. Notification-Badge. Admin nur für Editoren sichtbar als Extra-Icon.","choice":"bottom-nav","id":null,"timestamp":1775924462017}
|
|
||||||
{"type":"screen-added","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/04-profil-matchcards.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/04-profil-matchcards.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/04-profil-matchcards.html"}
|
|
||||||
{"source":"user-event","type":"click","text":"A\n \n Reiches Profil (Empfehlung)\n \n Header: Avatar (Initialen-Circle wie jetzt), Name, Rang-Badge, Lieblingsteam mit Flagge\n Stats-Ring: Kreisdiagramm mit Exakt/Tendenz/Falsch-Verteilung statt 4 separate Boxen\n Tipp-Historie: Scrollbare Liste der letzten Tipps mit Ergebnis + Punkte — \"Deine letzten 10 Tipps\"\n Achievements: Badge-Leiste (grau wenn noch nicht erreicht, farbig wenn freigeschaltet) — Vorgriff auf Phase 2\n Fun-Stat: \"Dein Lieblings-Tipp: 1:0 (5x getippt)\" oder \"Du tippst 70% Heimsiege\"","choice":"profil-rich","id":null,"timestamp":1775924529062}
|
|
||||||
{"source":"user-event","type":"click","text":"C\n \n Zustandsbasierte Cards (Empfehlung)\n Jede Card sieht anders aus je nach Zustand:\n ⏳ Offen: \"Tipp abgeben\"-Button, Countdown wenn <24h\n ✅ Getippt: Dein Tipp prominent angezeigt, grüner Rand, \"Ändern\"-Link\n 🔴 Live: Pulsierender roter Punkt, aktueller Spielstand (wenn verfügbar)\n 🏁 Beendet: Ergebnis + dein Tipp + Punkte-Badge (Gold/Grün/Grau), bei exaktem Treffer: goldener Schimmer\n 🔒 Verpasst: Ausgegraut, \"Nicht getippt\" — leichter Shame-Effekt als Motivation","choice":"cards-states","id":null,"timestamp":1775924530413}
|
|
||||||
{"type":"screen-added","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/05-cleanup-scope.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/05-cleanup-scope.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/05-cleanup-scope.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/05-cleanup-scope.html"}
|
|
||||||
{"source":"user-event","type":"click","text":"4\n \n Tipp-Modal verschlanken\n Aktuell enthält das Modal: Gruppeninfo, Kick-off-Datum, Picker, Tendenz-Anzeige, Expertenblick-Accordion, Bestätigen, Abbrechen. Vereinfachen auf: Teams + Flaggen, Picker, Tendenz, Bestätigen. Kompakter, schnellerer Flow.","choice":"simplify-tip-modal","id":null,"timestamp":1775924611669}
|
|
||||||
{"source":"user-event","type":"click","text":"3\n \n Admin aus der Hauptnav entfernen\n Aktuell sieht jeder \"Admin\" in der Navigation (auch Viewer). Besser: Admin nur für Editoren sichtbar, und zwar als kleines Zahnrad-Icon — nicht als vollwertiger Nav-Punkt. Hält die Navigation sauber für normale User.","choice":"admin-hidden","id":null,"timestamp":1775924612378}
|
|
||||||
{"source":"user-event","type":"click","text":"2\n \n Stage-Filter vereinfachen\n Aktuell: 8 Filter-Buttons (Alle, Gruppenphase, Runde der 32, Achtelfinale...). Wird durch Smart Sections ersetzt. Stage-Filter nur noch als Dropdown im Spielplan-View, nicht mehr als Button-Leiste. Weniger visueller Lärm.","choice":"remove-stage-filter","id":null,"timestamp":1775924613128}
|
|
||||||
{"source":"user-event","type":"click","text":"1\n \n KI-Agent / Expertenblick entfernen\n Der Chat-Widget (Fußball-Icon unten rechts) und \"Expertenblick\" im Tipp-Modal. Wurde als Nice-to-have eingestuft. Spart Platz auf Mobile und reduziert Ablenkung vom Kernflow. Der Platz unten rechts wird frei für den Dev-Button (nur Dev-Mode).","choice":"remove-agent","id":null,"timestamp":1775924613861}
|
|
||||||
{"type":"screen-added","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/waiting.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/waiting.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/waiting.html"}
|
|
||||||
{"type":"screen-updated","file":"/Users/todi975/Documents/Claude/Projects/Tippspiel/.superpowers/brainstorm/4751-1775923699/content/waiting.html"}
|
|
||||||
{"type":"server-stopped","reason":"idle timeout"}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
4760
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { Routes, Route, NavLink } from 'react-router-dom';
|
|
||||||
import { Sun, Moon, Settings } from 'lucide-react';
|
|
||||||
import DashboardPage from './pages/DashboardPage';
|
|
||||||
import MatchesPage from './pages/MatchesPage';
|
|
||||||
import LeaderboardPage from './pages/LeaderboardPage';
|
|
||||||
import ProfilePage from './pages/ProfilePage';
|
|
||||||
import AdminPage from './pages/AdminPage';
|
|
||||||
import BottomNav from './components/BottomNav';
|
|
||||||
import Toast from './components/Toast';
|
|
||||||
import { useRankChange } from './hooks/useRankChange';
|
|
||||||
import styles from './App.module.css';
|
|
||||||
const IS_DEV = import.meta.env.DEV || import.meta.env.VITE_TEST_MODE === 'true';
|
|
||||||
// Lazy-load DevPanel in Development/Test-Mode
|
|
||||||
let DevPanel = null;
|
|
||||||
// VITE_TEST_MODE wird erst zur Laufzeit geprüft, daher Import immer einbinden
|
|
||||||
import('./components/DevPanel').then(m => { DevPanel = m.default; }).catch(() => { });
|
|
||||||
function getInitialTheme() {
|
|
||||||
try {
|
|
||||||
const stored = localStorage.getItem('theme');
|
|
||||||
if (stored === 'light' || stored === 'dark')
|
|
||||||
return stored;
|
|
||||||
}
|
|
||||||
catch { }
|
|
||||||
return 'dark';
|
|
||||||
}
|
|
||||||
export default function App() {
|
|
||||||
const [theme, setTheme] = useState(getInitialTheme);
|
|
||||||
const { message: rankMsg, dismiss: dismissRank } = useRankChange();
|
|
||||||
const [devUser, setDevUser] = useState(1);
|
|
||||||
const [devMatches, setDevMatches] = useState([]);
|
|
||||||
const [refreshKey, setRefreshKey] = useState(0);
|
|
||||||
// Theme auf <html> setzen und in localStorage speichern
|
|
||||||
useEffect(() => {
|
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
|
||||||
try {
|
|
||||||
localStorage.setItem('theme', theme);
|
|
||||||
}
|
|
||||||
catch { }
|
|
||||||
}, [theme]);
|
|
||||||
function toggleTheme() {
|
|
||||||
setTheme(t => t === 'dark' ? 'light' : 'dark');
|
|
||||||
}
|
|
||||||
// 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 (_jsxs("div", { className: styles.app, children: [_jsx("header", { className: styles.header, children: _jsxs("div", { className: styles.headerInner, children: [_jsxs("div", { className: styles.logo, children: [_jsx("span", { className: styles.logoFlag, children: "\uD83C\uDFC6" }), _jsx("span", { className: styles.logoText, children: "WM 2026 Tippspiel" }), IS_DEV && (_jsxs("span", { className: styles.devBadge, children: ["DEV \u00B7 User ", devUser] }))] }), _jsxs("nav", { className: styles.nav, children: [_jsx(NavLink, { to: "/spiele", className: ({ isActive }) => isActive ? styles.navLinkActive : styles.navLink, children: "Spielplan" }), _jsx(NavLink, { to: "/rangliste", className: ({ isActive }) => isActive ? styles.navLinkActive : styles.navLink, children: "Rangliste" }), _jsx(NavLink, { to: "/profil", className: ({ isActive }) => isActive ? styles.navLinkActive : styles.navLink, children: "Mein Profil" }), _jsx(NavLink, { to: "/admin", className: styles.adminLink, title: "Admin", children: _jsx(Settings, { size: 16 }) }), _jsx("button", { className: styles.themeToggle, onClick: toggleTheme, title: theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren', "aria-label": "Theme wechseln", children: theme === 'dark' ? _jsx(Sun, { size: 16 }) : _jsx(Moon, { size: 16 }) })] })] }) }), _jsx("main", { className: styles.main, children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(DashboardPage, {}, refreshKey) }), _jsx(Route, { path: "/spiele", element: _jsx(MatchesPage, {}, refreshKey) }), _jsx(Route, { path: "/rangliste", element: _jsx(LeaderboardPage, {}, refreshKey) }), _jsx(Route, { path: "/profil", element: _jsx(ProfilePage, {}, refreshKey) }), _jsx(Route, { path: "/admin", element: _jsx(AdminPage, {}) })] }) }), rankMsg && _jsx(Toast, { message: rankMsg, onDismiss: dismissRank }), _jsx(BottomNav, {}), IS_DEV && DevPanel && (_jsx(DevPanel, { currentUser: devUser, onUserChange: (u) => { setDevUser(u); setRefreshKey(k => k + 1); }, matches: devMatches, onRefresh: handleDevRefresh }))] }));
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
const BASE = '/api';
|
|
||||||
function withDevUser(path) {
|
|
||||||
const devUser = new URLSearchParams(window.location.search).get('devUser');
|
|
||||||
if (!devUser)
|
|
||||||
return path;
|
|
||||||
const sep = path.includes('?') ? '&' : '?';
|
|
||||||
return `${path}${sep}devUser=${devUser}`;
|
|
||||||
}
|
|
||||||
async function request(path, options) {
|
|
||||||
const res = await fetch(`${BASE}${withDevUser(path)}`, {
|
|
||||||
...options,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
...options?.headers,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (!res.ok) {
|
|
||||||
const err = await res.json().catch(() => ({ error: res.statusText }));
|
|
||||||
throw new Error(err.message || err.error || 'Request failed');
|
|
||||||
}
|
|
||||||
return res.json();
|
|
||||||
}
|
|
||||||
export const api = {
|
|
||||||
// Matches
|
|
||||||
getMatches: (params) => {
|
|
||||||
const q = new URLSearchParams(params).toString();
|
|
||||||
return request(`/matches${q ? '?' + q : ''}`);
|
|
||||||
},
|
|
||||||
// Tips
|
|
||||||
submitTip: (matchId, tipHome, tipAway) => request('/tips', {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify({ matchId, tipHome, tipAway }),
|
|
||||||
}),
|
|
||||||
getMyTips: () => request('/tips'),
|
|
||||||
// Leaderboard
|
|
||||||
getLeaderboard: () => request('/leaderboard'),
|
|
||||||
getMyStats: () => request('/leaderboard/me'),
|
|
||||||
// Profile
|
|
||||||
updateTeam: (team) => request('/profile/team', {
|
|
||||||
method: 'PATCH',
|
|
||||||
body: JSON.stringify({ team }),
|
|
||||||
}),
|
|
||||||
// Dashboard
|
|
||||||
getDashboard: () => request('/dashboard'),
|
|
||||||
// Admin
|
|
||||||
syncMatches: () => request('/admin/sync', { method: 'POST' }),
|
|
||||||
evaluateTips: () => request('/admin/evaluate', { method: 'POST' }),
|
|
||||||
};
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
||||||
import { NavLink } from 'react-router-dom';
|
|
||||||
import { Home, Trophy, User } from 'lucide-react';
|
|
||||||
import styles from './BottomNav.module.css';
|
|
||||||
export default function BottomNav() {
|
|
||||||
const linkClass = ({ isActive }) => isActive ? styles.tabActive : styles.tab;
|
|
||||||
return (_jsxs("nav", { className: styles.bottomNav, children: [_jsxs(NavLink, { to: "/", end: true, className: linkClass, children: [_jsx(Home, { size: 20 }), _jsx("span", { children: "Home" })] }), _jsxs(NavLink, { to: "/spiele", className: linkClass, children: [_jsx("span", { className: styles.emojiIcon, children: "\u26BD" }), _jsx("span", { children: "Spiele" })] }), _jsxs(NavLink, { to: "/rangliste", className: linkClass, children: [_jsx(Trophy, { size: 20 }), _jsx("span", { children: "Rangliste" })] }), _jsxs(NavLink, { to: "/profil", className: linkClass, children: [_jsx(User, { size: 20 }), _jsx("span", { children: "Profil" })] })] }));
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
||||||
import { useEffect, useRef } from 'react';
|
|
||||||
import confetti from 'canvas-confetti';
|
|
||||||
import styles from './ConfettiReveal.module.css';
|
|
||||||
export default function ConfettiReveal({ match, onDismiss }) {
|
|
||||||
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 badgeClass = points === 3 ? styles.badgeExact : points === 1 ? styles.badgeTendency : styles.badgeWrong;
|
|
||||||
return (_jsx("div", { className: styles.overlay, onClick: onDismiss, children: _jsxs("div", { className: `card ${styles.card}`, onClick: e => e.stopPropagation(), children: [_jsxs("div", { className: styles.result, children: [match.homeTeam.shortName, " ", match.score.home, ":", match.score.away, " ", match.awayTeam.shortName] }), _jsxs("div", { className: styles.tipLine, children: ["Dein Tipp: ", tip.home, ":", tip.away] }), _jsxs("div", { className: `${styles.badge} ${badgeClass}`, children: [points, " ", points === 1 ? 'Punkt' : 'Punkte'] }), _jsx("div", { className: styles.label, children: resultLabel }), _jsx("button", { className: styles.dismissBtn, onClick: onDismiss, children: "Weiter" })] }) }));
|
|
||||||
}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
||||||
import { useState } from 'react';
|
|
||||||
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 },
|
|
||||||
];
|
|
||||||
export default function DevPanel({ currentUser, onUserChange, matches, onRefresh }) {
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const [selectedMatch, setSelectedMatch] = useState('');
|
|
||||||
const [busy, setBusy] = useState(false);
|
|
||||||
const [log, setLog] = useState([]);
|
|
||||||
function addLog(msg) {
|
|
||||||
setLog(prev => [`${new Date().toLocaleTimeString('de-DE')} ${msg}`, ...prev].slice(0, 8));
|
|
||||||
}
|
|
||||||
async function applyTime(minutes) {
|
|
||||||
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.message}`);
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
async function applyStatus(status, scoreHome, scoreAway) {
|
|
||||||
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.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.message}`);
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
async function resetMatch(all) {
|
|
||||||
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();
|
|
||||||
if (all) {
|
|
||||||
addLog(`✓ ${data.count ?? 0} Spiele zurückgesetzt (TIMED)`);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
addLog(`✓ Spiel #${selectedMatch} zurückgesetzt (TIMED)`);
|
|
||||||
}
|
|
||||||
onRefresh();
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
addLog(`✗ Fehler: ${e.message}`);
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Nur erste 20 Spiele zur Auswahl anbieten
|
|
||||||
const selectableMatches = matches.slice(0, 20);
|
|
||||||
return (_jsxs("div", { className: styles.wrap, children: [_jsxs("button", { className: styles.toggleBtn, onClick: () => setOpen(o => !o), children: [open ? '✕' : '🧪', " ", !open && _jsx("span", { className: styles.toggleLabel, children: "Dev" })] }), open && (_jsxs("div", { className: styles.panel, children: [_jsx("div", { className: styles.panelHeader, children: _jsx("span", { className: styles.panelTitle, children: "\uD83E\uDDEA Simulations-Modus" }) }), _jsxs("section", { className: styles.section, children: [_jsx("div", { className: styles.sectionLabel, children: "Aktiver User" }), _jsx("div", { className: styles.userButtons, children: DEV_USERS.map(u => (_jsxs("button", { className: `${styles.userBtn} ${currentUser === u.id ? styles.userBtnActive : ''}`, onClick: () => {
|
|
||||||
onUserChange(u.id);
|
|
||||||
addLog(`→ Wechsel zu User ${u.id}: ${u.name}`);
|
|
||||||
}, children: [_jsx("span", { className: styles.userInitial, children: u.name.charAt(0) }), _jsx("span", { className: styles.userName, children: u.name }), _jsx("span", { className: styles.userRole, children: u.role })] }, u.id))) })] }), _jsxs("section", { className: styles.section, children: [_jsx("div", { className: styles.sectionLabel, children: "Spiel ausw\u00E4hlen" }), _jsxs("select", { className: styles.select, value: selectedMatch, onChange: e => setSelectedMatch(e.target.value ? parseInt(e.target.value) : ''), children: [_jsx("option", { value: "", children: "\u2014 Spiel w\u00E4hlen \u2014" }), selectableMatches.map(m => (_jsxs("option", { value: m.id, children: ["#", m.id, " ", m.homeTeam.shortName, " vs ", m.awayTeam.shortName] }, m.id)))] })] }), _jsxs("section", { className: `${styles.section} ${!selectedMatch ? styles.sectionDisabled : ''}`, children: [_jsx("div", { className: styles.sectionLabel, children: "Ansto\u00DFzeit setzen" }), _jsx("div", { className: styles.presetGrid, children: TIME_PRESETS.map(p => (_jsx("button", { className: styles.presetBtn, onClick: () => applyTime(p.minutes), disabled: !selectedMatch || busy, children: p.label }, p.label))) })] }), _jsxs("section", { className: `${styles.section} ${!selectedMatch ? styles.sectionDisabled : ''}`, children: [_jsx("div", { className: styles.sectionLabel, children: "Status setzen" }), _jsx("div", { className: styles.presetGrid, children: STATUS_PRESETS.map(p => (_jsx("button", { 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, children: p.label }, p.label))) })] }), _jsxs("section", { className: styles.section, children: [_jsx("div", { className: styles.sectionLabel, children: "Zur\u00FCcksetzen" }), _jsxs("div", { className: styles.resetGrid, children: [_jsx("button", { className: styles.resetBtn, onClick: () => resetMatch(false), disabled: !selectedMatch || busy, title: "Ausgew\u00E4hltes Spiel auf TIMED zur\u00FCcksetzen", children: "\u21BA Spiel zur\u00FCcksetzen" }), _jsx("button", { className: `${styles.resetBtn} ${styles.resetBtnAll}`, onClick: () => resetMatch(true), disabled: busy, title: "Alle laufenden/beendeten Spiele zur\u00FCcksetzen", children: "\u21BA Alle Spiele" }), _jsx("button", { className: `${styles.resetBtn} ${styles.resetBtnTips}`, onClick: resetTips, disabled: busy, children: "\uD83D\uDDD1 Tipps l\u00F6schen" })] })] }), log.length > 0 && (_jsx("div", { className: styles.log, children: log.map((l, i) => _jsx("div", { className: styles.logLine, children: l }, i)) }))] }))] }));
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
||||||
import { Check, TrendingUp, X } from 'lucide-react';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import styles from './MatchCard.module.css';
|
|
||||||
function getCardState(match) {
|
|
||||||
if (match.status === 'IN_PLAY' || match.status === 'PAUSED')
|
|
||||||
return 'live';
|
|
||||||
if (match.status === 'FINISHED') {
|
|
||||||
return match.userTip ? 'finished' : 'missed';
|
|
||||||
}
|
|
||||||
// SCHEDULED or TIMED
|
|
||||||
return match.userTip ? 'tipped' : 'open';
|
|
||||||
}
|
|
||||||
function useCountdown(minutesUntilKickoff) {
|
|
||||||
const [remaining, setRemaining] = useState(minutesUntilKickoff);
|
|
||||||
useEffect(() => {
|
|
||||||
if (minutesUntilKickoff > 60)
|
|
||||||
return; // only active for <1h
|
|
||||||
setRemaining(minutesUntilKickoff);
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setRemaining(r => Math.max(0, r - 1 / 60));
|
|
||||||
}, 1000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [minutesUntilKickoff]);
|
|
||||||
return remaining;
|
|
||||||
}
|
|
||||||
const STATUS_LABELS = {
|
|
||||||
SCHEDULED: 'Geplant',
|
|
||||||
TIMED: 'Terminiert',
|
|
||||||
IN_PLAY: 'Live',
|
|
||||||
PAUSED: 'Pause',
|
|
||||||
FINISHED: 'Beendet',
|
|
||||||
POSTPONED: 'Verschoben',
|
|
||||||
CANCELLED: 'Abgesagt',
|
|
||||||
};
|
|
||||||
function formatKickoff(utcDate) {
|
|
||||||
return new Date(utcDate).toLocaleString('de-DE', {
|
|
||||||
hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Berlin',
|
|
||||||
}) + ' Uhr';
|
|
||||||
}
|
|
||||||
function CountdownBadge({ minutes }) {
|
|
||||||
if (minutes <= 0)
|
|
||||||
return null;
|
|
||||||
if (minutes < 60)
|
|
||||||
return _jsxs("span", { className: styles.badgeUrgent, children: ["\u26A1 in ", minutes, " Min."] });
|
|
||||||
const h = Math.floor(minutes / 60);
|
|
||||||
const m = minutes % 60;
|
|
||||||
if (h < 24)
|
|
||||||
return _jsxs("span", { className: styles.badge, children: ["in ", h, "h", m > 0 ? ` ${m}m` : ''] });
|
|
||||||
const d = Math.floor(h / 24);
|
|
||||||
return _jsxs("span", { className: styles.badge, children: ["in ", d, " Tag", d > 1 ? 'en' : ''] });
|
|
||||||
}
|
|
||||||
function FlagBox({ crest, name }) {
|
|
||||||
return (_jsx("div", { className: styles.flagBox, children: crest
|
|
||||||
? _jsx("img", { className: styles.crest, src: crest, alt: name })
|
|
||||||
: _jsx("span", { style: { fontSize: 18 }, children: "\uD83C\uDFF3\uFE0F" }) }));
|
|
||||||
}
|
|
||||||
export default function MatchCard({ match, onTip }) {
|
|
||||||
const state = getCardState(match);
|
|
||||||
const remaining = useCountdown(match.minutesUntilKickoff);
|
|
||||||
const remainingMins = Math.ceil(remaining);
|
|
||||||
const isFinished = state === 'finished' || state === 'missed';
|
|
||||||
const isLive = state === 'live';
|
|
||||||
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 (_jsxs("div", { className: `card ${styles.card} ${styles[`card_${state}`]} ${isLive ? styles.live : ''} ${glowClass}`, children: [_jsxs("div", { className: styles.topRow, children: [_jsxs("span", { className: `${styles.status} ${isLive ? styles.statusLive : ''}`, children: [isLive && _jsx("span", { className: styles.liveDot }), STATUS_LABELS[match.status] ?? match.status] }), match.group && (_jsx("span", { className: styles.group, children: match.group.replace('GROUP_', 'Gruppe ') })), (state === 'open' || state === 'tipped') && match.tippable && (match.minutesUntilKickoff < 60 ? (_jsxs("span", { className: `${styles.countdown} ${remainingMins < 5 ? styles.countdownUrgent : ''}`, children: ["Noch ", remainingMins, " Min!"] })) : (_jsx(CountdownBadge, { minutes: match.minutesUntilKickoff })))] }), _jsxs("div", { className: styles.matchRow, children: [_jsxs("div", { className: styles.teamHome, children: [_jsx("span", { className: styles.teamName, children: match.homeTeam.name }), _jsx(FlagBox, { crest: match.homeTeam.crest, name: match.homeTeam.name })] }), _jsx("div", { className: styles.scoreBox, children: isFinished || isLive ? (_jsxs("div", { className: styles.scoreStack, children: [_jsxs("span", { className: styles.score, children: [match.score.home ?? '–', "\u00A0:\u00A0", match.score.away ?? '–'] }), isLive && hasTip && (_jsxs("span", { className: styles.liveTipCompare, children: ["Tipp: ", match.userTip.home, ":", match.userTip.away] }))] })) : (_jsx("div", { className: styles.kickoffCenter, children: _jsx("span", { className: styles.kickoffCenterTime, children: formatKickoff(match.utcDate) }) })) }), _jsxs("div", { className: styles.teamAway, children: [_jsx(FlagBox, { crest: match.awayTeam.crest, name: match.awayTeam.name }), _jsx("span", { className: styles.teamName, children: match.awayTeam.name })] })] }), _jsx("div", { className: `${styles.tipRow} ${hasTip && points !== null ? `${styles.resultBanner} ${resultClass}` : ''}`, children: state === 'missed' ? (
|
|
||||||
/* ── Missed: no tip, match finished ── */
|
|
||||||
_jsx("span", { className: styles.missedLabel, children: "Nicht getippt" })) : state === 'live' ? (
|
|
||||||
/* ── Live: no tip input, locked ── */
|
|
||||||
hasTip ? (_jsxs("div", { className: styles.tipDisplay, children: [_jsx("div", { className: styles.tipLeft }), _jsxs("div", { className: styles.tipCenter, children: [_jsx("span", { className: styles.tipLabel, children: "DEIN TIPP" }), _jsxs("span", { className: styles.tipScore, children: [match.userTip.home, " : ", match.userTip.away] })] }), _jsx("div", { className: styles.tipRight })] })) : (_jsx("span", { className: styles.noTip, children: "Kein Tipp abgegeben" }))) : hasTip ? (points !== null ? (
|
|
||||||
/* ── Auswertungs-Banner ── */
|
|
||||||
_jsxs("div", { className: styles.tipDisplay, children: [_jsxs("div", { className: `${styles.tipLeft} ${styles.bannerLeft}`, children: [_jsx("span", { className: styles.resultIcon, children: points === 3 ? _jsx(Check, { size: 14, strokeWidth: 3 }) :
|
|
||||||
points === 1 ? _jsx(TrendingUp, { size: 14, strokeWidth: 2.5 }) :
|
|
||||||
_jsx(X, { size: 14, strokeWidth: 3 }) }), _jsx("span", { className: styles.resultLabel, children: points === 3 ? 'Exakt' : points === 1 ? 'Tendenz' : 'Falsch' })] }), _jsx("div", { className: styles.tipCenter, children: _jsxs("span", { className: styles.tipScoreBanner, children: [match.userTip.home, " : ", match.userTip.away] }) }), _jsx("div", { className: styles.tipRight, children: _jsx("span", { className: `${styles.pointsBadge} ${points === 3 ? styles.pointsBadge_exact :
|
|
||||||
points === 1 ? styles.pointsBadge_tendency :
|
|
||||||
styles.pointsBadge_wrong}`, children: points === 0 ? '0 Pkt.' : `+${points} Pkt.` }) })] })) : (
|
|
||||||
/* ── Tipp vorhanden, noch nicht ausgewertet (tipped state) ── */
|
|
||||||
_jsxs("div", { className: styles.tipDisplay, children: [_jsx("div", { className: styles.tipLeft, children: match.tippable && (_jsx("button", { className: styles.changeBtn, onClick: onTip, children: "\u00C4ndern" })) }), _jsxs("div", { className: styles.tipCenter, children: [!match.tippable && _jsx("span", { className: styles.tipLabel, children: "DEIN TIPP" }), _jsxs("span", { className: styles.tipDisplay_score, children: [_jsx(Check, { size: 13, strokeWidth: 3, style: { color: 'var(--success)', flexShrink: 0 } }), _jsxs("span", { className: styles.tipScore, children: [match.userTip.home, " : ", match.userTip.away] })] })] }), _jsx("div", { className: styles.tipRight })] }))) : match.tippable ? (_jsx("button", { className: `btn-primary ${styles.tipBtn}`, onClick: onTip, children: "Tipp abgeben" })) : (_jsx("span", { className: styles.noTip, children: "Kein Tipp abgegeben" })) })] }));
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
||||||
import styles from './StatsRing.module.css';
|
|
||||||
export default function StatsRing({ exact, tendency, wrong, total }) {
|
|
||||||
const radius = 55;
|
|
||||||
const circumference = 2 * Math.PI * radius;
|
|
||||||
const all = exact + tendency + wrong;
|
|
||||||
const hasData = all > 0;
|
|
||||||
const segments = hasData ? [
|
|
||||||
{ value: exact / all, color: 'var(--gold)', label: 'Exakt', count: exact },
|
|
||||||
{ value: tendency / all, color: 'var(--success)', label: 'Tendenz', count: tendency },
|
|
||||||
{ value: wrong / all, color: 'var(--error)', label: 'Falsch', count: wrong },
|
|
||||||
] : [];
|
|
||||||
let offset = 0;
|
|
||||||
return (_jsxs("div", { className: styles.ring, children: [_jsxs("svg", { viewBox: "0 0 140 140", className: styles.svg, children: [_jsx("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 (_jsx("circle", { cx: "70", cy: "70", r: radius, fill: "none", stroke: seg.color, strokeWidth: "12", strokeDasharray: dashArray, transform: `rotate(${rotation} 70 70)`, strokeLinecap: "round" }, i));
|
|
||||||
}), _jsx("text", { x: "70", y: "65", textAnchor: "middle", dominantBaseline: "central", fill: "var(--text-primary)", fontSize: "28", fontWeight: "700", children: total }), _jsx("text", { x: "70", y: "85", textAnchor: "middle", fill: "var(--text-secondary)", fontSize: "11", children: hasData ? 'Punkte' : 'Keine Tipps' })] }), hasData && (_jsx("div", { className: styles.legend, children: segments.map((seg, i) => (_jsxs("span", { className: styles.legendItem, children: [_jsx("span", { className: styles.dot, style: { background: seg.color } }), seg.label, ": ", seg.count] }, i))) }))] }));
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { api } from '../api/client';
|
|
||||||
import styles from './TipModal.module.css';
|
|
||||||
function getTendency(home, away) {
|
|
||||||
if (home > away)
|
|
||||||
return 'home';
|
|
||||||
if (away > home)
|
|
||||||
return 'away';
|
|
||||||
return 'draw';
|
|
||||||
}
|
|
||||||
export default function TipModal({ match, onClose, onSaved }) {
|
|
||||||
const existing = match.userTip;
|
|
||||||
const [home, setHome] = useState(existing?.home ?? 0);
|
|
||||||
const [away, setAway] = useState(existing?.away ?? 0);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [showSuccess, setShowSuccess] = useState(false);
|
|
||||||
const [error, setError] = useState(null);
|
|
||||||
const tendency = getTendency(home, away);
|
|
||||||
const tendencyLabel = tendency === 'home' ? match.homeTeam.shortName || match.homeTeam.name :
|
|
||||||
tendency === 'away' ? match.awayTeam.shortName || match.awayTeam.name :
|
|
||||||
'Unentschieden';
|
|
||||||
const tendencyColor = tendency === 'home' ? 'var(--primary)' :
|
|
||||||
tendency === 'away' ? 'var(--cyan)' :
|
|
||||||
'var(--gold)';
|
|
||||||
const handleSave = async () => {
|
|
||||||
setSaving(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
await api.submitTip(match.id, home, away);
|
|
||||||
setShowSuccess(true);
|
|
||||||
if (navigator.vibrate)
|
|
||||||
navigator.vibrate(50); // haptic feedback
|
|
||||||
setTimeout(() => {
|
|
||||||
setShowSuccess(false);
|
|
||||||
onSaved(match.id, home, away);
|
|
||||||
onClose();
|
|
||||||
}, 1200);
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
setError(e.message);
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (_jsx("div", { className: styles.overlay, onClick: onClose, children: _jsxs("div", { className: styles.sheet, onClick: e => e.stopPropagation(), children: [_jsx("div", { className: styles.handle }), _jsxs("div", { className: styles.teamsRow, children: [_jsxs("div", { className: styles.teamBlock, children: [_jsx("div", { className: styles.flagLarge, children: match.homeTeam.crest
|
|
||||||
? _jsx("img", { src: match.homeTeam.crest, alt: match.homeTeam.name, className: styles.flagImg })
|
|
||||||
: _jsx("span", { className: styles.flagEmoji, children: "\uD83C\uDFF3\uFE0F" }) }), _jsx("span", { className: styles.teamName, children: match.homeTeam.name })] }), _jsx("div", { className: styles.vsBlock }), _jsxs("div", { className: styles.teamBlock, children: [_jsx("div", { className: styles.flagLarge, children: match.awayTeam.crest
|
|
||||||
? _jsx("img", { src: match.awayTeam.crest, alt: match.awayTeam.name, className: styles.flagImg })
|
|
||||||
: _jsx("span", { className: styles.flagEmoji, children: "\uD83C\uDFF3\uFE0F" }) }), _jsx("span", { className: styles.teamName, children: match.awayTeam.name })] })] }), _jsxs("div", { className: styles.pickerSection, children: [_jsx("p", { className: styles.pickerLabel, children: "Dein Tipp" }), _jsxs("div", { className: styles.pickerRow, children: [_jsx(ScorePicker, { value: home, onChange: setHome }), _jsx("div", { className: styles.pickerColon, children: ":" }), _jsx(ScorePicker, { value: away, onChange: setAway })] })] }), _jsxs("div", { className: styles.tendencyBar, style: { '--tendency-color': tendencyColor }, children: [_jsx("span", { className: styles.tendencyIcon, children: tendency === 'draw' ? '🤝' : tendency === 'home' ? '🏠' : '✈️' }), _jsxs("span", { className: styles.tendencyText, children: ["Tendenz: ", _jsx("strong", { children: tendencyLabel })] })] }), error && _jsx("div", { className: styles.error, children: error }), showSuccess && (_jsxs("div", { className: styles.successOverlay, children: [_jsx("div", { className: styles.successCheck, children: "\u2713" }), _jsx("div", { className: styles.successText, children: "Dein Tipp ist drin! \uD83C\uDFAF" })] })), _jsx("button", { className: `btn-primary ${styles.saveBtn}`, onClick: handleSave, disabled: saving, children: saving ? '⏳ Wird gespeichert…' : '✓ Tipp bestätigen' }), _jsx("button", { className: styles.cancelBtn, onClick: onClose, children: "Abbrechen" })] }) }));
|
|
||||||
}
|
|
||||||
function ScorePicker({ value, onChange }) {
|
|
||||||
return (_jsxs("div", { className: styles.picker, children: [_jsx("button", { className: styles.pickerBtn, onClick: () => onChange(Math.min(20, value + 1)), "aria-label": "Erh\u00F6hen", children: "+" }), _jsx("span", { className: styles.pickerValue, children: value }), _jsx("button", { className: styles.pickerBtn, onClick: () => onChange(Math.max(0, value - 1)), "aria-label": "Verringern", children: "\u2212" })] }));
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import { jsx as _jsx } from "react/jsx-runtime";
|
|
||||||
import { useEffect, useRef } from 'react';
|
|
||||||
import styles from './Toast.module.css';
|
|
||||||
export default function Toast({ message, onDismiss, duration = 5000 }) {
|
|
||||||
const onDismissRef = useRef(onDismiss);
|
|
||||||
onDismissRef.current = onDismiss;
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => onDismissRef.current(), duration);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [duration]);
|
|
||||||
return (_jsx("div", { className: `card ${styles.toast}`, onClick: onDismiss, children: message }));
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { api } from '../api/client';
|
|
||||||
const RANK_KEY = 'tippspiel_last_rank';
|
|
||||||
const SHOWN_KEY = 'tippspiel_rank_toast_shown';
|
|
||||||
export function useRankChange() {
|
|
||||||
const [message, setMessage] = useState(null);
|
|
||||||
useEffect(() => {
|
|
||||||
// Only show once per session
|
|
||||||
if (sessionStorage.getItem(SHOWN_KEY))
|
|
||||||
return;
|
|
||||||
api.getMyStats().then(stats => {
|
|
||||||
if (!stats.rank)
|
|
||||||
return;
|
|
||||||
const lastRank = parseInt(localStorage.getItem(RANK_KEY) || '0');
|
|
||||||
if (lastRank > 0 && lastRank !== stats.rank) {
|
|
||||||
if (stats.rank < lastRank) {
|
|
||||||
setMessage(`⬆️ Du bist auf Platz ${stats.rank} aufgestiegen!`);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
setMessage(`⬇️ Du bist auf Platz ${stats.rank} gerutscht — hol dir die Punkte zurück!`);
|
|
||||||
}
|
|
||||||
sessionStorage.setItem(SHOWN_KEY, '1');
|
|
||||||
}
|
|
||||||
localStorage.setItem(RANK_KEY, String(stats.rank));
|
|
||||||
}).catch(() => { });
|
|
||||||
}, []);
|
|
||||||
function dismiss() { setMessage(null); }
|
|
||||||
return { message, dismiss };
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
const SEEN_KEY = 'tippspiel_seen_results';
|
|
||||||
function getSeenIds() {
|
|
||||||
try {
|
|
||||||
return new Set(JSON.parse(localStorage.getItem(SEEN_KEY) || '[]'));
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function markSeen(matchId) {
|
|
||||||
const seen = getSeenIds();
|
|
||||||
seen.add(matchId);
|
|
||||||
localStorage.setItem(SEEN_KEY, JSON.stringify([...seen]));
|
|
||||||
}
|
|
||||||
export function useRevealQueue(matches) {
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { jsx as _jsx } from "react/jsx-runtime";
|
|
||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom/client';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
|
||||||
import App from './App';
|
|
||||||
import './index.css';
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(BrowserRouter, { children: _jsx(App, {}) }) }));
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { api } from '../api/client';
|
|
||||||
import styles from './AdminPage.module.css';
|
|
||||||
export default function AdminPage() {
|
|
||||||
const [syncResult, setSyncResult] = useState(null);
|
|
||||||
const [evalResult, setEvalResult] = useState(null);
|
|
||||||
const [refreshResult, setRefreshResult] = useState(null);
|
|
||||||
const [syncing, setSyncing] = useState(false);
|
|
||||||
const [evaluating, setEvaluating] = useState(false);
|
|
||||||
const [refreshing, setRefreshing] = useState(false);
|
|
||||||
const handleSync = async () => {
|
|
||||||
setSyncing(true);
|
|
||||||
setSyncResult(null);
|
|
||||||
try {
|
|
||||||
const res = await api.syncMatches();
|
|
||||||
setSyncResult({ success: true, timestamp: new Date(), message: `${res.total} Spiele geladen — ${res.created} neu, ${res.updated} aktualisiert` });
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
setSyncResult({ success: false, timestamp: new Date(), message: e.message });
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setSyncing(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const handleEvaluate = async () => {
|
|
||||||
setEvaluating(true);
|
|
||||||
setEvalResult(null);
|
|
||||||
try {
|
|
||||||
const res = await api.evaluateTips();
|
|
||||||
setEvalResult({ success: true, timestamp: new Date(), message: `${res.matchesEvaluated} Spiele ausgewertet — ${res.tipsUpdated} Tipps bewertet` });
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
setEvalResult({ success: false, timestamp: new Date(), message: e.message });
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setEvaluating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const handleRefreshLeaderboard = async () => {
|
|
||||||
setRefreshing(true);
|
|
||||||
setRefreshResult(null);
|
|
||||||
try {
|
|
||||||
await fetch('/api/admin/refresh-leaderboard', { method: 'POST' });
|
|
||||||
setRefreshResult({ success: true, timestamp: new Date(), message: 'Materialized View aktualisiert' });
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
setRefreshResult({ success: false, timestamp: new Date(), message: e.message });
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setRefreshing(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
function formatTime(d) {
|
|
||||||
return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
||||||
}
|
|
||||||
return (_jsxs("div", { className: styles.page, children: [_jsxs("div", { className: styles.pageHeader, children: [_jsx("h1", { className: `font-display ${styles.title}`, children: "Administration" }), _jsx("div", { className: styles.roleBadge, children: "Editor" })] }), _jsx("p", { className: styles.hint, children: "Nur f\u00FCr Editoren sichtbar. Nach Staffbase-Freischaltung wird diese Seite durch Rollenpr\u00FCfung gesch\u00FCtzt." }), _jsxs("div", { className: styles.cards, children: [_jsx(ActionCard, { icon: "\u21BB", title: "Spiele synchronisieren", desc: "L\u00E4dt alle WM 2026-Spiele von football-data.org und aktualisiert die Datenbank.", result: syncResult, loading: syncing, loadingLabel: "Wird synchronisiert\u2026", actionLabel: "Jetzt synchronisieren", onAction: handleSync, formatTime: formatTime }), _jsx(ActionCard, { icon: "\u25C8", title: "Tipps auswerten", desc: "Berechnet Punkte f\u00FCr alle abgeschlossenen Spiele und aktualisiert die Rangliste.", result: evalResult, loading: evaluating, loadingLabel: "Wird ausgewertet\u2026", actionLabel: "Tipps auswerten", onAction: handleEvaluate, formatTime: formatTime }), _jsx(ActionCard, { icon: "\u27F3", title: "Rangliste aktualisieren", desc: "Aktualisiert die Materialized View manuell \u2014 normalerweise automatisch nach Auswertung.", result: refreshResult, loading: refreshing, loadingLabel: "Wird aktualisiert\u2026", actionLabel: "Rangliste neu berechnen", onAction: handleRefreshLeaderboard, formatTime: formatTime })] })] }));
|
|
||||||
}
|
|
||||||
/* ── Sub-component ── */
|
|
||||||
function ActionCard({ icon, title, desc, result, loading, loadingLabel, actionLabel, onAction, formatTime, }) {
|
|
||||||
return (_jsxs("div", { className: `card ${styles.actionCard}`, children: [_jsxs("div", { className: styles.cardTop, children: [_jsx("div", { className: styles.cardIcon, children: icon }), _jsxs("div", { children: [_jsx("div", { className: styles.cardTitle, children: title }), _jsx("div", { className: styles.cardDesc, children: desc })] })] }), result && (_jsxs("div", { className: `${styles.resultBar} ${result.success ? styles.resultSuccess : styles.resultError}`, children: [_jsx("span", { className: styles.resultDot }), _jsx("span", { className: styles.resultMsg, children: result.message }), _jsx("span", { className: styles.resultTime, children: formatTime(result.timestamp) })] })), _jsx("button", { className: `${styles.actionBtn} ${loading ? styles.actionBtnLoading : ''}`, onClick: onAction, disabled: loading, children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.spinner }), loadingLabel] })) : actionLabel })] }));
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { api } from '../api/client';
|
|
||||||
import styles from './DashboardPage.module.css';
|
|
||||||
function formatStreak(streak) {
|
|
||||||
if (streak >= 20)
|
|
||||||
return `⚡${streak}`;
|
|
||||||
if (streak >= 10)
|
|
||||||
return `🔥🔥${streak}`;
|
|
||||||
if (streak >= 3)
|
|
||||||
return `🔥${streak}`;
|
|
||||||
if (streak > 0)
|
|
||||||
return String(streak);
|
|
||||||
return '0';
|
|
||||||
}
|
|
||||||
function formatCountdown(minutes) {
|
|
||||||
if (minutes < 60)
|
|
||||||
return `in ${minutes} Min`;
|
|
||||||
if (minutes < 60 * 24)
|
|
||||||
return `in ${Math.floor(minutes / 60)}h`;
|
|
||||||
return `in ${Math.floor(minutes / (60 * 24))} Tagen`;
|
|
||||||
}
|
|
||||||
export default function DashboardPage(_props) {
|
|
||||||
const [data, setData] = useState(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState(false);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
useEffect(() => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(false);
|
|
||||||
api.getDashboard()
|
|
||||||
.then(d => { setData(d); setLoading(false); })
|
|
||||||
.catch(() => { setError(true); setLoading(false); });
|
|
||||||
}, []);
|
|
||||||
if (loading)
|
|
||||||
return _jsx("div", { className: styles.loading, children: "Laden..." });
|
|
||||||
if (error || !data)
|
|
||||||
return _jsx("div", { className: styles.error, children: "Dashboard konnte nicht geladen werden." });
|
|
||||||
const { hero, stats, nudges } = data;
|
|
||||||
return (_jsxs("div", { className: styles.dashboard, children: [_jsxs("div", { className: `card ${styles.hero}`, onClick: () => navigate('/spiele'), children: [_jsxs("div", { className: styles.heroLabel, children: [_jsx("span", { children: "N\u00E4chstes Spiel" }), hero && (_jsx("span", { className: styles.heroCountdown, children: formatCountdown(hero.match.minutesUntilKickoff) }))] }), hero ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.heroTeams, children: [_jsxs("div", { className: styles.heroTeam, children: [hero.match.homeTeam.crest ? (_jsx("img", { src: hero.match.homeTeam.crest, alt: hero.match.homeTeam.name, className: styles.heroCrest })) : (_jsx("div", { className: styles.heroCrest })), _jsx("span", { children: hero.match.homeTeam.shortName })] }), _jsx("span", { className: styles.heroVs, children: "vs" }), _jsxs("div", { className: styles.heroTeam, children: [hero.match.awayTeam.crest ? (_jsx("img", { src: hero.match.awayTeam.crest, alt: hero.match.awayTeam.name, className: styles.heroCrest })) : (_jsx("div", { className: styles.heroCrest })), _jsx("span", { children: hero.match.awayTeam.shortName })] })] }), hero.userTip ? (_jsxs("div", { className: styles.heroTip, children: ["Dein Tipp: ", hero.userTip.home, ":", hero.userTip.away, " \u2713"] })) : hero.tippable ? (_jsx("button", { className: styles.heroTipBtn, onClick: e => { e.stopPropagation(); navigate('/spiele'); }, children: "Jetzt tippen" })) : null] })) : (_jsx("p", { style: { textAlign: 'center', color: 'var(--text-muted)', margin: '16px 0' }, children: "Keine anstehenden Spiele" }))] }), _jsxs("div", { className: styles.statsRow, children: [_jsxs("div", { className: `card ${styles.statTile}`, children: [_jsx("span", { className: styles.statValue, children: stats.rank !== null ? stats.rank : '—' }), _jsx("span", { className: styles.statLabel, children: "Dein Rang" })] }), _jsxs("div", { className: `card ${styles.statTile}`, children: [_jsx("span", { className: styles.statValue, children: stats.totalPoints }), _jsx("span", { className: styles.statLabel, children: "Punkte" })] }), _jsxs("div", { className: `card ${styles.statTile}`, children: [_jsx("span", { className: styles.statValue, children: formatStreak(stats.streak) }), _jsx("span", { className: styles.statLabel, children: "Streak" })] })] }), nudges.length > 0 && (_jsx("div", { className: styles.nudges, children: nudges.map((nudge, i) => (_jsx("div", { className: `card ${styles.nudge}`, onClick: () => {
|
|
||||||
if (nudge.type === 'untipped')
|
|
||||||
navigate('/spiele');
|
|
||||||
else if (nudge.type === 'leader')
|
|
||||||
navigate('/rangliste');
|
|
||||||
}, children: nudge.text }, i))) }))] }));
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { api } from '../api/client';
|
|
||||||
import styles from './LeaderboardPage.module.css';
|
|
||||||
function initials(name) {
|
|
||||||
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
|
||||||
}
|
|
||||||
function TrendIcon({ entry, prev }) {
|
|
||||||
if (!prev)
|
|
||||||
return _jsx("span", { className: styles.trendNeutral, children: "\u2192" });
|
|
||||||
if (entry.total_points > prev.total_points)
|
|
||||||
return _jsx("span", { className: styles.trendUp, children: "\u2197" });
|
|
||||||
if (entry.total_points < prev.total_points)
|
|
||||||
return _jsx("span", { className: styles.trendDown, children: "\u2198" });
|
|
||||||
return _jsx("span", { className: styles.trendNeutral, children: "\u2192" });
|
|
||||||
}
|
|
||||||
export default function LeaderboardPage() {
|
|
||||||
const [data, setData] = useState(null);
|
|
||||||
const [tippableCount, setTippableCount] = useState(0);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
useEffect(() => {
|
|
||||||
Promise.all([
|
|
||||||
api.getLeaderboard(),
|
|
||||||
api.getMatches(),
|
|
||||||
]).then(([lb, matches]) => {
|
|
||||||
setData(lb);
|
|
||||||
setTippableCount(matches.matches.filter(m => m.tippable && !m.userTip).length);
|
|
||||||
}).finally(() => setLoading(false));
|
|
||||||
}, []);
|
|
||||||
if (loading)
|
|
||||||
return (_jsx("div", { className: styles.loading, children: _jsx("div", { className: styles.spinner }) }));
|
|
||||||
if (!data)
|
|
||||||
return null;
|
|
||||||
const { entries, currentUserId, currentUserRank, totalParticipants } = data;
|
|
||||||
const top3 = entries.slice(0, 3);
|
|
||||||
const rest = entries.slice(3);
|
|
||||||
const podiumSlots = [];
|
|
||||||
if (top3[1])
|
|
||||||
podiumSlots.push({ entry: top3[1], rank: 2, medal: '🥈', colorClass: styles.silver, barHeight: '64px' });
|
|
||||||
if (top3[0])
|
|
||||||
podiumSlots.push({ entry: top3[0], rank: 1, medal: '🥇', colorClass: styles.gold, barHeight: '96px' });
|
|
||||||
if (top3[2])
|
|
||||||
podiumSlots.push({ entry: top3[2], rank: 3, medal: '🥉', colorClass: styles.bronze, barHeight: '48px' });
|
|
||||||
return (_jsxs("div", { className: styles.page, children: [_jsxs("div", { className: styles.pageHeader, children: [_jsx("h1", { className: `font-display ${styles.title}`, children: "Rangliste" }), _jsxs("div", { className: styles.meta, children: [totalParticipants, " Teilnehmer", currentUserRank ? ` · Du: Platz ${currentUserRank}` : ''] })] }), entries.length === 0 ? (_jsx("div", { className: styles.empty, children: "Noch keine Punkte vergeben. Spiele m\u00FCssen erst abgeschlossen sein." })) : (_jsxs(_Fragment, { children: [top3.length > 0 && (_jsx("div", { className: styles.podiumWrap, children: podiumSlots.map(({ entry, rank, medal, colorClass, barHeight }) => {
|
|
||||||
const isMe = entry.user_id === currentUserId;
|
|
||||||
const isFirst = rank === 1;
|
|
||||||
return (_jsxs("div", { className: `${styles.podiumCard} ${isFirst ? styles.podiumFirst : ''}`, children: [_jsx("div", { className: styles.podiumMedal, children: medal }), _jsx("div", { className: `${styles.podiumAvatar} ${colorClass} ${isFirst ? styles.podiumAvatarLarge : ''} ${isMe ? styles.podiumAvatarMe : ''}`, children: initials(entry.full_name) }), _jsxs("div", { className: `${styles.podiumName} ${isMe ? styles.nameMe : ''}`, children: [entry.full_name.split(' ')[0], isMe ? ' (Ich)' : ''] }), _jsxs("div", { className: `${styles.podiumPoints} ${colorClass}`, children: [entry.total_points.toLocaleString('de-DE'), _jsx("span", { className: styles.podiumPtLabel, children: " Pkt" })] }), _jsx("div", { className: `${styles.podiumBar} ${colorClass}Bar`, style: { height: barHeight } })] }, entry.user_id));
|
|
||||||
}) })), rest.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.listHeader, children: [_jsx("span", { children: "POS" }), _jsx("span", { children: "SPIELER" }), _jsx("span", { children: "TREND" }), _jsx("span", { children: "PUNKTE" })] }), _jsx("div", { className: styles.list, children: rest.map((entry, i) => {
|
|
||||||
const isMe = entry.user_id === currentUserId;
|
|
||||||
const prev = rest[i - 1];
|
|
||||||
return (_jsxs("div", { className: `card ${styles.row} ${isMe ? styles.rowMe : ''}`, children: [_jsx("div", { className: styles.rankCol, children: _jsx("span", { className: styles.rankNum, children: entry.rank }) }), _jsx("div", { className: `${styles.avatarSmall} ${isMe ? styles.avatarSmallMe : ''}`, children: initials(entry.full_name) }), _jsxs("div", { className: styles.nameCol, children: [_jsx("div", { className: styles.nameRow, children: _jsxs("span", { className: `${styles.rowName} ${isMe ? styles.nameMe : ''}`, children: [entry.full_name, isMe ? ' (Ich)' : ''] }) }), entry.team && _jsx("div", { className: styles.rowTeam, children: entry.team }), isMe && _jsx("div", { className: styles.aufholjagd, children: "AUFHOLJAGD!" })] }), _jsx("div", { className: styles.trendCol, children: _jsx(TrendIcon, { entry: entry, prev: prev }) }), _jsx("div", { className: styles.pointsCol, children: entry.total_points.toLocaleString('de-DE') })] }, entry.user_id));
|
|
||||||
}) })] })), tippableCount > 0 && (_jsxs("div", { className: `card ${styles.ctaCard}`, children: [_jsxs("div", { className: styles.ctaText, children: [_jsx("div", { className: styles.ctaTitle, children: "Punkte sichern!" }), _jsxs("div", { className: styles.ctaBody, children: [tippableCount, " Spiel", tippableCount !== 1 ? 'e' : '', " noch ohne Tipp \u2014 kletter nach oben."] })] }), _jsx("button", { className: `btn-primary ${styles.ctaBtn}`, onClick: () => navigate('/'), children: "TIPPEN" })] }))] }))] }));
|
|
||||||
}
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
|
||||||
import { api } from '../api/client';
|
|
||||||
import MatchCard from '../components/MatchCard';
|
|
||||||
import TipModal from '../components/TipModal';
|
|
||||||
import { useRevealQueue } from '../hooks/useRevealQueue';
|
|
||||||
import ConfettiReveal from '../components/ConfettiReveal';
|
|
||||||
import styles from './MatchesPage.module.css';
|
|
||||||
function groupIntoSections(matches) {
|
|
||||||
const now = new Date();
|
|
||||||
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
||||||
const tomorrowStart = new Date(todayStart);
|
|
||||||
tomorrowStart.setDate(todayStart.getDate() + 1);
|
|
||||||
const dayAfterTomorrow = new Date(todayStart);
|
|
||||||
dayAfterTomorrow.setDate(todayStart.getDate() + 2);
|
|
||||||
const weekEnd = new Date(todayStart);
|
|
||||||
weekEnd.setDate(todayStart.getDate() + 7);
|
|
||||||
const sections = [
|
|
||||||
{ key: 'today', label: 'Heute', matches: [], defaultOpen: true, highlight: true },
|
|
||||||
{ key: 'tomorrow', label: 'Morgen', matches: [], defaultOpen: true, highlight: false },
|
|
||||||
{ key: 'week', label: 'Diese Woche', matches: [], defaultOpen: false, highlight: false },
|
|
||||||
{ key: 'later', label: 'Demnächst', matches: [], defaultOpen: false, highlight: false },
|
|
||||||
{ key: 'past', label: 'Vergangene Spiele', matches: [], defaultOpen: false, highlight: false },
|
|
||||||
];
|
|
||||||
for (const match of matches) {
|
|
||||||
const d = new Date(match.utcDate);
|
|
||||||
if (d < todayStart) {
|
|
||||||
sections[4].matches.push(match); // past
|
|
||||||
}
|
|
||||||
else if (d < tomorrowStart) {
|
|
||||||
sections[0].matches.push(match); // today
|
|
||||||
}
|
|
||||||
else if (d < dayAfterTomorrow) {
|
|
||||||
sections[1].matches.push(match); // tomorrow
|
|
||||||
}
|
|
||||||
else if (d < weekEnd) {
|
|
||||||
sections[2].matches.push(match); // this week
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
sections[3].matches.push(match); // later
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Past matches: most recent first
|
|
||||||
sections[4].matches.reverse();
|
|
||||||
return sections.filter(s => s.matches.length > 0);
|
|
||||||
}
|
|
||||||
export default function MatchesPage() {
|
|
||||||
const [allMatches, setAllMatches] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState(null);
|
|
||||||
const [stageFilter, setStageFilter] = useState('');
|
|
||||||
const [selectedMatch, setSelectedMatch] = useState(null);
|
|
||||||
const [openSections, setOpenSections] = useState(new Set());
|
|
||||||
const loadMatches = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const res = await api.getMatches();
|
|
||||||
setAllMatches(res.matches);
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
setError(e.message);
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
useEffect(() => { loadMatches(); }, [loadMatches]);
|
|
||||||
// Initialize open sections after initial load
|
|
||||||
useEffect(() => {
|
|
||||||
if (allMatches.length > 0) {
|
|
||||||
const filteredMatches = allMatches.filter(m => !stageFilter || m.stage === stageFilter);
|
|
||||||
const sections = groupIntoSections(filteredMatches);
|
|
||||||
setOpenSections(new Set(sections.filter(s => s.defaultOpen).map(s => s.key)));
|
|
||||||
}
|
|
||||||
}, [allMatches]); // only on initial load
|
|
||||||
const handleTipSaved = (matchId, tipHome, tipAway) => {
|
|
||||||
setAllMatches(prev => prev.map(m => m.id === matchId
|
|
||||||
? { ...m, userTip: { home: tipHome, away: tipAway, points: null } }
|
|
||||||
: m));
|
|
||||||
setSelectedMatch(null);
|
|
||||||
};
|
|
||||||
function toggleSection(key) {
|
|
||||||
setOpenSections(prev => {
|
|
||||||
const next = new Set(prev);
|
|
||||||
if (next.has(key))
|
|
||||||
next.delete(key);
|
|
||||||
else
|
|
||||||
next.add(key);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const { current: revealMatch, dismissCurrent } = useRevealQueue(allMatches);
|
|
||||||
const filteredMatches = allMatches.filter(m => !stageFilter || m.stage === stageFilter);
|
|
||||||
const sections = groupIntoSections(filteredMatches);
|
|
||||||
// Stats always over all matches (unfiltered)
|
|
||||||
const tipped = allMatches.filter(m => m.userTip).length;
|
|
||||||
const tippable = allMatches.filter(m => m.tippable && !m.userTip).length;
|
|
||||||
return (_jsxs("div", { className: styles.page, children: [revealMatch && (_jsx(ConfettiReveal, { match: revealMatch, onDismiss: dismissCurrent })), _jsxs("div", { className: styles.statsRow, children: [_jsxs("div", { className: `card ${styles.statCard}`, children: [_jsx("span", { className: styles.statValue, children: allMatches.length }), _jsx("span", { className: styles.statLabel, children: "Spiele gesamt" })] }), _jsxs("div", { className: `card ${styles.statCard}`, children: [_jsx("span", { className: `${styles.statValue} text-primary`, children: tipped }), _jsx("span", { className: styles.statLabel, children: "Tipps abgegeben" })] }), _jsxs("div", { className: `card ${styles.statCard}`, children: [_jsx("span", { className: `${styles.statValue} text-gold`, children: tippable }), _jsx("span", { className: styles.statLabel, children: "Noch tippbar" })] })] }), _jsxs("select", { className: styles.stageFilter, value: stageFilter, onChange: e => setStageFilter(e.target.value), children: [_jsx("option", { value: "", children: "Alle Phasen" }), _jsx("option", { value: "GROUP_STAGE", children: "Gruppenphase" }), _jsx("option", { value: "ROUND_OF_32", children: "Runde der 32" }), _jsx("option", { value: "LAST_16", children: "Achtelfinale" }), _jsx("option", { value: "QUARTER_FINALS", children: "Viertelfinale" }), _jsx("option", { value: "SEMI_FINALS", children: "Halbfinale" }), _jsx("option", { value: "THIRD_PLACE", children: "Platz 3" }), _jsx("option", { value: "FINAL", children: "Finale" })] }), loading && (_jsxs("div", { className: styles.loadingState, children: [_jsx("div", { className: styles.spinner }), _jsx("span", { children: "Spiele werden geladen\u2026" })] })), error && (_jsxs("div", { className: styles.errorState, children: [_jsxs("span", { children: ["\u26A0\uFE0F ", error] }), _jsx("button", { className: "btn-ghost", onClick: loadMatches, children: "Erneut versuchen" })] })), !loading && !error && filteredMatches.length === 0 && (_jsxs("div", { className: styles.emptyState, children: [_jsx("span", { className: styles.emptyIcon, children: "\u26BD" }), _jsx("p", { children: "Noch keine Spiele vorhanden." }), _jsx("p", { className: styles.emptyHint, children: "Geh auf die Admin-Seite und klicke \"Spiele synchronisieren\"." })] })), !loading && !error && sections.map(section => (_jsxs("div", { className: `${styles.section} ${section.highlight ? styles.sectionHighlight : ''}`, children: [_jsxs("button", { className: styles.sectionHeader, onClick: () => toggleSection(section.key), children: [_jsx("span", { className: styles.sectionLabel, children: section.label }), _jsxs("span", { className: styles.sectionCount, children: [section.matches.length, " Spiele"] }), _jsx("span", { className: styles.sectionChevron, children: openSections.has(section.key) ? '▾' : '▸' })] }), openSections.has(section.key) && (_jsx("div", { className: styles.sectionContent, children: section.matches.map(match => (_jsx(MatchCard, { match: match, onTip: () => setSelectedMatch(match) }, match.id))) }))] }, section.key))), selectedMatch && (_jsx(TipModal, { match: selectedMatch, onClose: () => setSelectedMatch(null), onSaved: handleTipSaved }))] }));
|
|
||||||
}
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { api } from '../api/client';
|
|
||||||
import StatsRing from '../components/StatsRing';
|
|
||||||
import styles from './ProfilePage.module.css';
|
|
||||||
function initials(name) {
|
|
||||||
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
|
||||||
}
|
|
||||||
function mostCommonTip(tips) {
|
|
||||||
const counts = {};
|
|
||||||
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) {
|
|
||||||
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(null);
|
|
||||||
const [tips, setTips] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [teamEdit, setTeamEdit] = useState(false);
|
|
||||||
const [teamValue, setTeamValue] = useState('');
|
|
||||||
const [teamSaving, setTeamSaving] = useState(false);
|
|
||||||
const [teamMsg, setTeamMsg] = useState(null);
|
|
||||||
useEffect(() => {
|
|
||||||
Promise.all([
|
|
||||||
api.getMyStats(),
|
|
||||||
api.getMyTips(),
|
|
||||||
]).then(([s, t]) => {
|
|
||||||
setStats(s);
|
|
||||||
setTeamValue(s.team ?? '');
|
|
||||||
setTips(t.tips);
|
|
||||||
}).finally(() => setLoading(false));
|
|
||||||
}, []);
|
|
||||||
const saveTeam = async () => {
|
|
||||||
if (!teamValue.trim())
|
|
||||||
return;
|
|
||||||
setTeamSaving(true);
|
|
||||||
setTeamMsg(null);
|
|
||||||
try {
|
|
||||||
const res = await api.updateTeam(teamValue);
|
|
||||||
setStats(prev => prev ? { ...prev, team: res.team } : prev);
|
|
||||||
setTeamValue(res.team);
|
|
||||||
setTeamEdit(false);
|
|
||||||
setTeamMsg({ ok: true, text: 'Team gespeichert' });
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
setTeamMsg({ ok: false, text: e.message });
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
setTeamSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (loading)
|
|
||||||
return _jsx("div", { className: styles.loading, children: _jsx("div", { className: styles.spinner }) });
|
|
||||||
if (!stats)
|
|
||||||
return _jsx("div", { className: styles.empty, children: "Profil nicht verf\u00FCgbar." });
|
|
||||||
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) {
|
|
||||||
if (points === null)
|
|
||||||
return '';
|
|
||||||
if (points >= 3)
|
|
||||||
return styles.badgeExact;
|
|
||||||
if (points >= 1)
|
|
||||||
return styles.badgeTendency;
|
|
||||||
return styles.badgeWrong;
|
|
||||||
}
|
|
||||||
function pointLabel(points) {
|
|
||||||
if (points === null)
|
|
||||||
return '';
|
|
||||||
if (points >= 3)
|
|
||||||
return `${points} Pkt ✓✓`;
|
|
||||||
if (points >= 1)
|
|
||||||
return `${points} Pkt ✓`;
|
|
||||||
return `${points} Pkt ✗`;
|
|
||||||
}
|
|
||||||
return (_jsxs("div", { className: styles.page, children: [_jsxs("div", { className: `card ${styles.heroCard}`, children: [_jsx("div", { className: styles.avatar, children: initials(stats.fullName) }), _jsxs("div", { className: styles.heroInfo, children: [_jsx("h1", { className: `font-display ${styles.name}`, children: stats.fullName }), stats.rank && _jsxs("div", { className: styles.rankBadge, children: ["\uD83C\uDFC6 Platz ", stats.rank] }), _jsx("div", { className: styles.teamRow, children: teamEdit ? (_jsxs("div", { className: styles.teamEditRow, children: [_jsx("input", { className: styles.teamInput, value: teamValue, onChange: e => setTeamValue(e.target.value), placeholder: "z. B. Vertrieb S\u00FCd", maxLength: 80, autoFocus: true, onKeyDown: e => {
|
|
||||||
if (e.key === 'Enter')
|
|
||||||
saveTeam();
|
|
||||||
if (e.key === 'Escape')
|
|
||||||
setTeamEdit(false);
|
|
||||||
} }), _jsx("button", { className: styles.teamSaveBtn, onClick: saveTeam, disabled: teamSaving, children: teamSaving ? _jsx("span", { className: styles.spinnerSm }) : '✓' }), _jsx("button", { className: styles.teamCancelBtn, onClick: () => { setTeamEdit(false); setTeamValue(stats.team ?? ''); }, children: "\u2715" })] })) : (_jsx("button", { className: styles.teamBtn, onClick: () => setTeamEdit(true), children: stats.team
|
|
||||||
? _jsxs(_Fragment, { children: [_jsx("span", { className: styles.teamName, children: stats.team }), _jsx("span", { className: styles.teamEditHint, children: "bearbeiten" })] })
|
|
||||||
: _jsx("span", { className: styles.teamPlaceholder, children: "+ Team hinzuf\u00FCgen" }) })) }), teamMsg && (_jsx("div", { className: `${styles.teamMsg} ${teamMsg.ok ? styles.teamMsgOk : styles.teamMsgErr}`, children: teamMsg.text }))] })] }), _jsxs("div", { className: `card ${styles.ringCard}`, children: [_jsx("h2", { className: styles.sectionTitle, children: "Tipp-Statistik" }), _jsx(StatsRing, { exact: stats.exactCount, tendency: stats.tendencyCount, wrong: stats.wrongCount, total: stats.totalPoints }), stats.accuracy > 0 && (_jsxs("div", { className: styles.accuracyRow, children: [_jsx("span", { className: styles.accuracyLabel, children: "Trefferquote" }), _jsxs("span", { className: `font-display ${styles.accuracyVal}`, children: [stats.accuracy, "%"] })] }))] }), recentTips.length > 0 && (_jsxs("div", { className: `card ${styles.historyCard}`, children: [_jsx("h2", { className: styles.sectionTitle, children: "Letzte Tipps" }), _jsx("ul", { className: styles.tipList, children: recentTips.map((tip, i) => (_jsxs("li", { className: `${styles.tipRow} ${i % 2 === 1 ? styles.tipRowAlt : ''}`, children: [_jsxs("span", { className: styles.tipMatch, children: [tip.home_team_short, " vs ", tip.away_team_short] }), _jsxs("span", { className: styles.tipScore, children: ["Tipp: ", tip.tip_home, ":", tip.tip_away] }), _jsx("span", { className: `${styles.pointBadge} ${pointBadgeClass(tip.points)}`, children: pointLabel(tip.points) })] }, tip.match_id))) })] })), tips.length > 0 && (_jsxs("div", { className: styles.funStats, children: [_jsx("h2", { className: styles.sectionTitle, children: "Fun Facts" }), _jsxs("div", { className: styles.funGrid, children: [_jsxs("div", { className: `card ${styles.funCard}`, children: [_jsx("span", { className: styles.funIcon, children: "\uD83C\uDFAF" }), _jsx("span", { className: styles.funLabel, children: "Lieblings-Tipp" }), _jsx("span", { className: styles.funValue, children: favTip })] }), _jsxs("div", { className: `card ${styles.funCard}`, children: [_jsx("span", { className: styles.funIcon, children: "\uD83C\uDFE0" }), _jsx("span", { className: styles.funLabel, children: "Heimsiege getippt" }), _jsxs("span", { className: styles.funValue, children: [homePct, "%"] })] }), _jsxs("div", { className: `card ${styles.funCard}`, children: [_jsx("span", { className: styles.funIcon, children: "\uD83D\uDCCA" }), _jsx("span", { className: styles.funLabel, children: "Tipps abgegeben" }), _jsx("span", { className: styles.funValue, children: stats.tipsCount })] })] })] }))] }));
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user