Skip to content

MatchQuest – interaktive Fußball-Challenge-App (Prototyp zur WM 2026) - #3

Draft
Stefan1976Bln wants to merge 14 commits into
mainfrom
claude/matchquest-wm-app-giybid
Draft

MatchQuest – interaktive Fußball-Challenge-App (Prototyp zur WM 2026)#3
Stefan1976Bln wants to merge 14 commits into
mainfrom
claude/matchquest-wm-app-giybid

Conversation

@Stefan1976Bln

@Stefan1976Bln Stefan1976Bln commented Jul 8, 2026

Copy link
Copy Markdown
Owner

Überblick

Neuer, eigenständiger statischer Prototyp unter matchquest-app/: eine interaktive Fußball-Challenge-App zur WM 2026. Reines HTML/CSS/JS mit localStorage – kein Backend, kein Build, sofort über einen statischen Host (z. B. GitHub Pages) veröffentlichbar.

Umgesetzte User Storys

  • US1 – Registrieren, Einloggen, Lobby beitreten: schnelle Registrierung + Login (Dummy-Zugänge), Login-Bereich mit Rangliste, Spielliste mit Anstoß-Countdown und Live-Link, Beitritt zur Challenge-Lobby vor dem Anpfiff.
  • US2 – Live-Challenges: im Takt (echte App: alle 10 Min.; im Demo auf 20 s beschleunigt) erscheint eine Challenge mit Zeitlimit.
    • Wett-Challenge – Tipp aufs nächste Ereignis, richtige Tipps geben Punkte.
    • Mitmach-Challenge – Aktion durchführen, Beweisfoto/-video hochladen, Orakel (Freund im Raum) bestätigt.
  • Leaderboard (Freunde): Navigation → „Leaderboard", Tabelle Platzierung · Name · richtige Wetten, nur Freunde, aktualisiert bei jedem Öffnen. Zusätzlich eine Statistik-Kachel.

Rollen

  • Nutzer – Zuschauer:in während des Spiels.
  • Orakel – vertrauensvolle, akkreditierte Person ohne eigenes wirtschaftliches Interesse; bestätigt das Eintreten eines Ereignisses (im Prototyp per Button).

Challenge-Stufen & Guardrails

  • Stufe 1 – kuratierter, geprüfter Challenge-Pool (Standard).
  • Stufe 2 – simulierter „KI-Überraschungsmodus" (per Schalter in der App), kombiniert Bausteine zu überraschenden Challenges.
  • Guardrails (assets/challenges.js → passesGuardrails()): verwirft Inhalte mit Gewalt, Sexuellem, Gefahr, Substanzzwang, Diskriminierung oder Illegalem – für beide Stufen.

Dateien

matchquest-app/: index.html (Landing), login.html, app.html (Spiele/Lobby · Live-Challenge · Leaderboard), assets/{auth,challenges,app,landing}.js, assets/styles.css, README.md.

Test

Im Browser (Chromium/Playwright) end-to-end geprüft: Landing, Login mit Demo-Zugang, Registrierung neuer Nutzer, Lobby-Beitritt, Wett-Challenge inkl. Punktevergabe, KI-Toggle, Leaderboard (Spalten Platz/Name/richtige Wetten) und Guardrail-Filter – keine Konsolenfehler.

Demo-Zugang: stefan@matchquest.app · Passwort wm2026

Hinweis

Statischer Demo-Entwurf: alle Daten liegen nur lokal im Browser. Datenzugriffe sind in MQ.DB gekapselt und lassen sich später auf ein echtes Backend (Accounts, Echtzeit-Ranking, echte KI-Generierung mit serverseitigen Guardrails) umstellen.

🤖 Generated with Claude Code

https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ

Generated by Claude Code

claude added 14 commits July 8, 2026 07:09
@claude
Add MatchQuest: interaktive Fußball-Challenge-App (Prototyp zur WM 2026)
93cf534 
- US1: schnelle Registrierung/Login (Dummy, localStorage), Spielliste mit
  Anstoß-Countdown + Live-Link, Beitritt zur Challenge-Lobby
- US2: Live-Challenges im Takt mit Zeitlimit; Wett-Challenges (Punkte fuer
  richtige Tipps) und Mitmach-Challenges mit Beweis-Upload + Orakel-Bestaetigung
- Freunde-Leaderboard (Platz/Name/richtige Wetten), Statistik
- Challenge-Engine: kuratierter Pool (Stufe 1) + simulierte KI (Stufe 2)
  mit Guardrails (keine Gewalt/Sexuelles/Gefahr)
