Chore: Update Docker setup and walkthrough
This commit is contained in:
@@ -1,41 +1,55 @@
|
||||
# Hördle - Walkthrough
|
||||
# Genre/Tag System Implementation Walkthrough
|
||||
|
||||
Die Hördle Webapp ist nun einsatzbereit. Hier ist eine Anleitung, wie du sie nutzt und verwaltest.
|
||||
## Overview
|
||||
Implemented a comprehensive Genre/Tag system for Hördle, allowing songs to be categorized and users to play genre-specific daily puzzles.
|
||||
|
||||
## Starten der App
|
||||
## Changes
|
||||
|
||||
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.
|
||||
### Database
|
||||
- **New Model**: `Genre` (id, name, songs, dailyPuzzles).
|
||||
- **Updated Model**: `Song` (added M-N relation to `Genre`).
|
||||
- **Updated Model**: `DailyPuzzle` (added optional `genreId`, updated unique constraint to `[date, genreId]`).
|
||||
|
||||
## Admin-Bereich (Songs hochladen)
|
||||
### Backend API
|
||||
- **`app/api/genres/route.ts`**: New endpoints for GET (list) and POST (create) and DELETE genres.
|
||||
- **`app/api/songs/route.ts`**: Updated to handle genre assignment (POST/PUT) and retrieval (GET).
|
||||
- **`app/api/daily/route.ts`**: Updated to support `?genre=<name>` query parameter.
|
||||
- **`lib/dailyPuzzle.ts`**: Shared logic for fetching/creating daily puzzles (Global or Genre-specific).
|
||||
|
||||
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.
|
||||
### Frontend (Admin)
|
||||
- **Genre Management**: Create and delete genres.
|
||||
- **Song Assignment**: Assign genres during upload and edit.
|
||||
- **Post-Upload Workflow**: Prompt to assign genres immediately after upload.
|
||||
- **Song List**: Display assigned genres in the table.
|
||||
|
||||
## Spielablauf
|
||||
### Frontend (User)
|
||||
- **Genre Selection**: Links on the main page to switch between Global and Genre-specific games.
|
||||
- **Game Logic**: Refactored to support independent game states per genre (localStorage keys: `hoerdle_game_state_<genre>`).
|
||||
- **Dynamic Route**: `app/[genre]/page.tsx` for genre-specific URLs.
|
||||
- **Sharing**: Share text now includes the genre name.
|
||||
|
||||
- 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.
|
||||
### Deployment
|
||||
- **Auto-Migration**: Added `scripts/docker-entrypoint.sh` to run `prisma migrate deploy` on startup.
|
||||
- **Dockerfile**: Updated to use the entrypoint script.
|
||||
- **Dependencies**: Moved `prisma` to `dependencies` in `package.json`.
|
||||
|
||||
## Technologien
|
||||
## Verification Results
|
||||
|
||||
- **Framework**: Next.js 14 (App Router)
|
||||
- **Datenbank**: SQLite (via Prisma)
|
||||
- **Styling**: Vanilla CSS (in `app/globals.css`)
|
||||
- **State**: React Hooks + LocalStorage
|
||||
### Automated Build
|
||||
- `npm run build` passed successfully.
|
||||
- `npx prisma generate` passed.
|
||||
|
||||
## 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.
|
||||
### Manual Verification Steps (Recommended)
|
||||
1. **Admin Dashboard**:
|
||||
* Go to `/admin`.
|
||||
* Create a new genre (e.g., "Rock").
|
||||
* Upload a song and assign "Rock" to it.
|
||||
* Edit an existing song and assign "Rock".
|
||||
2. **User Interface**:
|
||||
* Go to `/`. Verify "Global" game works.
|
||||
* Click "Rock". Verify URL changes to `/Rock`.
|
||||
* Play the "Rock" game. Verify it picks a song tagged with "Rock".
|
||||
* Verify stats are separate for Global and Rock.
|
||||
3. **Deployment**:
|
||||
* Deploy to Docker.
|
||||
* Verify migrations run automatically on startup.
|
||||
|
||||
Reference in New Issue
Block a user