Chore: Update Docker setup and walkthrough

Dockerfile

@@ -63,8 +63,7 @@ ENV PORT 3000
 ENV HOSTNAME "0.0.0.0"
 
 # Start command: migrate DB and start server
-# Note: In production, migrations should ideally be run in a separate step or init container,
-# but for simplicity with SQLite we can run push here or assume the volume has the DB.
-# We'll use a custom start script or just run server, assuming user handles migration or we use prisma db push on start.
-# Let's use a simple entrypoint script to ensure DB exists.
-CMD ["node", "server.js"]
+COPY --from=builder --chown=nextjs:nodejs /app/scripts/docker-entrypoint.sh ./scripts/docker-entrypoint.sh
+RUN chmod +x ./scripts/docker-entrypoint.sh
+
+CMD ["./scripts/docker-entrypoint.sh"]

README.md

@@ -20,6 +20,11 @@ Eine Web-App inspiriert von Heardle, bei der Nutzer täglich einen Song anhand k
 - **PWA Support:** Installierbar als App auf Desktop und Mobilgeräten (Manifest & Icons).
 - **Persistenz:** Spielstatus wird lokal im Browser gespeichert.
 - **Benachrichtigungen:** Integration mit Gotify für Push-Nachrichten bei Spielabschluss.
+- **Genre-Management:**
+    - Erstellen und Verwalten von Musik-Genres.
+    - Manuelle Zuweisung von Genres zu Songs.
+    - KI-gestützte automatische Kategorisierung mit OpenRouter (Claude 3.5 Haiku).
+    - Genre-spezifische tägliche Rätsel.
 
 ## Tech Stack
 
@@ -68,6 +73,7 @@ Das Projekt ist für den Betrieb mit Docker optimiert.
    - `TZ`: Zeitzone für täglichen Puzzle-Wechsel (Standard: `Europe/Berlin`)
    - `GOTIFY_URL`: URL deines Gotify Servers (z.B. `https://gotify.example.com`)
    - `GOTIFY_APP_TOKEN`: App Token für Gotify (z.B. `A...`)
