feat: white label transformation and bugfix for audio stream

components/Game.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { config } from '@/lib/config';
 import { useEffect, useState, useRef } from 'react';
 import AudioPlayer, { AudioPlayerRef } from './AudioPlayer';
 import GuessInput from './GuessInput';
@@ -83,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 {
@@ -269,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)}`;
@@ -278,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);
 
@@ -316,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);
@@ -329,8 +330,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     return (
         <div className="container">
             <header className="header">
-                <h1 id="tour-title" className="title">Hördle #{dailyPuzzle.puzzleNumber}{genre ? ` / ${genre}` : ''}</h1>
-                <div style={{ fontSize: '0.9rem', color: '#666', marginTop: '0.5rem', marginBottom: '1rem' }}>
+                <h1 id="tour-title" className="title">{config.appName} #{dailyPuzzle.puzzleNumber}{genre ? ` / ${genre}` : ''}</h1>
+                <div style={{ fontSize: '0.9rem', color: 'var(--muted-foreground)', marginTop: '0.5rem', marginBottom: '1rem' }}>
                     Next puzzle in: {timeUntilNext}
                 </div>
             </header>
@@ -410,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) => (
@@ -437,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" />
@@ -490,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>
     );
@@ -576,8 +577,8 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
             }}>
                 {!feedback.show ? (
                     <>
-                        <h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem', color: '#1f2937' }}>Bonus Round!</h3>
-                        <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',
@@ -591,17 +592,17 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                                     onClick={() => handleGuess(year)}
                                     style={{
                                         padding: '0.75rem',
-                                        background: '#f3f4f6',
-                                        border: '2px solid #e5e7eb',
+                                        background: 'var(--muted)',
+                                        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'}
-                                    onMouseOut={e => e.currentTarget.style.borderColor = '#e5e7eb'}
+                                    onMouseOver={e => e.currentTarget.style.borderColor = 'var(--success)'}
+                                    onMouseOut={e => e.currentTarget.style.borderColor = 'var(--border)'}
                                 >
                                     {year}
                                 </button>
@@ -613,7 +614,7 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                             style={{
                                 background: 'none',
                                 border: 'none',
-                                color: '#6b7280',
+                                color: 'var(--muted-foreground)',
                                 textDecoration: 'underline',
                                 cursor: 'pointer',
                                 fontSize: '0.9rem'
@@ -628,23 +629,23 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                             feedback.correct ? (
                                 <>
                                     <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>🎉</div>
-                                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: '#10b981', marginBottom: '0.5rem' }}>Correct!</h3>
-                                    <p style={{ fontSize: '1.2rem', color: '#4b5563' }}>Released in {correctYear}</p>
-                                    <p style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#10b981', marginTop: '1rem' }}>+10 Points!</p>
+                                    <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: '#ef4444', marginBottom: '0.5rem' }}>Not quite!</h3>
-                                    <p style={{ fontSize: '1.2rem', color: '#4b5563' }}>You guessed {feedback.guessedYear}</p>
-                                    <p style={{ fontSize: '1.2rem', color: '#4b5563', marginTop: '0.5rem' }}>Actually released in <strong>{correctYear}</strong></p>
+                                    <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: '#6b7280', marginBottom: '0.5rem' }}>Skipped</h3>
-                                <p style={{ fontSize: '1.2rem', color: '#4b5563' }}>Released in {correctYear}</p>
+                                <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>
@@ -659,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;
@@ -677,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'
                             }}