feat: white label transformation and bugfix for audio stream

README.md

@@ -48,9 +48,17 @@ Eine Web-App inspiriert von Heardle, bei der Nutzer täglich einen Song anhand k
     - **Markdown Support:** Formatierung von Texten, Links und Listen.
     - **Homepage Integration:** Dezentrale Anzeige auf der Startseite (collapsible).
     - **Featured News:** Hervorhebung wichtiger Ankündigungen.
-    - **Special-Verknüpfung:** Direkte Links zu Specials in News-Beiträgen.
+    - Special-Verknüpfung: Direkte Links zu Specials in News-Beiträgen.
     - Verwaltung über das Admin-Dashboard.
 
+## White Labeling
+
+Hördle ist "White Label Ready". Das bedeutet, du kannst das Branding (Name, Farben, Logos) komplett anpassen, ohne den Code zu ändern.
+
+👉 **[Anleitung zur Anpassung (White Label Guide)](WHITE_LABEL.md)**
+
+Die Konfiguration erfolgt einfach über Umgebungsvariablen und CSS-Variablen.
+
 ## Spielregeln & Punktesystem
 
 Das Ziel ist es, den Song mit so wenigen Hinweisen wie möglich zu erraten und dabei einen möglichst hohen Highscore zu erzielen.

WHITE_LABEL.md

@@ -0,0 +1,67 @@
+# White Labeling Guide
+
+This application is designed to be easily white-labeled. You can customize the branding, colors, and configuration without modifying the core code.
+
+## Configuration
+
+The application is configured via environment variables. You can set these in a `.env` or `.env.local` file.
+
+### Branding
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `NEXT_PUBLIC_APP_NAME` | The name of the application. | `Hördle` |
+| `NEXT_PUBLIC_APP_DESCRIPTION` | The description used in metadata. | `Daily music guessing game...` |
+| `NEXT_PUBLIC_DOMAIN` | The domain name (used for sharing). | `hoerdle.elpatron.me` |
+| `NEXT_PUBLIC_TWITTER_HANDLE` | Twitter handle for metadata. | `@elpatron` |
+
+### Analytics (Plausible)
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `NEXT_PUBLIC_PLAUSIBLE_DOMAIN` | The domain to track in Plausible. | `hoerdle.elpatron.me` |
+| `NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC` | The URL of the Plausible script. | `https://plausible.elpatron.me/js/script.js` |
+
+### Credits
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `NEXT_PUBLIC_CREDITS_ENABLED` | Enable/disable footer credits (`true`/`false`). | `true` |
+| `NEXT_PUBLIC_CREDITS_TEXT` | Text before the link. | `Vibe coded with ☕ and 🍺 by` |
+| `NEXT_PUBLIC_CREDITS_LINK_TEXT` | Text of the link. | `@elpatron@digitalcourage.social` |
+| `NEXT_PUBLIC_CREDITS_LINK_URL` | URL of the link. | `https://digitalcourage.social/@elpatron` |
+
+## Theming
+
+The application uses CSS variables for theming. You can override these variables in your own CSS file or by modifying `app/globals.css`.
+
+### Key Colors
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--primary` | Main action color (buttons). | `#000000` |
+| `--secondary` | Secondary actions. | `#4b5563` |
+| `--accent` | Accent color. | `#667eea` |
+| `--success` | Success state (correct guess). | `#22c55e` |
+| `--danger` | Error state (wrong guess). | `#ef4444` |
+| `--warning` | Warning state (stars). | `#ffc107` |
+| `--muted` | Muted backgrounds. | `#f3f4f6` |
+
+### Example: Red Theme
+
+To create a red-themed version, add this to your CSS:
+
+```css
+:root {
+  --primary: #dc2626;
+  --accent: #ef4444;
+  --accent-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+}
+```
+
+## Assets
+
+To replace the logo and icons:
+1.  Replace `public/favicon.ico`.
+2.  Replace `public/icon.png` (if it exists).
+3.  Update `app/manifest.ts` if you have custom icon paths.

app/[genre]/page.tsx

@@ -1,4 +1,5 @@
 import Game from '@/components/Game';
+import NewsSection from '@/components/NewsSection';
 import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
 import Link from 'next/link';
 import { PrismaClient } from '@prisma/client';
@@ -102,6 +103,7 @@ export default async function GenrePage({ params }: PageProps) {
                     </div>
                 )}
             </div>
+            <NewsSection />
             <Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
         </>
     );