+   - `OPENROUTER_API_KEY`: API-Key für OpenRouter (für KI-Kategorisierung, optional)
 
 2. **Starten:**
    ```bash

app/[genre]/page.tsx

@@ -0,0 +1,43 @@
+import Game from '@/components/Game';
+import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
+import Link from 'next/link';
+import { PrismaClient } from '@prisma/client';
+
+export const dynamic = 'force-dynamic';
+
+const prisma = new PrismaClient();
+
+interface PageProps {
+    params: Promise<{ genre: string }>;
+}
+
+export default async function GenrePage({ params }: PageProps) {
+    const { genre } = await params;
+    const decodedGenre = decodeURIComponent(genre);
+    const dailyPuzzle = await getOrCreateDailyPuzzle(decodedGenre);
+    const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
+
+    return (
+        <>
+            <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
+                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+                    <Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>Global</Link>
+                    {genres.map(g => (
+                        <Link
+                            key={g.id}
+                            href={`/${g.name}`}
+                            style={{
+                                fontWeight: g.name === decodedGenre ? 'bold' : 'normal',
+                                textDecoration: g.name === decodedGenre ? 'underline' : 'none',
+                                color: g.name === decodedGenre ? 'black' : '#4b5563'
+                            }}
+                        >
+                            {g.name}
+                        </Link>
+                    ))}
+                </div>
+            </div>
+            <Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
+        </>
+    );
+}

app/admin/page.tsx

@@ -2,6 +2,14 @@
 
 import { useState, useEffect } from 'react';
 
+interface Genre {
+    id: number;
+    name: string;
+    _count?: {
+        songs: number;
+    };
+}
+
 interface Song {
     id: number;
     title: string;
@@ -9,6 +17,7 @@ interface Song {
     filename: string;
     createdAt: string;
     activations: number;
+    genres: Genre[];
 }
 
 type SortField = 'id' | 'title' | 'artist' | 'createdAt';
@@ -20,11 +29,22 @@ export default function AdminPage() {
     const [file, setFile] = useState<File | null>(null);
     const [message, setMessage] = useState('');
     const [songs, setSongs] = useState<Song[]>([]);
+    const [genres, setGenres] = useState<Genre[]>([]);
+    const [newGenreName, setNewGenreName] = useState('');
 
     // Edit state
     const [editingId, setEditingId] = useState<number | null>(null);
     const [editTitle, setEditTitle] = useState('');
     const [editArtist, setEditArtist] = useState('');
+    const [editGenreIds, setEditGenreIds] = useState<number[]>([]);
+
+    // Post-upload state
+    const [uploadedSong, setUploadedSong] = useState<Song | null>(null);
+    const [uploadGenreIds, setUploadGenreIds] = useState<number[]>([]);
+
+    // AI Categorization state
+    const [isCategorizing, setIsCategorizing] = useState(false);
+    const [categorizationResults, setCategorizationResults] = useState<any>(null);
 
     // Sort state
     const [sortField, setSortField] = useState<SortField>('artist');
@@ -45,6 +65,7 @@ export default function AdminPage() {
         if (authToken === 'authenticated') {
             setIsAuthenticated(true);
             fetchSongs();
+            fetchGenres();
         }
     }, []);
 
@@ -57,6 +78,7 @@ export default function AdminPage() {
             localStorage.setItem('hoerdle_admin_auth', 'authenticated');
             setIsAuthenticated(true);
             fetchSongs();
+            fetchGenres();
         } else {
             alert('Wrong password');
         }
@@ -70,6 +92,69 @@ export default function AdminPage() {
         }
     };
 
+    const fetchGenres = async () => {
+        const res = await fetch('/api/genres');
+        if (res.ok) {
+            const data = await res.json();
+            setGenres(data);
+        }
+    };
+
+    const createGenre = async () => {
+        if (!newGenreName.trim()) return;
+        const res = await fetch('/api/genres', {
+            method: 'POST',
+            body: JSON.stringify({ name: newGenreName }),
+        });
+        if (res.ok) {
+            setNewGenreName('');
+            fetchGenres();
+        } else {
+            alert('Failed to create genre');
+        }
+    };
+
+    const deleteGenre = async (id: number) => {
+        if (!confirm('Delete this genre?')) return;
+        const res = await fetch('/api/genres', {
+            method: 'DELETE',
+            body: JSON.stringify({ id }),
+        });
+        if (res.ok) {
+            fetchGenres();
+        } else {
+            alert('Failed to delete genre');
+        }
+    };
+
+    const handleAICategorization = async () => {
+        if (!confirm('This will categorize all songs without genres using AI. Continue?')) return;
+
+        setIsCategorizing(true);
+        setCategorizationResults(null);
+
+        try {
+            const res = await fetch('/api/categorize', {
+                method: 'POST',
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                setCategorizationResults(data);
+                fetchSongs(); // Refresh song list
+                fetchGenres(); // Refresh genre counts
+            } else {
+                const error = await res.json();
+                alert(`Categorization failed: ${error.error || 'Unknown error'}`);
+            }
+        } catch (error) {
+            alert('Failed to categorize songs');
+            console.error(error);
+        } finally {
+            setIsCategorizing(false);
+        }
+    };
+
     const handleUpload = async (e: React.FormEvent) => {
         e.preventDefault();
         if (!file) return;
@@ -104,29 +189,62 @@ export default function AdminPage() {
 
             setMessage(statusMessage);
             setFile(null);
+            setUploadedSong(data.song);
+            setUploadGenreIds([]); // Reset selection
             fetchSongs();
         } else {
             setMessage('Upload failed.');
         }
     };
 
+    const saveUploadedSongGenres = async () => {
+        if (!uploadedSong) return;
+
+        const res = await fetch('/api/songs', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                id: uploadedSong.id,
+                title: uploadedSong.title,
+                artist: uploadedSong.artist,
+                genreIds: uploadGenreIds
+            }),
+        });
+
+        if (res.ok) {
+            setUploadedSong(null);
+            setUploadGenreIds([]);
+            fetchSongs();
+            setMessage(prev => prev + '\n✅ Genres assigned successfully!');
+        } else {
+            alert('Failed to assign genres');
+        }
+    };
+
     const startEditing = (song: Song) => {
         setEditingId(song.id);
         setEditTitle(song.title);
         setEditArtist(song.artist);
+        setEditGenreIds(song.genres.map(g => g.id));
     };
 
     const cancelEditing = () => {
         setEditingId(null);
         setEditTitle('');
         setEditArtist('');
+        setEditGenreIds([]);
     };
 
     const saveEditing = async (id: number) => {
         const res = await fetch('/api/songs', {
             method: 'PUT',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ id, title: editTitle, artist: editArtist }),
+            body: JSON.stringify({
+                id,
+                title: editTitle,
+                artist: editArtist,
+                genreIds: editGenreIds
+            }),
         });
 
         if (res.ok) {
@@ -255,6 +373,124 @@ export default function AdminPage() {
         <div className="admin-container">
             <h1 className="title" style={{ marginBottom: '2rem' }}>Admin Dashboard</h1>
 
+            {/* Genre Management */}
+            <div className="admin-card" style={{ marginBottom: '2rem' }}>
+                <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Manage Genres</h2>
+                <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+                    <input
+                        type="text"
+                        value={newGenreName}
+                        onChange={e => setNewGenreName(e.target.value)}
+                        placeholder="New Genre Name"
+                        className="form-input"
+                        style={{ maxWidth: '200px' }}
+                    />
+                    <button onClick={createGenre} className="btn-primary">Add Genre</button>
+                </div>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                    {genres.map(genre => (
+                        <div key={genre.id} style={{
+                            background: '#f3f4f6',
+                            padding: '0.25rem 0.75rem',
+                            borderRadius: '999px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                            fontSize: '0.875rem'
+                        }}>
+                            <span>{genre.name} ({genre._count?.songs || 0})</span>
+                            <button
+                                onClick={() => deleteGenre(genre.id)}
+                                style={{ border: 'none', background: 'none', cursor: 'pointer', color: '#ef4444', fontWeight: 'bold' }}
+                            >
+                                ×
+                            </button>
+                        </div>
+                    ))}
+                </div>
+
+                {/* AI Categorization */}
+                <div style={{ marginTop: '1.5rem', paddingTop: '1rem', borderTop: '1px solid #e5e7eb' }}>
+                    <button
+                        onClick={handleAICategorization}
+                        disabled={isCategorizing || genres.length === 0}
+                        className="btn-primary"
+                        style={{
+                            opacity: isCategorizing || genres.length === 0 ? 0.5 : 1,
+                            cursor: isCategorizing || genres.length === 0 ? 'not-allowed' : 'pointer'
+                        }}
+                    >
+                        {isCategorizing ? '🤖 Categorizing...' : '🤖 Auto-Categorize Songs with AI'}
+                    </button>
+                    {genres.length === 0 && (
+                        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+                            Please create at least one genre first.
+                        </p>
+                    )}
+                </div>
+
+                {/* Categorization Results */}
+                {categorizationResults && (
+                    <div style={{
+                        marginTop: '1rem',
+                        padding: '1rem',
+                        background: '#f0fdf4',
+                        border: '1px solid #86efac',
+                        borderRadius: '0.5rem'
+                    }}>
+                        <h3 style={{ fontWeight: 'bold', marginBottom: '0.5rem', color: '#166534' }}>
+                            ✅ Categorization Complete
+                        </h3>
+                        <p style={{ fontSize: '0.875rem', marginBottom: '0.5rem' }}>
+                            {categorizationResults.message}
+                        </p>
+                        {categorizationResults.results && categorizationResults.results.length > 0 && (
+                            <div style={{ marginTop: '1rem' }}>
+                                <p style={{ fontWeight: 'bold', fontSize: '0.875rem', marginBottom: '0.5rem' }}>Updated Songs:</p>
+                                <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                                    {categorizationResults.results.map((result: any) => (
+                                        <div key={result.songId} style={{
+                                            padding: '0.5rem',
+                                            background: 'white',
+                                            borderRadius: '0.25rem',
+                                            marginBottom: '0.5rem',
+                                            fontSize: '0.875rem'
+                                        }}>
+                                            <strong>{result.title}</strong> by {result.artist}
+                                            <div style={{ display: 'flex', gap: '0.25rem', marginTop: '0.25rem', flexWrap: 'wrap' }}>
+                                                {result.assignedGenres.map((genre: string) => (
+                                                    <span key={genre} style={{
+                                                        background: '#dbeafe',
+                                                        padding: '0.1rem 0.4rem',
+                                                        borderRadius: '0.25rem',
+                                                        fontSize: '0.75rem'
+                                                    }}>
+                                                        {genre}
+                                                    </span>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                        <button
+                            onClick={() => setCategorizationResults(null)}
+                            style={{
+                                marginTop: '1rem',
+                                padding: '0.5rem 1rem',
+                                background: 'white',
+                                border: '1px solid #d1d5db',
+                                borderRadius: '0.25rem',
+                                cursor: 'pointer'
+                            }}
+                        >
+                            Close
+                        </button>
+                    </div>
+                )}
+            </div>
+
             <div className="admin-card" style={{ marginBottom: '2rem' }}>
                 <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Upload New Song</h2>
                 <form onSubmit={handleUpload}>
@@ -286,6 +522,41 @@ export default function AdminPage() {
                         </div>
                     )}
                 </form>
+
+                {/* Post-upload Genre Selection */}
+                {uploadedSong && (
+                    <div style={{ marginTop: '1.5rem', padding: '1rem', background: '#eef2ff', borderRadius: '0.5rem', border: '1px solid #c7d2fe' }}>
+                        <h3 style={{ fontWeight: 'bold', marginBottom: '0.5rem' }}>Assign Genres to "{uploadedSong.title}"</h3>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '1rem' }}>
+                            {genres.map(genre => (
+                                <label key={genre.id} style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.25rem',
+                                    background: 'white',
+                                    padding: '0.25rem 0.5rem',
+                                    borderRadius: '0.25rem',
+                                    cursor: 'pointer',
+                                    border: uploadGenreIds.includes(genre.id) ? '1px solid #4f46e5' : '1px solid #e5e7eb'
+                                }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={uploadGenreIds.includes(genre.id)}
+                                        onChange={e => {
+                                            if (e.target.checked) {
+                                                setUploadGenreIds([...uploadGenreIds, genre.id]);
+                                            } else {
+                                                setUploadGenreIds(uploadGenreIds.filter(id => id !== genre.id));
+                                            }
+                                        }}
+                                    />
+                                    {genre.name}
+                                </label>
+                            ))}
+                        </div>
+                        <button onClick={saveUploadedSongGenres} className="btn-primary">Save Genres</button>
+                    </div>
+                )}
             </div>
 
             <div className="admin-card">
@@ -326,6 +597,7 @@ export default function AdminPage() {
                                 >
                                     Artist {sortField === 'artist' && (sortDirection === 'asc' ? '↑' : '↓')}
                                 </th>
+                                <th style={{ padding: '0.75rem' }}>Genres</th>
                                 <th
                                     style={{ padding: '0.75rem', cursor: 'pointer', userSelect: 'none' }}
                                     onClick={() => handleSort('createdAt')}
@@ -361,6 +633,26 @@ export default function AdminPage() {
                                                     style={{ padding: '0.25rem' }}
                                                 />
                                             </td>
+                                            <td style={{ padding: '0.75rem' }}>
+                                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
+                                                    {genres.map(genre => (
+                                                        <label key={genre.id} style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.75rem' }}>
+                                                            <input
+                                                                type="checkbox"
+                                                                checked={editGenreIds.includes(genre.id)}
+                                                                onChange={e => {
+                                                                    if (e.target.checked) {
+                                                                        setEditGenreIds([...editGenreIds, genre.id]);
+                                                                    } else {
+                                                                        setEditGenreIds(editGenreIds.filter(id => id !== genre.id));
+                                                                    }
+                                                                }}
+                                                            />
+                                                            {genre.name}
+                                                        </label>
+                                                    ))}
+                                                </div>
+                                            </td>
                                             <td style={{ padding: '0.75rem', color: '#666', fontSize: '0.75rem' }}>
                                                 {new Date(song.createdAt).toLocaleDateString('de-DE')}
                                             </td>
@@ -388,6 +680,20 @@ export default function AdminPage() {
                                         <>
                                             <td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{song.title}</td>
                                             <td style={{ padding: '0.75rem' }}>{song.artist}</td>
+                                            <td style={{ padding: '0.75rem' }}>
+                                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
+                                                    {song.genres?.map(g => (
+                                                        <span key={g.id} style={{
+                                                            background: '#e5e7eb',
+                                                            padding: '0.1rem 0.4rem',
+                                                            borderRadius: '0.25rem',
+                                                            fontSize: '0.7rem'
+                                                        }}>
+                                                            {g.name}
+                                                        </span>
+                                                    ))}
+                                                </div>
+                                            </td>
                                             <td style={{ padding: '0.75rem', color: '#666', fontSize: '0.75rem' }}>
                                                 {new Date(song.createdAt).toLocaleDateString('de-DE')}
                                             </td>
@@ -423,7 +729,7 @@ export default function AdminPage() {
                             ))}
                             {paginatedSongs.length === 0 && (
                                 <tr>
-                                    <td colSpan={6} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}>
+                                    <td colSpan={7} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}>
                                         {searchQuery ? 'No songs found matching your search.' : 'No songs uploaded yet.'}
                                     </td>
                                 </tr>

app/api/categorize/route.ts

@@ -0,0 +1,164 @@
+'use server';
+
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY;
+const OPENROUTER_MODEL = 'anthropic/claude-3.5-haiku';
+
+interface CategorizeResult {
+    songId: number;
+    title: string;
+    artist: string;
+    assignedGenres: string[];
+}
+
+export async function POST() {
+    try {
+        if (!OPENROUTER_API_KEY) {
+            return Response.json(
+                { error: 'OPENROUTER_API_KEY not configured' },
+                { status: 500 }
+            );
+        }
+
+        // Fetch all songs without genres
+        const uncategorizedSongs = await prisma.song.findMany({
+            where: {
+                genres: {
+                    none: {}
+                }
+            },
+            include: {
+                genres: true
+            }
+        });
+
+        if (uncategorizedSongs.length === 0) {
+            return Response.json({
+                message: 'No uncategorized songs found',
+                results: []
+            });
+        }
+
+        // Fetch all available genres
+        const allGenres = await prisma.genre.findMany({
+            orderBy: { name: 'asc' }
+        });
+
+        if (allGenres.length === 0) {
+            return Response.json(
+                { error: 'No genres available. Please create genres first.' },
+                { status: 400 }
+            );
+        }
+
+        const results: CategorizeResult[] = [];
+
+        // Process each song
+        for (const song of uncategorizedSongs) {
+            try {
+                const genreNames = allGenres.map(g => g.name);
+
+                const prompt = `You are a music genre categorization assistant. Given a song title and artist, categorize it into 0-3 of the available genres.
+
+Song: "${song.title}" by ${song.artist}
+Available genres: ${genreNames.join(', ')}
+
+Rules:
+- Select 0-3 genres that best match this song
+- Only use genres from the available list
+- Respond with ONLY a JSON array of genre names, nothing else
+- If no genres match well, return an empty array []
+
+Example response: ["Rock", "Alternative"]
+
+Your response:`;
+
+                const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${OPENROUTER_API_KEY}`,
+                        'Content-Type': 'application/json',
+                        'HTTP-Referer': 'https://hoerdle.elpatron.me',
+                        'X-Title': 'Hördle Genre Categorization'
+                    },
+                    body: JSON.stringify({
+                        model: OPENROUTER_MODEL,
+                        messages: [
+                            {
+                                role: 'user',
+                                content: prompt
+                            }
+                        ],
+                        temperature: 0.3,
+                        max_tokens: 100
+                    })
+                });
+
+                if (!response.ok) {
+                    console.error(`OpenRouter API error for song ${song.id}:`, await response.text());
+                    continue;
+                }
+
+                const data = await response.json();
+                const aiResponse = data.choices?.[0]?.message?.content?.trim() || '[]';
+
+                // Parse AI response
+                let suggestedGenreNames: string[] = [];
+                try {
+                    suggestedGenreNames = JSON.parse(aiResponse);
+                } catch (e) {
+                    console.error(`Failed to parse AI response for song ${song.id}:`, aiResponse);
+                    continue;
+                }
+
+                // Filter to only valid genres and get their IDs
+                const genreIds = allGenres
+                    .filter(g => suggestedGenreNames.includes(g.name))
+                    .map(g => g.id)
+                    .slice(0, 3); // Max 3 genres
+
+                if (genreIds.length > 0) {
+                    // Update song with genres
+                    await prisma.song.update({
+                        where: { id: song.id },
+                        data: {
+                            genres: {
+                                connect: genreIds.map(id => ({ id }))
+                            }
+                        }
+                    });
+
+                    results.push({
+                        songId: song.id,
+                        title: song.title,
+                        artist: song.artist,
+                        assignedGenres: suggestedGenreNames.filter(name =>
+                            allGenres.some(g => g.name === name)
+                        )
+                    });
+                }
+
+            } catch (error) {
+                console.error(`Error processing song ${song.id}:`, error);
+                continue;
+            }
+        }
+
+        return Response.json({
+            message: `Processed ${uncategorizedSongs.length} songs, categorized ${results.length}`,
+            totalProcessed: uncategorizedSongs.length,
+            totalCategorized: results.length,
+            results
+        });
+
+    } catch (error) {
+        console.error('Categorization error:', error);
+        return Response.json(
+            { error: 'Failed to categorize songs' },
+            { status: 500 }
+        );
+    }
+}

