mxster - Music Timeline Game

Das ultimative Musikquiz! Rate Songs, platziere sie chronologisch und teste dein Musikwissen.

Schnellstart

1. Oeffne mxster.de
2. "Jetzt spielen (Gratis)" -- Passwort: ydl
3. Spielmodus waehlen, Spieler hinzufuegen, los!

Spielmodi

Modus	Ziel	Punkte
Hardcore	Rate Titel, Kuenstler & Jahr	Bis zu 15/Song (max 150)
Timeline Persoenlich	Eigene Timeline aufbauen	Erster mit 10 Karten gewinnt
Timeline Global	Gemeinsame Timeline	Meiste Karten nach 10 gewinnt

Hardcore-Scoring: Titel +5, Kuenstler +5, Jahr exakt +5 / +/-1 +2 / +/-2 +1

Features

• 211 Songs (Self-Hosted MP3) + optional Spotify Premium
• Fuzzy Matching, 24 Achievements, Bot-Gegner (Easy/Medium/Hard)
• PWA -- installierbar, offline-faehig, Auto-Save
• 3D Partikel-Animationen, Konfetti-Effekte, Score-Animationen

Design

Material 3 Expressive von Grund auf: zentrale Design-Token (pwa/src/styles/design-tokens.css) als Single Source of Truth fuer Farbe, Form, Typografie und Motion.

• Dark + Light Theme (elektrisches Cyan als Marke, warmes Koralle als Akzent), umschaltbar mit MD3-Circular-Reveal ueber die View Transitions API
• Physics-based Motion -- Spring-Kurven fuer Position/Groesse/Form, sanfte Effects-Kurven fuer Farbe/Deckkraft; prefers-reduced-motion durchgehend respektiert
• Shape-Morphing als State-Feedback, State-Layer + Ripple, gestaffelte Reveals
• Shared-Element-Transitions zwischen Routen; premium Typografie ohne Schrift-Farbverlaeufe, ruhige Elevation statt Neon-Glow
• Mobile-first: Touch-Targets >= 48px, Safe-Areas, ab 360px ohne horizontales Scrollen

Fuer Entwickler

git clone https://github.com/pepperonas/mxster.git
cd mxster/pwa && npm install && npm run dev
# http://localhost:5174

npm test                        # Integritaetstests
cd pwa && npm test              # Vitest
cd pwa && npx tsc --noEmit      # Type Check
./scripts/deployment/deploy.sh  # Deploy auf mxster.de

Physische Karten (Optional)

PDF- und 3D-Druckkarten verfuegbar unter extras/card-generator/ und GitHub Releases.

Lizenz

MIT -- Martin Pfeffer

---

mxster.de | GitHub | Releases