chore: suppress markdownlint warnings in spec docs
Build & Deploy Tippspiel / build (push) Successful in 40s

This commit is contained in:
Ronny
2026-04-12 19:39:53 +02:00
parent aa0c065bd6
commit a521f5656c
2 changed files with 96 additions and 0 deletions
+1
View File
@@ -0,0 +1 @@
docs/superpowers/**
@@ -1,3 +1,4 @@
<!-- markdownlint-disable -->
# Phase 1: Engagement & UX-Polish — Design Spec # Phase 1: Engagement & UX-Polish — Design Spec
**Datum:** 2026-04-11 **Datum:** 2026-04-11
@@ -15,22 +16,29 @@ Die aktuelle Startseite zeigt 104 Spiele als endlose Liste. Die neue Startseite
### Layout: "Hero + Stats + Nudges" ### Layout: "Hero + Stats + Nudges"
**Hero-Bereich (oberes Drittel):** **Hero-Bereich (oberes Drittel):**
- Nächstes tippbares Spiel prominent angezeigt mit Team-Flaggen und Countdown-Timer - Nächstes tippbares Spiel prominent angezeigt mit Team-Flaggen und Countdown-Timer
- Wenn bereits getippt: Tipp anzeigen mit Häkchen ("Dein Tipp: 2:1 ✓") - Wenn bereits getippt: Tipp anzeigen mit Häkchen ("Dein Tipp: 2:1 ✓")
- Wenn noch nicht getippt: "Jetzt tippen"-Button - Wenn noch nicht getippt: "Jetzt tippen"-Button
- Wenn kein Spiel ansteht: Nächstes Spiel mit Datum ("Nächstes Spiel: Morgen 21:00") - Wenn kein Spiel ansteht: Nächstes Spiel mit Datum ("Nächstes Spiel: Morgen 21:00")
**Stats-Kacheln (mittleres Drittel):** **Stats-Kacheln (mittleres Drittel):**
- Drei kompakte Kacheln nebeneinander: - Drei kompakte Kacheln nebeneinander:
- **Dein Rang** (Platzierung mit Pfeil hoch/runter seit letzter Änderung) - **Dein Rang** (Platzierung mit Pfeil hoch/runter seit letzter Änderung)
- **Punkte** (Gesamtpunktzahl) - **Punkte** (Gesamtpunktzahl)
- **Streak** (🔥-Counter, aktuelle Serie an abgegebenen Tipps) - **Streak** (🔥-Counter, aktuelle Serie an abgegebenen Tipps)
**Nudge-Bereich (unteres Drittel):** **Nudge-Bereich (unteres Drittel):**
- Kontextabhängige Handlungsaufforderungen: - Kontextabhängige Handlungsaufforderungen:
- "📅 Heute noch 2 Spiele ohne Tipp" → Link zum Spielplan - "📅 Heute noch 2 Spiele ohne Tipp" → Link zum Spielplan
- "🏆 Max führt mit 15 Punkten" → Link zur Rangliste - "🏆 Max führt mit 15 Punkten" → Link zur Rangliste
- "🎯 Letzte Auswertung: 3 Punkte für Brazil vs Serbia!" → Link zum Ergebnis - "🎯 Letzte Auswertung: 3 Punkte für Brazil vs Serbia!" → Link zum Ergebnis
- Maximal 2-3 Nudges, priorisiert nach Relevanz - Maximal 2-3 Nudges, priorisiert nach Relevanz
**Navigationsänderung:** Der volle Spielplan wird zur eigenen Seite "Spiele" in der Navigation. Dashboard ist die neue Startseite. **Navigationsänderung:** Der volle Spielplan wird zur eigenen Seite "Spiele" in der Navigation. Dashboard ist die neue Startseite.
@@ -42,9 +50,13 @@ Die aktuelle Startseite zeigt 104 Spiele als endlose Liste. Die neue Startseite
Die Header-Navigation wird durch eine feste Bottom Navigation ersetzt (Mobile-First-Standard). Die Header-Navigation wird durch eine feste Bottom Navigation ersetzt (Mobile-First-Standard).
**4 Haupttabs:** **4 Haupttabs:**
- 🏠 **Home** — Dashboard (neue Startseite) - 🏠 **Home** — Dashboard (neue Startseite)
-**Spiele** — Spielplan mit Smart Sections -**Spiele** — Spielplan mit Smart Sections
- 🏆 **Rangliste** — Leaderboard - 🏆 **Rangliste** — Leaderboard
- 👤 **Profil** — Persönliche Statistiken - 👤 **Profil** — Persönliche Statistiken
**Header:** Wird schlank — nur Logo ("WM 2026 Tippspiel"), optional Notification-Badge, Theme-Toggle. **Header:** Wird schlank — nur Logo ("WM 2026 Tippspiel"), optional Notification-Badge, Theme-Toggle.
@@ -70,9 +82,13 @@ Die 104-Spiele-Liste wird intelligent in Zeitabschnitte gruppiert.
| **Vergangene Spiele** | Kollapsiert | Letzte Ergebnisse + eigene Punkte | | **Vergangene Spiele** | Kollapsiert | Letzte Ergebnisse + eigene Punkte |
**Verhalten:** **Verhalten:**
- Abschnitte sind auf-/zuklappbar (Accordion) - Abschnitte sind auf-/zuklappbar (Accordion)
- "Heute" scrollt automatisch in den Viewport beim Öffnen - "Heute" scrollt automatisch in den Viewport beim Öffnen
- Leerer Abschnitt wird ausgeblendet (z.B. "Heute" wenn kein Spiel) - Leerer Abschnitt wird ausgeblendet (z.B. "Heute" wenn kein Spiel)
- Stage-Filter (Gruppenphase, Achtelfinale...) wird zum optionalen Dropdown statt Button-Leiste - Stage-Filter (Gruppenphase, Achtelfinale...) wird zum optionalen Dropdown statt Button-Leiste
--- ---
@@ -84,33 +100,50 @@ Jede Match-Card sieht visuell anders aus je nach Spielstatus. Die aktuellen Card
**5 visuelle Zustände:** **5 visuelle Zustände:**
### ⏳ Offen (tippbar) ### ⏳ Offen (tippbar)
- Standard-Design mit Team-Flaggen und Kick-off-Zeit - Standard-Design mit Team-Flaggen und Kick-off-Zeit
- "Tipp abgeben"-Button prominent - "Tipp abgeben"-Button prominent
- Countdown wenn <24h bis Anpfiff - Countdown wenn <24h bis Anpfiff
- Pulsierender roter Countdown wenn <1h - Pulsierender roter Countdown wenn <1h
### ✅ Getippt ### ✅ Getippt
- Grüner linker Rand / Akzent - Grüner linker Rand / Akzent
- Tipp prominent angezeigt ("Dein Tipp: 2:1") - Tipp prominent angezeigt ("Dein Tipp: 2:1")
- "Ändern"-Link statt "Tipp abgeben" - "Ändern"-Link statt "Tipp abgeben"
- Häkchen-Icon - Häkchen-Icon
### 🔴 Live (in Spielgang) ### 🔴 Live (in Spielgang)
- Pulsierender roter Punkt neben "LIVE" - Pulsierender roter Punkt neben "LIVE"
- Aktueller Spielstand (wenn über Sync verfügbar) - Aktueller Spielstand (wenn über Sync verfügbar)
- Tipp daneben zum Vergleich - Tipp daneben zum Vergleich
- Tippfenster geschlossen — Schloss-Icon - Tippfenster geschlossen — Schloss-Icon
### 🏁 Beendet (ausgewertet) ### 🏁 Beendet (ausgewertet)
- Endergebnis prominent - Endergebnis prominent
- Dein Tipp + Punkte-Badge: - Dein Tipp + Punkte-Badge:
- 🥇 **Gold-Badge (3 Pkt):** Exakter Treffer, goldener Schimmer-Effekt - 🥇 **Gold-Badge (3 Pkt):** Exakter Treffer, goldener Schimmer-Effekt
-**Grüner Badge (1 Pkt):** Richtige Tendenz -**Grüner Badge (1 Pkt):** Richtige Tendenz
-**Grauer Badge (0 Pkt):** Falsch getippt -**Grauer Badge (0 Pkt):** Falsch getippt
### 🔒 Verpasst (nicht getippt, Spiel vorbei) ### 🔒 Verpasst (nicht getippt, Spiel vorbei)
- Ausgegraut / reduzierte Opacity - Ausgegraut / reduzierte Opacity
- "Nicht getippt" Label - "Nicht getippt" Label
- Leichter visueller "Shame-Effekt" als Motivation fürs nächste Mal - Leichter visueller "Shame-Effekt" als Motivation fürs nächste Mal
--- ---
@@ -120,49 +153,70 @@ Jede Match-Card sieht visuell anders aus je nach Spielstatus. Die aktuellen Card
5 Schlüsselmomente, die die App lebendig machen. 5 Schlüsselmomente, die die App lebendig machen.
### 5.1 Tipp-Bestätigung ### 5.1 Tipp-Bestätigung
- **Trigger:** User klickt "Tipp bestätigen" - **Trigger:** User klickt "Tipp bestätigen"
- **Animation:** Card pulsiert kurz grün, animiertes Häkchen fliegt rein - **Animation:** Card pulsiert kurz grün, animiertes Häkchen fliegt rein
- **Text:** "Dein Tipp ist drin! 🎯" als kurze Success-Message - **Text:** "Dein Tipp ist drin! 🎯" als kurze Success-Message
- **Mobile:** Subtiles Haptic-Feedback (Vibration via `navigator.vibrate`) - **Mobile:** Subtiles Haptic-Feedback (Vibration via `navigator.vibrate`)
- **Dauer:** ~1 Sekunde, dann Modal schließt - **Dauer:** ~1 Sekunde, dann Modal schließt
### 5.2 Live-Countdown vor Anpfiff ### 5.2 Live-Countdown vor Anpfiff
- **Trigger:** Spiel startet in <1 Stunde - **Trigger:** Spiel startet in <1 Stunde
- **Anzeige:** Pulsierender roter Countdown-Timer auf der Match-Card ("Noch 12 Min!") - **Anzeige:** Pulsierender roter Countdown-Timer auf der Match-Card ("Noch 12 Min!")
- **Urgency-Stufen:** - **Urgency-Stufen:**
- <24h: Countdown in Stunden ("in 5h") - <24h: Countdown in Stunden ("in 5h")
- <1h: Pulsierender roter Countdown in Minuten - <1h: Pulsierender roter Countdown in Minuten
- <5min: Schnelleres Pulsieren - <5min: Schnelleres Pulsieren
- **Nach Anpfiff:** "Tippfenster geschlossen" mit Schloss-Icon, sanfte Transition - **Nach Anpfiff:** "Tippfenster geschlossen" mit Schloss-Icon, sanfte Transition
### 5.3 Punkte-Reveal nach Spielende ### 5.3 Punkte-Reveal nach Spielende
- **Trigger:** User öffnet App / navigiert zu einem ausgewerteten Spiel, das noch nicht "gesehen" wurde - **Trigger:** User öffnet App / navigiert zu einem ausgewerteten Spiel, das noch nicht "gesehen" wurde
- **Sequenz (gestaffelt, ~2-3 Sekunden):** - **Sequenz (gestaffelt, ~2-3 Sekunden):**
1. Endergebnis einblenden (z.B. "Brazil 3:1 Serbia") 1. Endergebnis einblenden (z.B. "Brazil 3:1 Serbia")
2. "Dein Tipp war: 3:1" einblenden 2. "Dein Tipp war: 3:1" einblenden
3. Punkte-Counter animiert hochzählen 3. Punkte-Counter animiert hochzählen
- **Varianten nach Ergebnis:** - **Varianten nach Ergebnis:**
- **Exakt (3 Pkt):** 🎉 Konfetti-Explosion, goldener "EXAKT!"-Badge, Celebratory-Puls - **Exakt (3 Pkt):** 🎉 Konfetti-Explosion, goldener "EXAKT!"-Badge, Celebratory-Puls
- **Tendenz (1 Pkt):** 👏 Grüner Puls-Effekt, "Richtige Tendenz!" - **Tendenz (1 Pkt):** 👏 Grüner Puls-Effekt, "Richtige Tendenz!"
- **Falsch (0 Pkt):** 😅 Kurzes Kopfschütteln-Emoji, "Knapp daneben..." - **Falsch (0 Pkt):** 😅 Kurzes Kopfschütteln-Emoji, "Knapp daneben..."
- **"Gesehen"-Flag:** Jeder Reveal wird nur einmal gezeigt (localStorage-basiert) - **"Gesehen"-Flag:** Jeder Reveal wird nur einmal gezeigt (localStorage-basiert)
### 5.4 Ranglistenveränderung ### 5.4 Ranglistenveränderung
- **Trigger:** Rang hat sich seit letztem Besuch geändert - **Trigger:** Rang hat sich seit letztem Besuch geändert
- **Anzeige:** Toast-Notification beim App-Öffnen: - **Anzeige:** Toast-Notification beim App-Öffnen:
- Aufstieg: "⬆️ Du bist auf Platz 3 aufgestiegen!" - Aufstieg: "⬆️ Du bist auf Platz 3 aufgestiegen!"
- Abstieg: "⬇️ Du bist auf Platz 7 gerutscht — hol dir die Punkte zurück!" - Abstieg: "⬇️ Du bist auf Platz 7 gerutscht — hol dir die Punkte zurück!"
- Knapper Verfolger: "⚠️ Anna ist nur noch 1 Punkt hinter dir!" - Knapper Verfolger: "⚠️ Anna ist nur noch 1 Punkt hinter dir!"
- **Speicherung:** Letzter bekannter Rang in localStorage, Vergleich bei jedem Laden - **Speicherung:** Letzter bekannter Rang in localStorage, Vergleich bei jedem Laden
### 5.5 Streak-Tracker ### 5.5 Streak-Tracker
- **Definition:** Anzahl aufeinanderfolgender Spiele, für die ein Tipp abgegeben wurde (nicht Korrektheit, nur Teilnahme) - **Definition:** Anzahl aufeinanderfolgender Spiele, für die ein Tipp abgegeben wurde (nicht Korrektheit, nur Teilnahme)
- **Anzeige:** 🔥-Counter auf dem Dashboard und im Profil - **Anzeige:** 🔥-Counter auf dem Dashboard und im Profil
- **Meilensteine:** - **Meilensteine:**
- 3er-Streak: 🔥 Feuer-Icon erscheint - 3er-Streak: 🔥 Feuer-Icon erscheint
- 10er-Streak: 🔥🔥 Doppel-Feuer - 10er-Streak: 🔥🔥 Doppel-Feuer
- 20er-Streak: ⚡ Blitz-Icon - 20er-Streak: ⚡ Blitz-Icon
- **Streak-Bruch:** "Deine 7er-Serie ist gerissen! Starte eine neue." als Nudge auf dem Dashboard - **Streak-Bruch:** "Deine 7er-Serie ist gerissen! Starte eine neue." als Nudge auf dem Dashboard
- **Backend:** Streak wird bei Tipp-Abgabe berechnet (aufeinanderfolgende Spiele nach Kick-off-Datum) - **Backend:** Streak wird bei Tipp-Abgabe berechnet (aufeinanderfolgende Spiele nach Kick-off-Datum)
--- ---
@@ -174,29 +228,45 @@ Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht
### Layout (von oben nach unten): ### Layout (von oben nach unten):
**Header-Card:** **Header-Card:**
- Initialen-Avatar (bestehendes Design) - Initialen-Avatar (bestehendes Design)
- Name + Rang-Badge ("🏆 Platz 5") - Name + Rang-Badge ("🏆 Platz 5")
- Lieblingsteam mit Flagge (bestehende "Team hinzufügen"-Funktion, prominenter platziert) - Lieblingsteam mit Flagge (bestehende "Team hinzufügen"-Funktion, prominenter platziert)
**Stats-Ring:** **Stats-Ring:**
- Kreisdiagramm (Donut-Chart) mit Verteilung: Exakt / Tendenz / Falsch - Kreisdiagramm (Donut-Chart) mit Verteilung: Exakt / Tendenz / Falsch
- Gesamtpunktzahl in der Mitte des Rings - Gesamtpunktzahl in der Mitte des Rings
- Legende darunter - Legende darunter
**Tipp-Historie:** **Tipp-Historie:**
- Scrollbare Liste: "Deine letzten 10 Tipps" - Scrollbare Liste: "Deine letzten 10 Tipps"
- Jeder Eintrag: Teams, dein Tipp, Ergebnis, Punkte-Badge - Jeder Eintrag: Teams, dein Tipp, Ergebnis, Punkte-Badge
- Expandierbar auf alle Tipps - Expandierbar auf alle Tipps
**Fun-Stats:** **Fun-Stats:**
- "Dein Lieblings-Tipp: 1:0 (5x getippt)" - "Dein Lieblings-Tipp: 1:0 (5x getippt)"
- "Du tippst 70% Heimsiege" - "Du tippst 70% Heimsiege"
- "Längste Streak: 🔥12" - "Längste Streak: 🔥12"
- Rotiert oder zeigt 2-3 gleichzeitig - Rotiert oder zeigt 2-3 gleichzeitig
**Achievement-Platzhalter (Vorgriff Phase 2):** **Achievement-Platzhalter (Vorgriff Phase 2):**
- Badge-Leiste am unteren Rand - Badge-Leiste am unteren Rand
- Grau/locked wenn noch nicht erreicht, farbig wenn freigeschaltet - Grau/locked wenn noch nicht erreicht, farbig wenn freigeschaltet
- Phase 1: Platzhalter-UI, Logik kommt in Phase 2 - Phase 1: Platzhalter-UI, Logik kommt in Phase 2
--- ---
@@ -204,24 +274,37 @@ Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht
## 7. Entfernte / Vereinfachte Features ## 7. Entfernte / Vereinfachte Features
### KI-Agent / Expertenblick — ENTFERNT ### KI-Agent / Expertenblick — ENTFERNT
- Chat-Widget (Fußball-Icon unten rechts) wird entfernt - Chat-Widget (Fußball-Icon unten rechts) wird entfernt
- "Expertenblick"-Accordion im Tipp-Modal wird entfernt - "Expertenblick"-Accordion im Tipp-Modal wird entfernt
- Dateien: `AgentChat.tsx`, Agent-Route im Backend (`/api/agent`) können entfernt oder deaktiviert werden - Dateien: `AgentChat.tsx`, Agent-Route im Backend (`/api/agent`) können entfernt oder deaktiviert werden
- Begründung: Nice-to-have, lenkt vom Kernflow ab, spart Platz auf Mobile - Begründung: Nice-to-have, lenkt vom Kernflow ab, spart Platz auf Mobile
### Tipp-Modal — VERSCHLANKT ### Tipp-Modal — VERSCHLANKT
- **Entfernt:** Gruppeninfo-Header, Kick-off-Datum (steht schon auf der Card), Expertenblick-Accordion - **Entfernt:** Gruppeninfo-Header, Kick-off-Datum (steht schon auf der Card), Expertenblick-Accordion
- **Bleibt:** Team-Flaggen + Namen, Score-Picker (+/-), Tendenz-Anzeige, "Tipp bestätigen"-Button - **Bleibt:** Team-Flaggen + Namen, Score-Picker (+/-), Tendenz-Anzeige, "Tipp bestätigen"-Button
- **Neu:** Erfolgsanimation nach Bestätigung (siehe 5.1) - **Neu:** Erfolgsanimation nach Bestätigung (siehe 5.1)
### Stage-Filter — VEREINFACHT ### Stage-Filter — VEREINFACHT
- Aktuell: 8 horizontale Filter-Buttons - Aktuell: 8 horizontale Filter-Buttons
- Neu: Dropdown/Select im Spielplan-Header - Neu: Dropdown/Select im Spielplan-Header
- Smart Sections übernehmen die Hauptnavigation im Spielplan - Smart Sections übernehmen die Hauptnavigation im Spielplan
### Admin-Navigation — VERSTECKT ### Admin-Navigation — VERSTECKT
- Nicht mehr als Haupttab sichtbar - Nicht mehr als Haupttab sichtbar
- Nur für User mit Editor-Rolle: Zahnrad-Icon im Header - Nur für User mit Editor-Rolle: Zahnrad-Icon im Header
- Viewer sehen keine Admin-UI - Viewer sehen keine Admin-UI
--- ---
@@ -229,21 +312,33 @@ Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht
## 8. Technische Hinweise ## 8. Technische Hinweise
### Frontend ### Frontend
- **Framework:** React + Vite + TypeScript (bestehend) - **Framework:** React + Vite + TypeScript (bestehend)
- **Animationen:** CSS-Animationen + `framer-motion` für komplexere Sequenzen (Konfetti, Punkte-Reveal) - **Animationen:** CSS-Animationen + `framer-motion` für komplexere Sequenzen (Konfetti, Punkte-Reveal)
- **Konfetti:** Lightweight-Library wie `canvas-confetti` (~3KB) - **Konfetti:** Lightweight-Library wie `canvas-confetti` (~3KB)
- **Charts:** Donut-Chart für Profil — entweder SVG-basiert selbst gebaut oder leichtgewichtige Library - **Charts:** Donut-Chart für Profil — entweder SVG-basiert selbst gebaut oder leichtgewichtige Library
- **Haptic:** `navigator.vibrate(50)` für Mobile (Progressive Enhancement, kein Fallback nötig) - **Haptic:** `navigator.vibrate(50)` für Mobile (Progressive Enhancement, kein Fallback nötig)
- **State:** localStorage für Streak, gesehene Reveals, letzter Rang - **State:** localStorage für Streak, gesehene Reveals, letzter Rang
### Backend ### Backend
- **Streak-Berechnung:** Neue Query oder Service-Funktion, die aufeinanderfolgende Tipps zählt - **Streak-Berechnung:** Neue Query oder Service-Funktion, die aufeinanderfolgende Tipps zählt
- **Dashboard-Daten:** Neuer Endpoint `/api/dashboard` der Hero-Spiel, Stats und Nudges gebündelt liefert - **Dashboard-Daten:** Neuer Endpoint `/api/dashboard` der Hero-Spiel, Stats und Nudges gebündelt liefert
- **Cleanup:** Agent-Route kann deaktiviert werden (Feature-Flag oder entfernen) - **Cleanup:** Agent-Route kann deaktiviert werden (Feature-Flag oder entfernen)
### Kein Breaking Change ### Kein Breaking Change
- Bestehende API-Endpoints bleiben kompatibel - Bestehende API-Endpoints bleiben kompatibel
- Datenbank-Schema braucht keine Migration (Streak wird berechnet, nicht gespeichert) - Datenbank-Schema braucht keine Migration (Streak wird berechnet, nicht gespeichert)
- Bestehende Tipps und Punkte bleiben erhalten - Bestehende Tipps und Punkte bleiben erhalten
--- ---