app/api/daily/route.ts

@@ -1,78 +1,18 @@
 import { NextResponse } from 'next/server';
-import { PrismaClient } from '@prisma/client';
-import { getTodayISOString } from '@/lib/dateUtils';
+import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
 
-const prisma = new PrismaClient();
-
-export async function GET() {
+export async function GET(request: Request) {
     try {
-        const today = getTodayISOString();
+        const { searchParams } = new URL(request.url);
+        const genreName = searchParams.get('genre');
 
-        let dailyPuzzle = await prisma.dailyPuzzle.findUnique({
-            where: { date: today },
-            include: { song: true },
-        });
+        const puzzle = await getOrCreateDailyPuzzle(genreName);
 
-        console.log(`[Daily Puzzle] Date: ${today}, Found existing: ${!!dailyPuzzle}`);
-
-        if (!dailyPuzzle) {
-            // Get all songs with their usage count
-            const allSongs = await prisma.song.findMany({
-                include: {
-                    puzzles: true,
-                },
-            });
-
-            if (allSongs.length === 0) {
-                return NextResponse.json({ error: 'No songs available' }, { status: 404 });
-            }
-
-            // Calculate weights: songs never used get weight 1.0, 
-            // songs used once get 0.5, twice 0.33, etc.
-            const weightedSongs = allSongs.map(song => ({
-                song,
-                weight: 1.0 / (song.puzzles.length + 1),
-            }));
-
-            // Calculate total weight
-            const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
-
-            // Pick a random song based on weights
-            let random = Math.random() * totalWeight;
-            let selectedSong = weightedSongs[0].song;
-
-            for (const item of weightedSongs) {
-                random -= item.weight;
-                if (random <= 0) {
-                    selectedSong = item.song;
-                    break;
-                }
-            }
-
-            // Create the daily puzzle
-            dailyPuzzle = await prisma.dailyPuzzle.create({
-                data: {
-                    date: today,
-                    songId: selectedSong.id,
-                },
-                include: { song: true },
-            });
-
-            console.log(`[Daily Puzzle] Created new puzzle for ${today} with song: ${selectedSong.title} (ID: ${selectedSong.id})`);
+        if (!puzzle) {
+            return NextResponse.json({ error: 'Failed to get or create puzzle' }, { status: 404 });
         }
 
-        if (!dailyPuzzle) {
-            return NextResponse.json({ error: 'Failed to create puzzle' }, { status: 500 });
-        }
-
-        return NextResponse.json({
-            id: dailyPuzzle.id,
-            audioUrl: `/uploads/${dailyPuzzle.song.filename}`,
-            songId: dailyPuzzle.songId,
-            title: dailyPuzzle.song.title,
-            artist: dailyPuzzle.song.artist,
-            coverImage: dailyPuzzle.song.coverImage ? `/uploads/covers/${dailyPuzzle.song.coverImage}` : null,
-        });
+        return NextResponse.json(puzzle);
 
     } catch (error) {
         console.error('Error fetching daily puzzle:', error);

app/api/genres/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+export async function GET() {
+    try {
+        const genres = await prisma.genre.findMany({
+            orderBy: { name: 'asc' },
+            include: {
+                _count: {
+                    select: { songs: true }
+                }
+            }
+        });
+        return NextResponse.json(genres);
+    } catch (error) {
+        console.error('Error fetching genres:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}
+
+export async function POST(request: Request) {
+    try {
+        const { name } = await request.json();
+
+        if (!name || typeof name !== 'string') {
+            return NextResponse.json({ error: 'Invalid name' }, { status: 400 });
+        }
+
+        const genre = await prisma.genre.create({
+            data: { name: name.trim() },
+        });
+
+        return NextResponse.json(genre);
+    } catch (error) {
+        console.error('Error creating genre:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}
+
+export async function DELETE(request: Request) {
+    try {
+        const { id } = await request.json();
+
+        if (!id) {
+            return NextResponse.json({ error: 'Missing id' }, { status: 400 });
+        }
+
+        await prisma.genre.delete({
+            where: { id: Number(id) },
+        });
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Error deleting genre:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}

app/api/songs/route.ts

@@ -11,6 +11,7 @@ export async function GET() {
         orderBy: { createdAt: 'desc' },
         include: {
             puzzles: true,
+            genres: true,
         },
     });
 
@@ -23,6 +24,7 @@ export async function GET() {
         createdAt: song.createdAt,
         coverImage: song.coverImage,
         activations: song.puzzles.length,
+        genres: song.genres,
     }));
 
     return NextResponse.json(songsWithActivations);
@@ -144,6 +146,7 @@ export async function POST(request: Request) {
                 filename,
                 coverImage,
             },
+            include: { genres: true }
         });
 
         return NextResponse.json({
@@ -158,15 +161,24 @@ export async function POST(request: Request) {
 
 export async function PUT(request: Request) {
     try {
-        const { id, title, artist } = await request.json();
+        const { id, title, artist, genreIds } = await request.json();
 
         if (!id || !title || !artist) {
             return NextResponse.json({ error: 'Missing fields' }, { status: 400 });
         }
 
+        const data: any = { title, artist };
+
+        if (genreIds) {
+            data.genres = {
+                set: genreIds.map((gId: number) => ({ id: gId }))
+            };
+        }
+
         const updatedSong = await prisma.song.update({
             where: { id: Number(id) },
-            data: { title, artist },
+            data,
+            include: { genres: true }
         });
 
         return NextResponse.json(updatedSong);

app/page.tsx

@@ -1,81 +1,29 @@
 import Game from '@/components/Game';
-import { getTodayISOString } from '@/lib/dateUtils';
+import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
+import Link from 'next/link';
+import { PrismaClient } from '@prisma/client';
 
 export const dynamic = 'force-dynamic';
 
-import { PrismaClient } from '@prisma/client';
-
-// PrismaClient is attached to the `global` object in development to prevent
-// exhausting your database connection limit.
-const globalForPrisma = global as unknown as { prisma: PrismaClient };
-
-const prisma = globalForPrisma.prisma || new PrismaClient();
-
-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
-
-async function getDailyPuzzle() {
-  try {
-    const today = getTodayISOString();
-    console.log(`[getDailyPuzzle] Checking puzzle for date: ${today}`);
-
-    let dailyPuzzle = await prisma.dailyPuzzle.findUnique({
-      where: { date: today },
-      include: { song: true },
-    });
-
-    if (!dailyPuzzle) {
-      console.log('[getDailyPuzzle] No puzzle found, attempting to create...');
-      const songsCount = await prisma.song.count();
-      console.log(`[getDailyPuzzle] Found ${songsCount} songs in DB`);
-
-      if (songsCount > 0) {
-        const skip = Math.floor(Math.random() * songsCount);
-        const randomSong = await prisma.song.findFirst({ skip });
-
-        if (randomSong) {
-          try {
-            dailyPuzzle = await prisma.dailyPuzzle.create({
-              data: { date: today, songId: randomSong.id },
-              include: { song: true },
-            });
-            console.log(`[getDailyPuzzle] Created puzzle for song: ${randomSong.title}`);
-          } catch (createError) {
-            // Handle race condition: if another request created it in the meantime
-            console.log('[getDailyPuzzle] Creation failed, trying to fetch again (likely race condition)');
-            dailyPuzzle = await prisma.dailyPuzzle.findUnique({
-              where: { date: today },
-              include: { song: true },
-            });
-          }
-        }
-      } else {
-        console.log('[getDailyPuzzle] No songs available to create puzzle');
-      }
-    }
-
-    if (!dailyPuzzle) {
-      console.log('[getDailyPuzzle] Failed to get or create puzzle');
-      return null;
-    }
-
-    return {
-      id: dailyPuzzle.id,
-      audioUrl: `/uploads/${dailyPuzzle.song.filename}`,
-      songId: dailyPuzzle.songId,
-      title: dailyPuzzle.song.title,
-      artist: dailyPuzzle.song.artist,
-      coverImage: dailyPuzzle.song.coverImage ? `/uploads/covers/${dailyPuzzle.song.coverImage}` : null,
-    };
-  } catch (e) {
-    console.error('[getDailyPuzzle] Error:', e);
-    return null;
-  }
-}
+const prisma = new PrismaClient();
 
 export default async function Home() {
-  const dailyPuzzle = await getDailyPuzzle();
+  const dailyPuzzle = await getOrCreateDailyPuzzle(null); // Global puzzle
+  const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
 
   return (
-    <Game dailyPuzzle={dailyPuzzle} />
+    <>
+      <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+          <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Global</Link>
+          {genres.map(g => (
+            <Link key={g.id} href={`/${g.name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
+              {g.name}
+            </Link>
+          ))}
+        </div>
+      </div>
+      <Game dailyPuzzle={dailyPuzzle} genre={null} />
+    </>
   );
 }

components/Game.tsx

@@ -16,12 +16,13 @@ interface GameProps {
         artist: string;
         coverImage: string | null;
     } | null;
+    genre?: string | null;
 }
 
 const UNLOCK_STEPS = [2, 4, 7, 11, 16, 30, 60];
 
-export default function Game({ dailyPuzzle }: GameProps) {
-    const { gameState, statistics, addGuess } = useGameState();
+export default function Game({ dailyPuzzle, genre = null }: GameProps) {
+    const { gameState, statistics, addGuess } = useGameState(genre);
     const [hasWon, setHasWon] = useState(false);
     const [hasLost, setHasLost] = useState(false);
     const [shareText, setShareText] = useState('Share Result');
@@ -42,7 +43,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
         <div className="game-container" style={{ textAlign: 'center', padding: '2rem' }}>
             <h2>No Puzzle Available</h2>
             <p>Could not generate a daily puzzle.</p>
-            <p>Please ensure there are songs in the database.</p>
+            <p>Please ensure there are songs in the database{genre ? ` for genre "${genre}"` : ''}.</p>
             <a href="/admin" style={{ color: 'var(--primary)', textDecoration: 'underline' }}>Go to Admin Dashboard</a>
         </div>
     );
@@ -58,6 +59,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
             addGuess(song.title, false);
             if (gameState.guesses.length + 1 >= 7) {
                 setHasLost(true);
+                setHasWon(false); // Ensure won is false
                 sendGotifyNotification(7, 'lost', dailyPuzzle.id);
             }
         }
@@ -72,6 +74,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
         setLastAction('SKIP');
         addGuess("SKIPPED", false);
         setHasLost(true);
+        setHasWon(false);
         sendGotifyNotification(7, 'lost', dailyPuzzle.id);
     };
 
@@ -98,7 +101,8 @@ export default function Game({ dailyPuzzle }: GameProps) {
         }
 
         const speaker = hasWon ? '🔉' : '🔇';
-        const text = `Hördle #${dailyPuzzle.id}\n\n${speaker}${emojiGrid}\n\n#Hördle #Music\n\nhttps://hoerdle.elpatron.me`;
+        const genreText = genre ? `Genre: ${genre}\n` : '';
+        const text = `Hördle #${dailyPuzzle.id}\n${genreText}\n${speaker}${emojiGrid}\n\n#Hördle #Music\n\nhttps://hoerdle.elpatron.me`;
 
         // Fallback method for copying to clipboard
         const textarea = document.createElement('textarea');

docker-compose.example.yml

@@ -14,6 +14,7 @@ services:
       - TZ=Europe/Berlin # Timezone for daily puzzle rotation
       - GOTIFY_URL=https://gotify.example.com
       - GOTIFY_APP_TOKEN=your_gotify_token
+      - OPENROUTER_API_KEY=your_openrouter_api_key
     volumes:
       - ./data:/app/data
       - ./public/uploads:/app/public/uploads

lib/dailyPuzzle.ts

@@ -0,0 +1,113 @@
+import { PrismaClient } from '@prisma/client';
+import { getTodayISOString } from './dateUtils';
+
+const prisma = new PrismaClient();
+
+export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
+    try {
+        const today = getTodayISOString();
+        let genreId: number | null = null;
+
+        if (genreName) {
+            const genre = await prisma.genre.findUnique({
+                where: { name: genreName }
+            });
+            if (genre) {
+                genreId = genre.id;
+            } else {
+                return null; // Genre not found
+            }
+        }
+
+        let dailyPuzzle = await prisma.dailyPuzzle.findFirst({
+            where: {
+                date: today,
+                genreId: genreId
+            },
+            include: { song: true },
+        });
+
+        console.log(`[Daily Puzzle] Date: ${today}, Genre: ${genreName || 'Global'}, Found existing: ${!!dailyPuzzle}`);
+
+        if (!dailyPuzzle) {
+            // Get songs available for this genre
+            const whereClause = genreId
+                ? { genres: { some: { id: genreId } } }
+                : {}; // Global puzzle picks from ALL songs
+
+            const allSongs = await prisma.song.findMany({
+                where: whereClause,
+                include: {
+                    puzzles: {
+                        where: { genreId: genreId }
+                    },
+                },
+            });
+
+            if (allSongs.length === 0) {
+                console.log(`[Daily Puzzle] No songs available for genre: ${genreName || 'Global'}`);
+                return null;
+            }
+
+            // Calculate weights
+            const weightedSongs = allSongs.map(song => ({
+                song,
+                weight: 1.0 / (song.puzzles.length + 1),
+            }));
+
+            // Calculate total weight
+            const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
+
+            // Pick a random song based on weights
+            let random = Math.random() * totalWeight;
+            let selectedSong = weightedSongs[0].song;
+
+            for (const item of weightedSongs) {
+                random -= item.weight;
+                if (random <= 0) {
+                    selectedSong = item.song;
+                    break;
+                }
+            }
+
+            // Create the daily puzzle
+            try {
+                dailyPuzzle = await prisma.dailyPuzzle.create({
+                    data: {
+                        date: today,
+                        songId: selectedSong.id,
+                        genreId: genreId
+                    },
+                    include: { song: true },
+                });
+                console.log(`[Daily Puzzle] Created new puzzle for ${today} (Genre: ${genreName || 'Global'}) with song: ${selectedSong.title}`);
+            } catch (e) {
+                // Handle race condition
+                console.log('[Daily Puzzle] Creation failed, trying to fetch again (likely race condition)');
+                dailyPuzzle = await prisma.dailyPuzzle.findFirst({
+                    where: {
+                        date: today,
+                        genreId: genreId
+                    },
+                    include: { song: true },
+                });
+            }
+        }
+
+        if (!dailyPuzzle) return null;
+
+        return {
+            id: dailyPuzzle.id,
+            audioUrl: `/uploads/${dailyPuzzle.song.filename}`,
+            songId: dailyPuzzle.songId,
+            title: dailyPuzzle.song.title,
+            artist: dailyPuzzle.song.artist,
+            coverImage: dailyPuzzle.song.coverImage ? `/uploads/covers/${dailyPuzzle.song.coverImage}` : null,
+            genre: genreName
+        };
+
+    } catch (error) {
+        console.error('Error in getOrCreateDailyPuzzle:', error);
+        return null;
+    }
+}

lib/gameState.ts

@@ -25,13 +25,20 @@ export interface Statistics {
 const STORAGE_KEY = 'hoerdle_game_state';
 const STATS_KEY = 'hoerdle_statistics';
 
-export function useGameState() {
+export function useGameState(genre: string | null = null) {
     const [gameState, setGameState] = useState<GameState | null>(null);
     const [statistics, setStatistics] = useState<Statistics | null>(null);
 
+    const STORAGE_KEY_PREFIX = 'hoerdle_game_state';
+    const STATS_KEY_PREFIX = 'hoerdle_statistics';
+
+    const getStorageKey = () => genre ? `${STORAGE_KEY_PREFIX}_${genre}` : STORAGE_KEY_PREFIX;
+    const getStatsKey = () => genre ? `${STATS_KEY_PREFIX}_${genre}` : STATS_KEY_PREFIX;
+
     useEffect(() => {
         // Load game state
-        const stored = localStorage.getItem(STORAGE_KEY);
+        const storageKey = getStorageKey();
+        const stored = localStorage.getItem(storageKey);
         const today = getTodayISOString();
 
         if (stored) {
@@ -48,7 +55,7 @@ export function useGameState() {
                     lastPlayed: Date.now(),
                 };
                 setGameState(newState);
-                localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
+                localStorage.setItem(storageKey, JSON.stringify(newState));
             }
         } else {
             // No state
@@ -60,11 +67,12 @@ export function useGameState() {
                 lastPlayed: Date.now(),
             };
             setGameState(newState);
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
+            localStorage.setItem(storageKey, JSON.stringify(newState));
         }
 
         // Load statistics
-        const storedStats = localStorage.getItem(STATS_KEY);
+        const statsKey = getStatsKey();
+        const storedStats = localStorage.getItem(statsKey);
         if (storedStats) {
             const parsedStats = JSON.parse(storedStats);
             // Migration for existing stats without solvedIn7
@@ -84,13 +92,13 @@ export function useGameState() {
                 failed: 0,
             };
             setStatistics(newStats);
-            localStorage.setItem(STATS_KEY, JSON.stringify(newStats));
+            localStorage.setItem(statsKey, JSON.stringify(newStats));
         }
-    }, []);
+    }, [genre]); // Re-run when genre changes
 
     const saveState = (newState: GameState) => {
         setGameState(newState);
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
+        localStorage.setItem(getStorageKey(), JSON.stringify(newState));
     };
 
     const updateStatistics = (attempts: number, solved: boolean) => {
@@ -113,7 +121,7 @@ export function useGameState() {
         }
 
         setStatistics(newStats);
-        localStorage.setItem(STATS_KEY, JSON.stringify(newStats));
+        localStorage.setItem(getStatsKey(), JSON.stringify(newStats));
     };
 
     const addGuess = (guess: string, correct: boolean) => {

package.json

@@ -5,13 +5,14 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "prisma migrate deploy && next start",
     "lint": "eslint"
   },
   "dependencies": {
     "@prisma/client": "^6.19.0",
     "music-metadata": "^11.10.2",
     "next": "16.0.3",
+    "prisma": "^6.19.0",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },
@@ -22,7 +23,6 @@
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.0.3",
-    "prisma": "^6.19.0",
     "typescript": "^5"
   }
-}
+}

prisma/schema.prisma

@@ -18,11 +18,23 @@ model Song {
   coverImage String?  // Filename in public/uploads/covers
   createdAt DateTime @default(now())
   puzzles   DailyPuzzle[]
+  genres    Genre[]
+}
+
+model Genre {
+  id    Int    @id @default(autoincrement())
+  name  String @unique
+  songs Song[]
+  dailyPuzzles DailyPuzzle[]
 }
 
 model DailyPuzzle {
   id        Int      @id @default(autoincrement())
-  date      String   @unique // Format: YYYY-MM-DD
+  date      String   // Format: YYYY-MM-DD
   songId    Int
   song      Song     @relation(fields: [songId], references: [id])
+  genreId   Int?
+  genre     Genre?   @relation(fields: [genreId], references: [id])
+
+  @@unique([date, genreId]) // Unique puzzle per date per genre (null genreId = global puzzle)
 }

scripts/docker-entrypoint.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+set -e
+
+echo "Starting deployment..."
+
+# Run migrations
+echo "Running database migrations..."
+npx prisma migrate deploy
+
+# Start the application
+echo "Starting application..."
+exec node server.js

walkthrough.md

@@ -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.