- Professionelles, sportliches Design mit Sport-/Challenge-Symbolen

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Add single-file MatchQuest build for easy testing
63817d3 
Self-contained matchquest.html (inline CSS/JS, in-page router for
Landing/Login/App). Opens with one click, no server needed — also
published as a hosted Artifact for remote-desktop testing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Premium redesign + live/group video challenges + PWA for IONOS + Fach…
6a954a8 
…konzept

- Redesign to premium 'game-provider' UI (matchquest-pro.html): app shell with
  status bar (XP/level/streak/coins), bottom-tab navigation, glassmorphism,
  confetti, toasts, achievements
- Live-Video-Challenge: real camera (getUserMedia) with live oracle verification
  and floating reactions; graceful simulated fallback when no camera
- Group video-call challenge: integrated call grid, one random player + one
  random oracle per round, rotating roles, spectators react live
- Installable PWA in webapp/ (manifest + service worker + generated icons) for
  IONOS static hosting; 'Add to Home Screen' on iPhone/Android, offline shell
- Decision: ship as Web App (PWA), no APK/app store
- Fachkonzept (FACHKONZEPT.md + fachkonzept.html): vision, roles, user stories,
  functional/non-functional requirements, architecture, data model, guardrails,
  IONOS distribution, legal/GDPR, roadmap

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Load remaining WM 2026 fixtures (final stage) + subfolder hosting for…
c3cd170 
… IONOS

- Real remaining WM 2026 matches with actual dates (CEST): 4 quarter-finals,
  2 semi-finals, third place, final. Teams TBD -> bracket placeholders
  (Sieger AF1..8, Sieger VF1..4, Verlierer/Sieger HF1/2), real venues.
- Countdown now shows days/hours for far-off matches; each card shows the
  scheduled date/time; matches screen retitled to 'WM 2026 · Finalrunde'.
- Regenerated PWA webapp/index.html; deployment docs updated to install into a
  SUBFOLDER (e.g. /matchquest/) so the existing altenau-harz.de site is untouched.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Real multi-person video call (Jitsi), free-play mode, simple clear-te…
5a97706 
…xt registration

- Real multi-person live video via embedded Jitsi Meet (open source, meet.jit.si),
  no own server: shared room code, synchronized round draw (player/oracle) over
  Jitsi data channel, live oracle verdict. Graceful fallback to simulation when the
  external service is unavailable (e.g. artifact preview).
- 'Freies Spiel': start live challenges (bet + live video) without a scheduled match.
- Registration simplified: email + password shown in clear text, password entered
  twice (confirmation), name optional, no email sent.
- Regenerated PWA webapp/index.html; docs updated (video-call test steps, Jitsi
  caveat/self-host note); Fachkonzept updated (F15 Jitsi, F15b free play).
- Full browser regression test passed (registration, free play, sim + live modes,
  leaderboard, profile, demo login); Jitsi degrades gracefully offline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Teams & team-battle, per-team video rooms, KI everywhere, consent gat…
f810886 
…e, Berliner Tafel donation

- Teams: join a team (also mid-challenge), Team-Battle ranking (Rang → Teams); points
  count toward the team. Each team gets its own Jitsi call (room code carries team id).
- KI mode now also drives group & live-video challenge tasks (client-side, simulated,
  guardrail-filtered); labelled honestly as simulated (real LLM = Phase 2 server proxy).
- Legal consent gate on first use: rules of conduct, privacy (incl. Jitsi third party),
  age 16+; Impressum/Datenschutz/Verhaltenskodex texts (placeholders to fill).
- Donation instead of profit: heart button (status bar + profile) opens the official
  Berliner Tafel site; no payment processing in-app, no cut taken.
- Jitsi domain + donation URL extracted to constants for easy swapping.
- Full browser regression passed (consent, teams, donation, KI, free play, challenges).
  Note: real Jitsi video is blocked by the sandbox proxy (403) so it is verified only
  via the graceful-fallback path; multi-device video to be confirmed on the hosted site.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Fact-vote majority resolution, jury 0-10 with rotation, funnier tasks…
91ee114 
…, persona QA

- Bet challenges: no more random outcome. Everyone confirms what really happened;
  the MAJORITY decides the official result (uncomplicated, no special rights).
- Group challenges: performer + JURY scoring 0-10 (the others rate), average = points;
  rotation so everyone takes a turn; 'Fertig' button ends performance early. Applied to
  both simulated mode and the real Jitsi call (scores broadcast via data channel).