app/api/audio/[filename]/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { readFile, stat } from 'fs/promises';
+import { stat } from 'fs/promises';
+import { createReadStream } from 'fs';
 import path from 'path';
 
 export async function GET(
@@ -30,24 +31,106 @@ export async function GET(
             return new NextResponse('Forbidden', { status: 403 });
         }
 
-        // Check if file exists
+        const stats = await stat(filePath);
+        const fileSize = stats.size;
+        const range = request.headers.get('range');
+
+        if (range) {
+            const parts = range.replace(/bytes=/, "").split("-");
+            const start = parseInt(parts[0], 10);
+            const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
+            const chunksize = (end - start) + 1;
+
+            const stream = createReadStream(filePath, { start, end });
+
+            // Convert Node stream to Web stream
+
+            const readable = new ReadableStream({
+                start(controller) {
+                    let isClosed = false;
+
+                    stream.on('data', (chunk: any) => {
+                        if (isClosed) return;
                         try {
-            await stat(filePath);
+                            controller.enqueue(chunk);
-        } catch {
+                        } catch (e) {
-            return new NextResponse('File not found', { status: 404 });
+                            isClosed = true;
+                            stream.destroy();
                         }
+                    });
 
-        // Read file
+                    stream.on('end', () => {
-        const fileBuffer = await readFile(filePath);
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.close();
+                    });
 
-        // Return with proper headers
+                    stream.on('error', (err: any) => {
-        return new NextResponse(fileBuffer, {
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.error(err);
+                    });
+                },
+                cancel() {
+                    stream.destroy();
+                }
+            });
+
+            return new NextResponse(readable, {
+                status: 206,
                 headers: {
+                    'Content-Range': `bytes ${start}-${end}/${fileSize}`,
+                    'Accept-Ranges': 'bytes',
+                    'Content-Length': chunksize.toString(),
+                    'Content-Type': 'audio/mpeg',
+                    'Cache-Control': 'public, max-age=3600, must-revalidate',
+                },
+            });
+        } else {
+            const stream = createReadStream(filePath);
+
+            // Convert Node stream to Web stream
+            const readable = new ReadableStream({
+                start(controller) {
+                    let isClosed = false;
+
+                    stream.on('data', (chunk: any) => {
+                        if (isClosed) return;
+                        try {
+                            controller.enqueue(chunk);
+                        } catch (e) {
+                            isClosed = true;
+                            stream.destroy();
+                        }
+                    });
+
+                    stream.on('end', () => {
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.close();
+                    });
+
+                    stream.on('error', (err: any) => {
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.error(err);
+                    });
+                },
+                cancel() {
+                    stream.destroy();
+                }
+            });
+
+            return new NextResponse(readable, {
+                status: 200,
+                headers: {
+                    'Content-Length': fileSize.toString(),
                     'Content-Type': 'audio/mpeg',
                     'Accept-Ranges': 'bytes',
                     'Cache-Control': 'public, max-age=3600, must-revalidate',
                 },
             });
+        }
     } catch (error) {
         console.error('Error serving audio file:', error);
         return new NextResponse('Internal Server Error', { status: 500 });

app/api/health/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+    return NextResponse.json({ status: 'ok' }, { status: 200 });
+}

app/globals.css

@@ -2,6 +2,24 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+
+  /* Theme Colors */
+  --primary: #000000;
+  --primary-foreground: #ffffff;
+  --secondary: #4b5563;
+  --secondary-foreground: #ffffff;
+  --accent: #667eea;
+  --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --success: #22c55e;
+  --success-foreground: #ffffff;
+  --danger: #ef4444;
+  --danger-foreground: #ffffff;
+  --warning: #ffc107;
+  --muted: #f3f4f6;
+  --muted-foreground: #6b7280;
+  --border: #e5e7eb;
+  --input: #d1d5db;
+  --ring: #000000;
 }
 
 body {
@@ -51,13 +69,13 @@ body {
   display: flex;
   justify-content: space-between;
   font-size: 0.875rem;
-  color: #666;
+  color: var(--muted-foreground);
   margin-bottom: 0.5rem;
 }
 
 /* Audio Player */
 .audio-player {
-  background: #f3f4f6;
+  background: var(--muted);
   padding: 1rem;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -73,8 +91,8 @@ body {
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
-  background: #000;
+  background: var(--primary);
-  color: #fff;
+  color: var(--primary-foreground);
   border: none;
   display: flex;
   align-items: center;
@@ -85,19 +103,20 @@ body {
 
 .play-button:hover {
   background: #333;
+  /* Keep for now or add --primary-hover */
 }
 
 .progress-bar-container {
   flex: 1;
   height: 0.5rem;
-  background: #d1d5db;
+  background: var(--input);
   border-radius: 999px;
   overflow: hidden;
 }
 
 .progress-bar {
   height: 100%;
-  background: #22c55e;
+  background: var(--success);
   transition: width 0.1s linear;
 }
 
@@ -114,7 +133,7 @@ body {
   gap: 0.5rem;
   padding: 0.5rem;
   background: #f9fafb;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
   border-radius: 0.25rem;
   font-size: 0.875rem;
 }
@@ -125,7 +144,7 @@ body {
 }
 
 .guess-text {
-  color: #ef4444;
+  color: var(--danger);
   /* Red for wrong */
 }
 
@@ -135,7 +154,7 @@ body {
 }
 
 .guess-text.correct {
-  color: #22c55e;
+  color: var(--success);
 }
 
 /* Input */
@@ -148,14 +167,14 @@ body {
 .guess-input {
   width: 100%;
   padding: 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--input);
   border-radius: 0.25rem;
   font-size: 1rem;
   box-sizing: border-box;
 }
 
 .guess-input:focus {
-  outline: 2px solid #000;
+  outline: 2px solid var(--ring);
   border-color: transparent;
 }
 
@@ -163,7 +182,7 @@ body {
   position: absolute;
   width: 100%;
   background: #fff;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--input);
   border-radius: 0.25rem;
   margin-top: 0.25rem;
   max-height: 15rem;
@@ -177,11 +196,11 @@ body {
 .suggestion-item {
   padding: 0.75rem;
   cursor: pointer;
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--muted);
 }
 
 .suggestion-item:hover {
-  background: #f3f4f6;
+  background: var(--muted);
 }
 
 .suggestion-title {
@@ -190,14 +209,14 @@ body {
 
 .suggestion-artist {
   font-size: 0.875rem;
-  color: #666;
+  color: var(--muted-foreground);
 }
 
 .skip-button {
   width: 100%;
   padding: 1rem 1.5rem;
   margin-top: 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
   color: white;
   border: none;
   border-radius: 0.5rem;
@@ -246,7 +265,7 @@ body {
 }
 
 .admin-card {
-  background: #f3f4f6;
+  background: var(--muted);
   padding: 2rem;
   border-radius: 0.5rem;
 }
@@ -265,14 +284,14 @@ body {
 .form-input {
   width: 100%;
   padding: 0.5rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--input);
   border-radius: 0.25rem;
   box-sizing: border-box;
 }
 
 .btn-primary {
-  background: #000;
+  background: var(--primary);
-  color: #fff;
+  color: var(--primary-foreground);
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 0.25rem;
@@ -292,8 +311,8 @@ body {
 }
 
 .btn-secondary {
-  background: #4b5563;
+  background: var(--secondary);
-  color: #fff;
+  color: var(--secondary-foreground);
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 0.25rem;
@@ -312,8 +331,8 @@ body {
 }
 
 .btn-danger {
-  background: #ef4444;
+  background: var(--danger);
-  color: #fff;
+  color: var(--danger-foreground);
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 0.25rem;
@@ -337,8 +356,8 @@ body {
   padding: 2rem 1rem 1rem;
   text-align: center;
   font-size: 0.875rem;
-  color: #666;
+  color: var(--muted-foreground);
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--border);
   width: 100%;
 }
 
@@ -347,7 +366,7 @@ body {
 }
 
 .app-footer a {
-  color: #000;
+  color: var(--primary);
   text-decoration: none;
   font-weight: 500;
 }
@@ -375,7 +394,7 @@ body {
   font-size: 0.875rem;
   text-align: center;
   margin: 0 0 1rem 0;
-  color: #666;
+  color: var(--muted-foreground);
 }
 
 .statistics-grid {
@@ -391,7 +410,7 @@ body {
   padding: 0.75rem 0.5rem;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 0.375rem;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
 }
 
 .stat-badge {
@@ -401,7 +420,7 @@ body {
 
 .stat-label {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--muted-foreground);
   margin-bottom: 0.25rem;
   text-align: center;
 }
@@ -409,7 +428,7 @@ body {
 .stat-count {
   font-size: 1.25rem;
   font-weight: bold;
-  color: #000;
+  color: var(--primary);
 }
 
 /* Tooltip */

app/layout.tsx

@@ -1,7 +1,10 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";
 
+import { config } from "@/lib/config";
+
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -13,12 +16,12 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Hördle",
+  title: config.appName,
-  description: "Daily music guessing game - Guess the song from short audio clips",
+  description: config.appDescription,
 };
 
 export const viewport: Viewport = {
-  themeColor: "#000000",
+  themeColor: config.colors.themeColor,
   width: "device-width",
   initialScale: 1,
   maximumScale: 1,
@@ -34,6 +37,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <Script
+          defer
+          data-domain={config.plausibleDomain}
+          src={config.plausibleScriptSrc}
+          strategy="beforeInteractive"
+        />
+      </head>
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
         {children}
         <InstallPrompt />

app/manifest.ts

@@ -1,14 +1,15 @@
 import type { MetadataRoute } from 'next'
+import { config } from '@/lib/config'
 
 export default function manifest(): MetadataRoute.Manifest {
     return {
-        name: 'Hördle',
+        name: config.appName,
-        short_name: 'Hördle',
+        short_name: config.appName,
-        description: 'Daily music guessing game - Guess the song from short audio clips',
+        description: config.appDescription,
         start_url: '/',
         display: 'standalone',
-        background_color: '#ffffff',
+        background_color: config.colors.backgroundColor,
-        theme_color: '#000000',
+        theme_color: config.colors.themeColor,
         icons: [
             {
                 src: '/favicon.ico',

app/page.tsx

@@ -1,5 +1,6 @@
 import Game from '@/components/Game';
 import NewsSection from '@/components/NewsSection';
+import OnboardingTour from '@/components/OnboardingTour';
 import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
 import Link from 'next/link';
 import { PrismaClient } from '@prisma/client';
@@ -30,7 +31,7 @@ export default async function Home() {
 
   return (
     <>
-      <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
+      <div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
         <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
           <div className="tooltip">
             <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Global</Link>
@@ -95,9 +96,12 @@ export default async function Home() {
         )}
       </div>
 
+      <div id="tour-news">
         <NewsSection />
+      </div>
 
       <Game dailyPuzzle={dailyPuzzle} genre={null} />
+      <OnboardingTour />
     </>
   );
 }

app/special/[name]/page.tsx

@@ -1,4 +1,5 @@
 import Game from '@/components/Game';
+import NewsSection from '@/components/NewsSection';
 import { getOrCreateSpecialPuzzle } from '@/lib/dailyPuzzle';
 import Link from 'next/link';
 import { PrismaClient } from '@prisma/client';
@@ -44,7 +45,10 @@ export default async function SpecialPage({ params }: PageProps) {
     }
 
     const dailyPuzzle = await getOrCreateSpecialPuzzle(decodedName);
-    const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
+    const genres = await prisma.genre.findMany({
+        where: { active: true },
+        orderBy: { name: 'asc' }
+    });
     const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
 
     const activeSpecials = specials.filter(s => {
@@ -94,6 +98,7 @@ export default async function SpecialPage({ params }: PageProps) {
                     ))}
                 </div>
             </div>
+            <NewsSection />
             <Game
                 dailyPuzzle={dailyPuzzle}
                 genre={decodedName}

components/AppFooter.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { config } from '@/lib/config';
 import { useEffect, useState } from 'react';
 
 export default function AppFooter() {
@@ -12,14 +13,15 @@ export default function AppFooter() {
             .catch(() => setVersion(''));
     }, []);
 
+    if (!config.credits.enabled) return null;
+
     return (
         <footer className="app-footer">
             <p>
-                Vibe coded with ☕ and 🍺 by{' '}
+                {config.credits.text}{' '}
-                <a href="https://digitalcourage.social/@elpatron" target="_blank" rel="noopener noreferrer">
+                <a href={config.credits.linkUrl} target="_blank" rel="noopener noreferrer">
-                    @elpatron@digitalcourage.social
+                    {config.credits.linkText}
                 </a>
-                {' '}- for personal use among friends only!
                 {version && (
                     <>
                         {' '}·{' '}

components/AudioPlayer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 
 interface AudioPlayerProps {
     src: string;
@@ -9,39 +9,112 @@ interface AudioPlayerProps {
     onPlay?: () => void;
     onReplay?: () => void;
     autoPlay?: boolean;
+    onHasPlayedChange?: (hasPlayed: boolean) => void;
 }
 
-export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false }: AudioPlayerProps) {
+export interface AudioPlayerRef {
+    play: () => void;
+}
+
+const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }, ref) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const [progress, setProgress] = useState(0);
     const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
 
+    const [processedSrc, setProcessedSrc] = useState(src);
+    const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState(unlockedSeconds);
+
+    useEffect(() => {
+        console.log('[AudioPlayer] MOUNTED');
+        return () => console.log('[AudioPlayer] UNMOUNTED');
+    }, []);
+
     useEffect(() => {
         if (audioRef.current) {
+            // Check if props changed compared to what we last processed
+            const hasChanged = src !== processedSrc || unlockedSeconds !== processedUnlockedSeconds;
+
+            if (hasChanged) {
                 audioRef.current.pause();
-            audioRef.current.currentTime = startTime;
+
+                let startPos = startTime;
+
+                // If same song but more time unlocked, start from where previous segment ended
+                if (src === processedSrc && unlockedSeconds > processedUnlockedSeconds) {
+                    startPos = startTime + processedUnlockedSeconds;
+                }
+
+                const targetPos = startPos;
+                audioRef.current.currentTime = targetPos;
+
+                // Ensure position is set correctly even if browser resets it
+                setTimeout(() => {
+                    if (audioRef.current && Math.abs(audioRef.current.currentTime - targetPos) > 0.5) {
+                        audioRef.current.currentTime = targetPos;
+                    }
+                }, 50);
+
                 setIsPlaying(false);
-            setProgress(0);
+
+                // Calculate initial progress
+                const initialElapsed = startPos - startTime;
+                const initialPercent = unlockedSeconds > 0 ? (initialElapsed / unlockedSeconds) * 100 : 0;
+                setProgress(Math.min(initialPercent, 100));
+
                 setHasPlayedOnce(false); // Reset for new segment
+                onHasPlayedChange?.(false); // Notify parent
+
+                // Update processed state
+                setProcessedSrc(src);
+                setProcessedUnlockedSeconds(unlockedSeconds);
 
                 if (autoPlay) {
-                const playPromise = audioRef.current.play();
+                    // Delay play slightly to ensure currentTime sticks
+                    setTimeout(() => {
+                        const playPromise = audioRef.current?.play();
                         if (playPromise !== undefined) {
                             playPromise
                                 .then(() => {
                                     setIsPlaying(true);
                                     onPlay?.();
                                     setHasPlayedOnce(true);
+                                    onHasPlayedChange?.(true); // Notify parent
                                 })
                                 .catch(error => {
                                     console.log("Autoplay prevented:", error);
                                     setIsPlaying(false);
                                 });
                         }
+                    }, 150);
                 }
             }
-    }, [src, unlockedSeconds, startTime, autoPlay]);
+        }
+    }, [src, unlockedSeconds, startTime, autoPlay, processedSrc, processedUnlockedSeconds]);
+
+    // Expose play method to parent component
+    useImperativeHandle(ref, () => ({
+        play: () => {
+            if (!audioRef.current) return;
+
+            const playPromise = audioRef.current.play();
+            if (playPromise !== undefined) {
+                playPromise
+                    .then(() => {
+                        setIsPlaying(true);
+                        onPlay?.();
+                        if (!hasPlayedOnce) {
+                            setHasPlayedOnce(true);
+                            onHasPlayedChange?.(true);
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Play failed:", error);
+                        setIsPlaying(false);
+                    });
+            }
+        }
+    }));
 
     const togglePlay = () => {
         if (!audioRef.current) return;
@@ -56,6 +129,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
                 onReplay?.();
             } else {
                 setHasPlayedOnce(true);
+                onHasPlayedChange?.(true); // Notify parent
             }
         }
         setIsPlaying(!isPlaying);
@@ -112,4 +186,10 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
             </div>
         </div>
     );
-}
+});
+
+AudioPlayer.displayName = 'AudioPlayer';
+
+
+
+export default AudioPlayer;

components/Game.tsx

@@ -1,12 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { config } from '@/lib/config';
-import AudioPlayer from './AudioPlayer';
+import { useEffect, useState, useRef } from 'react';
+import AudioPlayer, { AudioPlayerRef } from './AudioPlayer';
 import GuessInput from './GuessInput';
 import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
 import { sendGotifyNotification, submitRating } from '../app/actions';
 
+// Plausible Analytics
+declare global {
+    interface Window {
+        plausible?: (eventName: string, options?: { props?: Record<string, string | number> }) => void;
+    }
+}
+
 interface GameProps {
     dailyPuzzle: {
         id: number;
@@ -37,6 +45,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     const [timeUntilNext, setTimeUntilNext] = useState('');
     const [hasRated, setHasRated] = useState(false);
     const [showYearModal, setShowYearModal] = useState(false);
+    const [hasPlayedAudio, setHasPlayedAudio] = useState(false);
+    const audioPlayerRef = useRef<AudioPlayerRef>(null);
 
     useEffect(() => {
         const updateCountdown = () => {
@@ -74,7 +84,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
     useEffect(() => {
         if (dailyPuzzle) {
-            const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
+            const ratedPuzzles = JSON.parse(localStorage.getItem(`${config.appName.toLowerCase()}_rated_puzzles`) || '[]');
             if (ratedPuzzles.includes(dailyPuzzle.id)) {
                 setHasRated(true);
             } else {
@@ -101,6 +111,17 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         if (song.id === dailyPuzzle.songId) {
             addGuess(song.title, true);
             setHasWon(true);
+            // Track puzzle solved event
+            if (typeof window !== 'undefined' && window.plausible) {
+                window.plausible('puzzle_solved', {
+                    props: {
+                        genre: genre || 'Global',
+                        attempts: gameState.guesses.length + 1,
+                        score: gameState.score + 20, // Include the win bonus
+                        outcome: 'won'
+                    }
+                });
+            }
             // Notification sent after year guess or skip
             if (!dailyPuzzle.releaseYear) {
                 sendGotifyNotification(gameState.guesses.length + 1, 'won', dailyPuzzle.id, genre, gameState.score);
@@ -110,19 +131,54 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
             if (gameState.guesses.length + 1 >= maxAttempts) {
                 setHasLost(true);
                 setHasWon(false);
+                // Track puzzle lost event
+                if (typeof window !== 'undefined' && window.plausible) {
+                    window.plausible('puzzle_solved', {
+                        props: {
+                            genre: genre || 'Global',
+                            attempts: maxAttempts,
+                            score: 0,
+                            outcome: 'lost'
+                        }
+                    });
+                }
                 sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0); // Score is 0 on failure
             }
         }
         setTimeout(() => setIsProcessingGuess(false), 500);
     };
 
+    const handleStartAudio = () => {
+        // This will be called when user clicks "Start" button on first attempt
+        // Trigger the audio player to start playing
+        audioPlayerRef.current?.play();
+        setHasPlayedAudio(true);
+    };
+
     const handleSkip = () => {
+        // If user hasn't played audio yet on first attempt, start it instead of skipping
+        if (gameState.guesses.length === 0 && !hasPlayedAudio) {
+            handleStartAudio();
+            return;
+        }
+
         setLastAction('SKIP');
         addGuess("SKIPPED", false);
 
         if (gameState.guesses.length + 1 >= maxAttempts) {
             setHasLost(true);
             setHasWon(false);
+            // Track puzzle lost event
+            if (typeof window !== 'undefined' && window.plausible) {
+                window.plausible('puzzle_solved', {
+                    props: {
+                        genre: genre || 'Global',
+                        attempts: maxAttempts,
+                        score: 0,
+                        outcome: 'lost'
+                    }
+                });
+            }
             sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0); // Score is 0 on failure
         }
     };
@@ -133,6 +189,17 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         giveUp(); // Ensure game is marked as failed and score reset to 0
         setHasLost(true);
         setHasWon(false);
+        // Track puzzle lost event
+        if (typeof window !== 'undefined' && window.plausible) {
+            window.plausible('puzzle_solved', {
+                props: {
+                    genre: genre || 'Global',
+                    attempts: gameState.guesses.length + 1,
+                    score: 0,
+                    outcome: 'lost'
+                }
+            });
+        }
         sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0);
     };
 
@@ -141,6 +208,19 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         addYearBonus(correct);
         setShowYearModal(false);
 
+        // Update the puzzle_solved event with year bonus result
+        if (typeof window !== 'undefined' && window.plausible) {
+            window.plausible('puzzle_solved', {
+                props: {
+                    genre: genre || 'Global',
+                    attempts: gameState.guesses.length,
+                    score: gameState.score + (correct ? 10 : 0), // Include year bonus if correct
+                    outcome: 'won',
+                    year_bonus: correct ? 'correct' : 'incorrect'
+                }
+            });
+        }
+
         // Send notification now that game is fully complete
         sendGotifyNotification(gameState.guesses.length, 'won', dailyPuzzle.id, genre, gameState.score + (correct ? 10 : 0));
     };
@@ -148,6 +228,20 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     const handleYearSkip = () => {
         skipYearBonus();
         setShowYearModal(false);
+
+        // Update the puzzle_solved event with year bonus result
+        if (typeof window !== 'undefined' && window.plausible) {
+            window.plausible('puzzle_solved', {
+                props: {
+                    genre: genre || 'Global',
+                    attempts: gameState.guesses.length,
+                    score: gameState.score, // Score already includes win bonus
+                    outcome: 'won',
+                    year_bonus: 'skipped'
+                }
+            });
+        }
+
         // Send notification now that game is fully complete
         sendGotifyNotification(gameState.guesses.length, 'won', dailyPuzzle.id, genre, gameState.score);
     };
@@ -176,7 +270,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         const bonusStar = (hasWon && gameState.yearGuessed && dailyPuzzle.releaseYear && gameState.scoreBreakdown.some(item => item.reason === 'Bonus: Correct Year')) ? '⭐' : '';
         const genreText = genre ? `${isSpecial ? 'Special' : 'Genre'}: ${genre}\n` : '';
 
-        let shareUrl = 'https://hoerdle.elpatron.me';
+        let shareUrl = `https://${config.domain}`;
         if (genre) {
             if (isSpecial) {
                 shareUrl += `/special/${encodeURIComponent(genre)}`;
@@ -185,7 +279,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
             }
         }
 
-        const text = `Hördle #${dailyPuzzle.puzzleNumber}\n${genreText}\n${speaker}${emojiGrid}${bonusStar}\nScore: ${gameState.score}\n\n#Hördle #Music\n\n${shareUrl}`;
+        const text = `${config.appName} #${dailyPuzzle.puzzleNumber}\n${genreText}\n${speaker}${emojiGrid}${bonusStar}\nScore: ${gameState.score}\n\n#${config.appName} #Music\n\n${shareUrl}`;
 
         const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 
@@ -223,10 +317,10 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
             await submitRating(dailyPuzzle.songId, rating, genre, isSpecial, dailyPuzzle.puzzleNumber);
             setHasRated(true);
 
-            const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
+            const ratedPuzzles = JSON.parse(localStorage.getItem(`${config.appName.toLowerCase()}_rated_puzzles`) || '[]');
             if (!ratedPuzzles.includes(dailyPuzzle.id)) {
                 ratedPuzzles.push(dailyPuzzle.id);
-                localStorage.setItem('hoerdle_rated_puzzles', JSON.stringify(ratedPuzzles));
+                localStorage.setItem(`${config.appName.toLowerCase()}_rated_puzzles`, JSON.stringify(ratedPuzzles));
             }
         } catch (error) {
             console.error('Failed to submit rating', error);
@@ -236,29 +330,35 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     return (
         <div className="container">
             <header className="header">
-                <h1 className="title">Hördle #{dailyPuzzle.puzzleNumber}{genre ? ` / ${genre}` : ''}</h1>
+                <h1 id="tour-title" className="title">{config.appName} #{dailyPuzzle.puzzleNumber}{genre ? ` / ${genre}` : ''}</h1>
-                <div style={{ fontSize: '0.9rem', color: '#666', marginTop: '-0.5rem', marginBottom: '1rem' }}>
+                <div style={{ fontSize: '0.9rem', color: 'var(--muted-foreground)', marginTop: '0.5rem', marginBottom: '1rem' }}>
                     Next puzzle in: {timeUntilNext}
                 </div>
             </header>
 
             <main className="game-board">
                 <div style={{ borderBottom: '1px solid #e5e7eb', paddingBottom: '1rem' }}>
-                    <div className="status-bar">
+                    <div id="tour-status" className="status-bar">
                         <span>Attempt {gameState.guesses.length + 1} / {maxAttempts}</span>
                         <span>{unlockedSeconds}s unlocked</span>
                     </div>
 
+                    <div id="tour-score">
                         <ScoreDisplay score={gameState.score} breakdown={gameState.scoreBreakdown} />
+                    </div>
 
+                    <div id="tour-player">
                         <AudioPlayer
+                            ref={audioPlayerRef}
                             src={dailyPuzzle.audioUrl}
                             unlockedSeconds={unlockedSeconds}
                             startTime={dailyPuzzle.startTime}
                             autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
                             onReplay={addReplay}
+                            onHasPlayedChange={setHasPlayedAudio}
                         />
                     </div>
+                </div>
 
                 <div className="guess-list">
                     {gameState.guesses.map((guess, i) => {
@@ -276,13 +376,19 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
                 {!hasWon && !hasLost && (
                     <>
+                        <div id="tour-input">
                             <GuessInput onGuess={handleGuess} disabled={isProcessingGuess} />
+                        </div>
                         {gameState.guesses.length < maxAttempts - 1 ? (
                             <button
+                                id="tour-controls"
                                 onClick={handleSkip}
                                 className="skip-button"
                             >
-                                Skip (+{unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)
+                                {gameState.guesses.length === 0 && !hasPlayedAudio
+                                    ? 'Start'
+                                    : `Skip (+${unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)`
+                                }
                             </button>
                         ) : (
                             <button
@@ -305,11 +411,11 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                             {hasWon ? 'You won!' : 'Game Over'}
                         </h2>
 
-                        <div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: hasWon ? '#059669' : '#dc2626' }}>
+                        <div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: hasWon ? 'var(--success)' : 'var(--danger)' }}>
                             Score: {gameState.score}
                         </div>
 
-                        <details style={{ marginBottom: '1rem', cursor: 'pointer', fontSize: '0.9rem', color: '#666' }}>
+                        <details style={{ marginBottom: '1rem', cursor: 'pointer', fontSize: '0.9rem', color: 'var(--muted-foreground)' }}>
                             <summary>Score Breakdown</summary>
                             <ul style={{ listStyle: 'none', padding: '0.5rem', textAlign: 'left', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', marginTop: '0.5rem' }}>
                                 {gameState.scoreBreakdown.map((item, i) => (
@@ -332,9 +438,9 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                                 style={{ width: '150px', height: '150px', objectFit: 'cover', borderRadius: '0.5rem', marginBottom: '1rem', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}
                             />
                             <h3 style={{ fontSize: '1.125rem', fontWeight: 'bold', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.title}</h3>
-                            <p style={{ fontSize: '0.875rem', color: '#666', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.artist}</p>
+                            <p style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.artist}</p>
                             {dailyPuzzle.releaseYear && gameState.yearGuessed && (
-                                <p style={{ fontSize: '0.875rem', color: '#666', margin: '0 0 1rem 0' }}>Released: {dailyPuzzle.releaseYear}</p>
+                                <p style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', margin: '0 0 1rem 0' }}>Released: {dailyPuzzle.releaseYear}</p>
                             )}
                             <audio controls style={{ width: '100%' }}>
                                 <source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
@@ -385,13 +491,13 @@ function ScoreDisplay({ score, breakdown }: { score: number, breakdown: Array<{
             textAlign: 'center',
             margin: '0.5rem 0',
             padding: '0.5rem',
-            background: '#f3f4f6',
+            background: 'var(--muted)',
             borderRadius: '0.5rem',
             fontSize: '0.9rem',
             fontFamily: 'monospace',
             cursor: 'help'
         }}>
-            <span style={{ color: '#666' }}>{expression} = </span>
+            <span style={{ color: 'var(--muted-foreground)' }}>{expression} = </span>
             <span style={{ fontWeight: 'bold', color: 'var(--primary)', fontSize: '1.1rem' }}>{score}</span>
         </div>
     );
@@ -399,6 +505,7 @@ function ScoreDisplay({ score, breakdown }: { score: number, breakdown: Array<{
 
 function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number, onGuess: (year: number) => void, onSkip: () => void }) {
     const [options, setOptions] = useState<number[]>([]);
+    const [feedback, setFeedback] = useState<{ show: boolean, correct: boolean, guessedYear?: number }>({ show: false, correct: false });
 
     useEffect(() => {
         const currentYear = new Date().getFullYear();
@@ -427,6 +534,24 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
         setOptions(Array.from(allOptions).sort((a, b) => a - b));
     }, [correctYear]);
 
+    const handleGuess = (year: number) => {
+        const correct = year === correctYear;
+        setFeedback({ show: true, correct, guessedYear: year });
+
+        // Close modal after showing feedback
+        setTimeout(() => {
+            onGuess(year);
+        }, 2500);
+    };
+
+    const handleSkip = () => {
+        setFeedback({ show: true, correct: false });
+
+        setTimeout(() => {
+            onSkip();
+        }, 2000);
+    };
+
     return (
         <div style={{
             position: 'fixed',
@@ -450,8 +575,10 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                 textAlign: 'center',
                 boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)'
             }}>
-                <h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem', color: '#1f2937' }}>Bonus Round!</h3>
+                {!feedback.show ? (
-                <p style={{ marginBottom: '1.5rem', color: '#4b5563' }}>Guess the release year for <strong style={{ color: '#10b981' }}>+10 points</strong>!</p>
+                    <>
+                        <h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem', color: 'var(--primary)' }}>Bonus Round!</h3>
+                        <p style={{ marginBottom: '1.5rem', color: 'var(--secondary)' }}>Guess the release year for <strong style={{ color: 'var(--success)' }}>+10 points</strong>!</p>
 
                         <div style={{
                             display: 'grid',
@@ -462,20 +589,20 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                             {options.map(year => (
                                 <button
                                     key={year}
-                            onClick={() => onGuess(year)}
+                                    onClick={() => handleGuess(year)}
                                     style={{
                                         padding: '0.75rem',
-                                background: '#f3f4f6',
+                                        background: 'var(--muted)',
-                                border: '2px solid #e5e7eb',
+                                        border: '2px solid var(--border)',
                                         borderRadius: '0.5rem',
                                         fontSize: '1.1rem',
                                         fontWeight: 'bold',
-                                color: '#374151',
+                                        color: 'var(--secondary)',
                                         cursor: 'pointer',
                                         transition: 'all 0.2s'
                                     }}
-                            onMouseOver={e => e.currentTarget.style.borderColor = '#10b981'}
+                                    onMouseOver={e => e.currentTarget.style.borderColor = 'var(--success)'}
-                            onMouseOut={e => e.currentTarget.style.borderColor = '#e5e7eb'}
+                                    onMouseOut={e => e.currentTarget.style.borderColor = 'var(--border)'}
                                 >
                                     {year}
                                 </button>
@@ -483,11 +610,11 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                         </div>
 
                         <button
-                    onClick={onSkip}
+                            onClick={handleSkip}
                             style={{
                                 background: 'none',
                                 border: 'none',
-                        color: '#6b7280',
+                                color: 'var(--muted-foreground)',
                                 textDecoration: 'underline',
                                 cursor: 'pointer',
                                 fontSize: '0.9rem'
@@ -495,6 +622,34 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                         >
                             Skip Bonus
                         </button>
+                    </>
+                ) : (
+                    <div style={{ padding: '2rem 0' }}>
+                        {feedback.guessedYear ? (
+                            feedback.correct ? (
+                                <>
+                                    <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>🎉</div>
+                                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--success)', marginBottom: '0.5rem' }}>Correct!</h3>
+                                    <p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>Released in {correctYear}</p>
+                                    <p style={{ fontSize: '1.5rem', fontWeight: 'bold', color: 'var(--success)', marginTop: '1rem' }}>+10 Points!</p>
+                                </>
+                            ) : (
+                                <>
+                                    <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>😕</div>
+                                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--danger)', marginBottom: '0.5rem' }}>Not quite!</h3>
+                                    <p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>You guessed {feedback.guessedYear}</p>
+                                    <p style={{ fontSize: '1.2rem', color: 'var(--secondary)', marginTop: '0.5rem' }}>Actually released in <strong>{correctYear}</strong></p>
+                                </>
+                            )
+                        ) : (
+                            <>
+                                <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>⏭️</div>
+                                <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--muted-foreground)', marginBottom: '0.5rem' }}>Skipped</h3>
+                                <p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>Released in {correctYear}</p>
+                            </>
+                        )}
+                    </div>
+                )}
             </div>
         </div>
     );
@@ -505,12 +660,12 @@ function StarRating({ onRate, hasRated }: { onRate: (rating: number) => void, ha
     const [rating, setRating] = useState(0);
 
     if (hasRated) {
-        return <div style={{ color: '#666', fontStyle: 'italic' }}>Thanks for rating!</div>;
+        return <div style={{ color: 'var(--muted-foreground)', fontStyle: 'italic' }}>Thanks for rating!</div>;
     }
 
     return (
         <div className="star-rating" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
-            <span style={{ fontSize: '0.875rem', color: '#666', fontWeight: '500' }}>Rate this puzzle:</span>
+            <span style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', fontWeight: '500' }}>Rate this puzzle:</span>
             <div style={{ display: 'flex', gap: '0.25rem', justifyContent: 'center' }}>
                 {[...Array(5)].map((_, index) => {
                     const ratingValue = index + 1;
@@ -523,7 +678,7 @@ function StarRating({ onRate, hasRated }: { onRate: (rating: number) => void, ha
                                 border: 'none',
                                 cursor: 'pointer',
                                 fontSize: '2rem',
-                                color: ratingValue <= (hover || rating) ? '#ffc107' : '#9ca3af',
+                                color: ratingValue <= (hover || rating) ? 'var(--warning)' : 'var(--muted-foreground)',
                                 transition: 'color 0.2s',
                                 padding: '0 0.25rem'
                             }}

components/NewsSection.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
+import Link from 'next/link';
 
 interface NewsItem {
     id: number;
@@ -143,9 +144,16 @@ export default function NewsSection() {
                                 {item.special && (
                                     <>
                                         <span>•</span>
-                                        <span style={{ color: '#be185d' }}>
+                                        <Link
+                                            href={`/special/${item.special.name}`}
+                                            style={{
+                                                color: '#be185d',
+                                                textDecoration: 'none',
+                                                fontWeight: '500'
+                                            }}
+                                        >
                                             ★ {item.special.name}
-                                        </span>
+                                        </Link>
                                     </>
                                 )}
                             </div>

components/OnboardingTour.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useEffect } from 'react';
+import { driver } from 'driver.js';
+import 'driver.js/dist/driver.css';
+
+export default function OnboardingTour() {
+    useEffect(() => {
+        const hasCompletedOnboarding = localStorage.getItem('hoerdle_onboarding_completed');
+
+        if (hasCompletedOnboarding) {
+            return;
+        }
+
+        const driverObj = driver({
+            showProgress: true,
+            animate: true,
+            allowClose: true,
+            doneBtnText: 'Done',
+            nextBtnText: 'Next',
+            prevBtnText: 'Previous',
+            onDestroyed: () => {
+                localStorage.setItem('hoerdle_onboarding_completed', 'true');
+            },
+            steps: [
+                {
+                    element: '#tour-genres',
+                    popover: {
+                        title: 'Genres & Specials',
+                        description: 'Choose a specific genre or a curated special event here.',
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-news',
+                    popover: {
+                        title: 'News',
+                        description: 'Stay updated with the latest news and announcements.',
+                        side: 'top',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-title',
+                    popover: {
+                        title: 'Hördle',
+                        description: 'This is the daily puzzle. One new song every day per genre.',
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-status',
+                    popover: {
+                        title: 'Attempts',
+                        description: 'You have a limited number of attempts to guess the song.',
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-score',
+                    popover: {
+                        title: 'Score',
+                        description: 'Your current score. Try to keep it high!',
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-player',
+                    popover: {
+                        title: 'Player',
+                        description: 'Listen to the snippet. Each additional play reduces your potential score.',
+                        side: 'top',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-input',
+                    popover: {
+                        title: 'Input',
+                        description: 'Type your guess here. Search for artist or title.',
+                        side: 'top',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-controls',
+                    popover: {
+                        title: 'Controls',
+                        description: 'Start the music or skip to the next snippet if you\'re stuck.',
+                        side: 'top',
+                        align: 'start'
+                    }
+                }
+            ]
+        });
+
+        // Small delay to ensure DOM is ready
+        setTimeout(() => {
+            driverObj.drive();
+        }, 1000);
+
+    }, []);
+
+    return null;
+}

lib/config.ts

@@ -0,0 +1,18 @@
+export const config = {
+    appName: process.env.NEXT_PUBLIC_APP_NAME || 'Hördle',
+    appDescription: process.env.NEXT_PUBLIC_APP_DESCRIPTION || 'Daily music guessing game - Guess the song from short audio clips',
+    domain: process.env.NEXT_PUBLIC_DOMAIN || 'hoerdle.elpatron.me',
+    twitterHandle: process.env.NEXT_PUBLIC_TWITTER_HANDLE || '@elpatron',
+    plausibleDomain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN || 'hoerdle.elpatron.me',
+    plausibleScriptSrc: process.env.NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC || 'https://plausible.elpatron.me/js/script.js',
+    colors: {
+        themeColor: process.env.NEXT_PUBLIC_THEME_COLOR || '#000000',
+        backgroundColor: process.env.NEXT_PUBLIC_BACKGROUND_COLOR || '#ffffff',
+    },
+    credits: {
+        enabled: process.env.NEXT_PUBLIC_CREDITS_ENABLED !== 'false',
+        text: process.env.NEXT_PUBLIC_CREDITS_TEXT || 'Vibe coded with ☕ and 🍺 by',
+        linkText: process.env.NEXT_PUBLIC_CREDITS_LINK_TEXT || '@elpatron@digitalcourage.social',
+        linkUrl: process.env.NEXT_PUBLIC_CREDITS_LINK_URL || 'https://digitalcourage.social/@elpatron',
+    }
+};

middleware.ts

@@ -25,11 +25,11 @@ export function middleware(request: NextRequest) {
     // Content Security Policy
     const csp = [
         "default-src 'self'",
-        "script-src 'self' 'unsafe-inline' 'unsafe-eval'", // Next.js requires unsafe-inline/eval
+        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://plausible.elpatron.me", // Next.js requires unsafe-inline/eval
         "style-src 'self' 'unsafe-inline'", // Allow inline styles
         "img-src 'self' data: blob:",
         "font-src 'self' data:",
-        "connect-src 'self' https://openrouter.ai https://gotify.example.com",
+        "connect-src 'self' https://openrouter.ai https://gotify.example.com https://plausible.elpatron.me",
         "media-src 'self' blob:",
         "frame-ancestors 'self'",
     ].join('; ');

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@prisma/client": "^6.19.0",
         "bcryptjs": "^3.0.3",
+        "driver.js": "^1.4.0",
         "music-metadata": "^11.10.2",
         "next": "16.0.3",
         "prisma": "^6.19.0",
@@ -2939,6 +2940,12 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/driver.js": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.4.0.tgz",
+      "integrity": "sha512-Gm64jm6PmcU+si21sQhBrTAM1JvUrR0QhNmjkprNLxohOBzul9+pNHXgQaT9lW84gwg9GMLB3NZGuGolsz5uew==",
+      "license": "MIT"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoerdle",
-  "version": "0.1.0",
+  "version": "0.1.0.13",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,6 +11,7 @@
   "dependencies": {
     "@prisma/client": "^6.19.0",
     "bcryptjs": "^3.0.3",
+    "driver.js": "^1.4.0",
     "music-metadata": "^11.10.2",
     "next": "16.0.3",
     "prisma": "^6.19.0",