42 lines
1.5 KiB
Markdown
42 lines
1.5 KiB
Markdown
# 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:
|
|
```bash
|
|
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.
|