- More funny, family-friendly (jugendfrei) tasks (imitate the coach, slow-mo goal
  celebration, TV commentator, referee card ...) in GT + KI building blocks.
- UX fixes from QA: level-up overlay auto-dismisses (no longer blocks input); demo
  users get achievements pre-seeded (no toast burst); donation button/labels now say
  'Berliner Tafel' and 'nicht-kommerziell' explicitly (status chip, profile, landing).
- Added persona-driven E2E test suite (tests/personas.mjs): 41 PASS / 0 FAIL across
  6 personas (registration/consent, betting+majority, teams+jury, privacy+donation,
  KI guardrails, persistence). Docs updated (Fachkonzept, webapp README).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Fill in Impressum (operator details)
732efff 
Set real operator data in the Impressum (DOCS.imprint): Stefan Wittenberg,
Treskowallee 8, 10318 Berlin, stefan-wittenberg@gmx.de; add MStV responsible-person
note. Regenerated PWA webapp/index.html.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Add shared IONOS PHP+MySQL backend (real cross-device accounts, point…
6045762 
…s, leaderboards, teams)

Backend (matchquest-app/backend/): single JSON API (api.php) + PDO layer (db.php,
MySQL for IONOS or SQLite for tests) + config sample. Actions: register/login (hashed
passwords + token), me, submit (local-first totals with clamping), joinTeam, leaderboard
(shared global), teams (aggregated points). Secrets gitignored.

Frontend: optional MQ.Net layer behind BACKEND_URL (empty = unchanged local/demo mode).
When configured: register/login go through the server, rewards sync via submit(), and the
Rang tab shows the real shared leaderboard + team-battle across devices; team join persists
server-side.

Tests: local persona suite still 41/41 PASS (backend off); new tests/backend_e2e.mjs proves
two devices share one leaderboard + team-battle and team change persists (7/7 PASS against
PHP+SQLite). Docs updated (backend/README IONOS setup, webapp README, Fachkonzept F14).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
One-folder deploy: backend moved into webapp/api, zero-config SQLite,…
8e626df 
… auto-detect + fallback

- Backend now lives in webapp/api/ so the whole app is ONE upload. db.php defaults to
  SQLite (no DB setup); auto-creates api/data/matchquest.sqlite (protected via .htaccess).
  MySQL still available via optional config.php. Added ping action.
- webapp/index.html (built by build-webapp.js) auto-detects the backend at ./api/api.php
  when hosted (http/https, not claude.ai) — no URL editing needed.
- Register/login now gracefully fall back to local mode if the backend is unreachable,
  so nobody gets stuck during the class.
- Removed old top-level backend/ (single source of truth). Added build-webapp.js.
- Tests: local persona suite 41/41 (unchanged); tests/backend_e2e.mjs rewritten for the
  real hosted zero-config scenario (serve webapp/, two devices) — 5/5 shared leaderboard
  and team-battle. Docs updated (webapp + api README, Fachkonzept).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Fixtures: quarter-finals over -> show semi-finals, third place, final…
a851f04 
… (WM 2026)

Removed the 4 quarter-finals (played). List now starts at Halbfinale 1 (today),
Halbfinale 2, Spiel um Platz 3, Finale — official dates/venues. Team names left as
clear placeholders (Halbfinalist 1-4) to be filled with the real semi-finalists.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Fill real WM 2026 semi-finalists (researched): HF1 France-Spain (Dall…
b6b075d 
…as), HF2 England-Argentina (Atlanta)

Kickoff 3pm ET = 21:00 CEST matches the schedule; venues/dates unchanged. Third place
and final keep bracket references (winner/loser HF1/HF2). Rebuilt webapp/index.html.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Add camera E2E test (fake device, 3 runs): live-video + group-perform…
6263c1c 
…er camera paths

Verifies getUserMedia actually acquires a live stream (video width>0, REC badge) in the
solo live-video challenge and the group performer role — 18/18 across 3 runs, no errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ
@claude
Videocall UX: shared default room code (team-independent), no overwri…
a260e4f 
…te, clearer join hint

Fixes joining a call across accounts: default room code is now the same for everyone in
the same game (MatchQuest-<lobby>) instead of team-specific, the code field is no longer
overwritten when toggling modes, and the hint/labels explain 'everyone enters the same
code -> Beitreten'. Rebuilt webapp/index.html.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D7MUm6Tw4Udfxme38Ti4eJ

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Stefan1976Bln @claude