hoerdle/walkthrough.md

Hördle - Walkthrough

Die Hördle Webapp ist nun einsatzbereit. Hier ist eine Anleitung, wie du sie nutzt und verwaltest.

Starten der App

1. Öffne ein Terminal im Projektverzeichnis: /home/markus/hördle
2. Starte den Entwicklungsserver:

   npm run dev
   

3. Öffne http://localhost:3000 im Browser.

Admin-Bereich (Songs hochladen)

1. Gehe zu http://localhost:3000/admin
2. Logge dich ein. Das Standard-Passwort ist admin123 (kann in .env geändert werden).
3. Upload: Wähle eine MP3-Datei aus. Titel und Interpret werden automatisch aus den ID3-Tags ausgelesen, falls du die Felder leer lässt.
4. Bibliothek: Unter dem Upload-Formular siehst du eine Tabelle aller verfügbaren Songs.

Spielablauf

• Das Spiel wählt jeden Tag (um Mitternacht) automatisch einen neuen Song aus der Datenbank.
• Wenn noch kein Song für den heutigen Tag festgelegt wurde, wird beim ersten Aufruf der Seite zufällig einer ausgewählt.
• Der Spieler hat 6 Versuche.
• Der Fortschritt wird im LocalStorage des Browsers gespeichert.

Technologien

• Framework: Next.js 14 (App Router)
• Datenbank: SQLite (via Prisma)
• Styling: Vanilla CSS (in app/globals.css)
• State: React Hooks + LocalStorage

Wichtige Dateien

• app/page.tsx: Hauptseite des Spiels.
• components/Game.tsx: Die Spiellogik.
• components/AudioPlayer.tsx: Der Audio-Player mit Segment-Logik.
• app/api/daily/route.ts: API für das tägliche Rätsel.
• prisma/schema.prisma: Datenbank-Schema.