From 3e02cdab3bda071fdaa4cbb06167abeec72695f1 Mon Sep 17 00:00:00 2001 From: Ronny Date: Sun, 12 Apr 2026 19:39:53 +0200 Subject: [PATCH] chore: suppress markdownlint warnings in spec docs --- .markdownlintignore | 1 + .../2026-04-11-phase1-engagement-ux-design.md | 95 +++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 .markdownlintignore diff --git a/.markdownlintignore b/.markdownlintignore new file mode 100644 index 0000000..82529a9 --- /dev/null +++ b/.markdownlintignore @@ -0,0 +1 @@ +docs/superpowers/** diff --git a/docs/superpowers/specs/2026-04-11-phase1-engagement-ux-design.md b/docs/superpowers/specs/2026-04-11-phase1-engagement-ux-design.md index 64716cb..0290e24 100644 --- a/docs/superpowers/specs/2026-04-11-phase1-engagement-ux-design.md +++ b/docs/superpowers/specs/2026-04-11-phase1-engagement-ux-design.md @@ -1,3 +1,4 @@ + # Phase 1: Engagement & UX-Polish — Design Spec **Datum:** 2026-04-11 @@ -15,22 +16,29 @@ Die aktuelle Startseite zeigt 104 Spiele als endlose Liste. Die neue Startseite ### Layout: "Hero + Stats + Nudges" **Hero-Bereich (oberes Drittel):** + - 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 noch nicht getippt: "Jetzt tippen"-Button + - Wenn kein Spiel ansteht: Nächstes Spiel mit Datum ("Nächstes Spiel: Morgen 21:00") **Stats-Kacheln (mittleres Drittel):** + - Drei kompakte Kacheln nebeneinander: - **Dein Rang** (Platzierung mit Pfeil hoch/runter seit letzter Änderung) - **Punkte** (Gesamtpunktzahl) - **Streak** (🔥-Counter, aktuelle Serie an abgegebenen Tipps) **Nudge-Bereich (unteres Drittel):** + - Kontextabhängige Handlungsaufforderungen: - "📅 Heute noch 2 Spiele ohne Tipp" → Link zum Spielplan - "🏆 Max führt mit 15 Punkten" → Link zur Rangliste - "🎯 Letzte Auswertung: 3 Punkte für Brazil vs Serbia!" → Link zum Ergebnis + - 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. @@ -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). **4 Haupttabs:** + - 🏠 **Home** — Dashboard (neue Startseite) + - ⚽ **Spiele** — Spielplan mit Smart Sections + - 🏆 **Rangliste** — Leaderboard + - 👤 **Profil** — Persönliche Statistiken **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 | **Verhalten:** + - Abschnitte sind auf-/zuklappbar (Accordion) + - "Heute" scrollt automatisch in den Viewport beim Öffnen + - Leerer Abschnitt wird ausgeblendet (z.B. "Heute" wenn kein Spiel) + - 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:** ### ⏳ Offen (tippbar) + - Standard-Design mit Team-Flaggen und Kick-off-Zeit + - "Tipp abgeben"-Button prominent + - Countdown wenn <24h bis Anpfiff + - Pulsierender roter Countdown wenn <1h ### ✅ Getippt + - Grüner linker Rand / Akzent + - Tipp prominent angezeigt ("Dein Tipp: 2:1") + - "Ändern"-Link statt "Tipp abgeben" + - Häkchen-Icon ### 🔴 Live (in Spielgang) + - Pulsierender roter Punkt neben "LIVE" + - Aktueller Spielstand (wenn über Sync verfügbar) + - Tipp daneben zum Vergleich + - Tippfenster geschlossen — Schloss-Icon ### 🏁 Beendet (ausgewertet) + - Endergebnis prominent + - Dein Tipp + Punkte-Badge: - 🥇 **Gold-Badge (3 Pkt):** Exakter Treffer, goldener Schimmer-Effekt - ✅ **Grüner Badge (1 Pkt):** Richtige Tendenz - ❌ **Grauer Badge (0 Pkt):** Falsch getippt ### 🔒 Verpasst (nicht getippt, Spiel vorbei) + - Ausgegraut / reduzierte Opacity + - "Nicht getippt" Label + - 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.1 Tipp-Bestätigung + - **Trigger:** User klickt "Tipp bestätigen" + - **Animation:** Card pulsiert kurz grün, animiertes Häkchen fliegt rein + - **Text:** "Dein Tipp ist drin! 🎯" als kurze Success-Message + - **Mobile:** Subtiles Haptic-Feedback (Vibration via `navigator.vibrate`) + - **Dauer:** ~1 Sekunde, dann Modal schließt ### 5.2 Live-Countdown vor Anpfiff + - **Trigger:** Spiel startet in <1 Stunde + - **Anzeige:** Pulsierender roter Countdown-Timer auf der Match-Card ("Noch 12 Min!") + - **Urgency-Stufen:** - <24h: Countdown in Stunden ("in 5h") - <1h: Pulsierender roter Countdown in Minuten - <5min: Schnelleres Pulsieren + - **Nach Anpfiff:** "Tippfenster geschlossen" mit Schloss-Icon, sanfte Transition ### 5.3 Punkte-Reveal nach Spielende + - **Trigger:** User öffnet App / navigiert zu einem ausgewerteten Spiel, das noch nicht "gesehen" wurde + - **Sequenz (gestaffelt, ~2-3 Sekunden):** 1. Endergebnis einblenden (z.B. "Brazil 3:1 Serbia") 2. "Dein Tipp war: 3:1" einblenden 3. Punkte-Counter animiert hochzählen + - **Varianten nach Ergebnis:** - **Exakt (3 Pkt):** 🎉 Konfetti-Explosion, goldener "EXAKT!"-Badge, Celebratory-Puls - **Tendenz (1 Pkt):** 👏 Grüner Puls-Effekt, "Richtige Tendenz!" - **Falsch (0 Pkt):** 😅 Kurzes Kopfschütteln-Emoji, "Knapp daneben..." + - **"Gesehen"-Flag:** Jeder Reveal wird nur einmal gezeigt (localStorage-basiert) ### 5.4 Ranglistenveränderung + - **Trigger:** Rang hat sich seit letztem Besuch geändert + - **Anzeige:** Toast-Notification beim App-Öffnen: - Aufstieg: "⬆️ Du bist auf Platz 3 aufgestiegen!" - Abstieg: "⬇️ Du bist auf Platz 7 gerutscht — hol dir die Punkte zurück!" - Knapper Verfolger: "⚠️ Anna ist nur noch 1 Punkt hinter dir!" + - **Speicherung:** Letzter bekannter Rang in localStorage, Vergleich bei jedem Laden ### 5.5 Streak-Tracker + - **Definition:** Anzahl aufeinanderfolgender Spiele, für die ein Tipp abgegeben wurde (nicht Korrektheit, nur Teilnahme) + - **Anzeige:** 🔥-Counter auf dem Dashboard und im Profil + - **Meilensteine:** - 3er-Streak: 🔥 Feuer-Icon erscheint - 10er-Streak: 🔥🔥 Doppel-Feuer - 20er-Streak: ⚡ Blitz-Icon + - **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) --- @@ -174,29 +228,45 @@ Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht ### Layout (von oben nach unten): **Header-Card:** + - Initialen-Avatar (bestehendes Design) + - Name + Rang-Badge ("🏆 Platz 5") + - Lieblingsteam mit Flagge (bestehende "Team hinzufügen"-Funktion, prominenter platziert) **Stats-Ring:** + - Kreisdiagramm (Donut-Chart) mit Verteilung: Exakt / Tendenz / Falsch + - Gesamtpunktzahl in der Mitte des Rings + - Legende darunter **Tipp-Historie:** + - Scrollbare Liste: "Deine letzten 10 Tipps" + - Jeder Eintrag: Teams, dein Tipp, Ergebnis, Punkte-Badge + - Expandierbar auf alle Tipps **Fun-Stats:** + - "Dein Lieblings-Tipp: 1:0 (5x getippt)" + - "Du tippst 70% Heimsiege" + - "Längste Streak: 🔥12" + - Rotiert oder zeigt 2-3 gleichzeitig **Achievement-Platzhalter (Vorgriff Phase 2):** + - Badge-Leiste am unteren Rand + - Grau/locked wenn noch nicht erreicht, farbig wenn freigeschaltet + - 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 ### KI-Agent / Expertenblick — ENTFERNT + - Chat-Widget (Fußball-Icon unten rechts) wird entfernt + - "Expertenblick"-Accordion im Tipp-Modal wird entfernt + - 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 ### Tipp-Modal — VERSCHLANKT + - **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 + - **Neu:** Erfolgsanimation nach Bestätigung (siehe 5.1) ### Stage-Filter — VEREINFACHT + - Aktuell: 8 horizontale Filter-Buttons + - Neu: Dropdown/Select im Spielplan-Header + - Smart Sections übernehmen die Hauptnavigation im Spielplan ### Admin-Navigation — VERSTECKT + - Nicht mehr als Haupttab sichtbar + - Nur für User mit Editor-Rolle: Zahnrad-Icon im Header + - 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 ### Frontend + - **Framework:** React + Vite + TypeScript (bestehend) + - **Animationen:** CSS-Animationen + `framer-motion` für komplexere Sequenzen (Konfetti, Punkte-Reveal) + - **Konfetti:** Lightweight-Library wie `canvas-confetti` (~3KB) + - **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) + - **State:** localStorage für Streak, gesehene Reveals, letzter Rang ### Backend + - **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 + - **Cleanup:** Agent-Route kann deaktiviert werden (Feature-Flag oder entfernen) ### Kein Breaking Change + - Bestehende API-Endpoints bleiben kompatibel + - Datenbank-Schema braucht keine Migration (Streak wird berechnet, nicht gespeichert) + - Bestehende Tipps und Punkte bleiben erhalten ---