699 lines
30 KiB
TypeScript
699 lines
30 KiB
TypeScript
'use client';
|
||
|
||
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;
|
||
puzzleNumber: number;
|
||
audioUrl: string;
|
||
songId: number;
|
||
title: string;
|
||
artist: string;
|
||
coverImage: string | null;
|
||
releaseYear?: number | null;
|
||
startTime?: number;
|
||
} | null;
|
||
genre?: string | null;
|
||
isSpecial?: boolean;
|
||
maxAttempts?: number;
|
||
unlockSteps?: number[];
|
||
}
|
||
|
||
const DEFAULT_UNLOCK_STEPS = [2, 4, 7, 11, 16, 30, 60];
|
||
|
||
export default function Game({ dailyPuzzle, genre = null, isSpecial = false, maxAttempts = 7, unlockSteps = DEFAULT_UNLOCK_STEPS }: GameProps) {
|
||
const { gameState, statistics, addGuess, giveUp, addReplay, addYearBonus, skipYearBonus } = useGameState(genre, maxAttempts);
|
||
const [hasWon, setHasWon] = useState(false);
|
||
const [hasLost, setHasLost] = useState(false);
|
||
const [shareText, setShareText] = useState('🔗 Share');
|
||
const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
|
||
const [isProcessingGuess, setIsProcessingGuess] = useState(false);
|
||
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 = () => {
|
||
const now = new Date();
|
||
const tomorrow = new Date(now);
|
||
tomorrow.setHours(24, 0, 0, 0);
|
||
const diff = tomorrow.getTime() - now.getTime();
|
||
|
||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||
|
||
setTimeUntilNext(`${hours}h ${minutes}m`);
|
||
};
|
||
|
||
updateCountdown();
|
||
const interval = setInterval(updateCountdown, 1000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (gameState && dailyPuzzle) {
|
||
setHasWon(gameState.isSolved);
|
||
setHasLost(gameState.isFailed);
|
||
|
||
// Show year modal if won but year not guessed yet and release year is available
|
||
if (gameState.isSolved && !gameState.yearGuessed && dailyPuzzle.releaseYear) {
|
||
setShowYearModal(true);
|
||
}
|
||
}
|
||
}, [gameState, dailyPuzzle]);
|
||
|
||
useEffect(() => {
|
||
setLastAction(null);
|
||
}, [dailyPuzzle?.id]);
|
||
|
||
useEffect(() => {
|
||
if (dailyPuzzle) {
|
||
const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
|
||
if (ratedPuzzles.includes(dailyPuzzle.id)) {
|
||
setHasRated(true);
|
||
} else {
|
||
setHasRated(false);
|
||
}
|
||
}
|
||
}, [dailyPuzzle]);
|
||
|
||
if (!dailyPuzzle) return (
|
||
<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{genre ? ` for genre "${genre}"` : ''}.</p>
|
||
<a href="/admin" style={{ color: 'var(--primary)', textDecoration: 'underline' }}>Go to Admin Dashboard</a>
|
||
</div>
|
||
);
|
||
if (!gameState) return <div>Loading state...</div>;
|
||
|
||
const handleGuess = (song: any) => {
|
||
if (isProcessingGuess) return;
|
||
|
||
setIsProcessingGuess(true);
|
||
setLastAction('GUESS');
|
||
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);
|
||
}
|
||
} else {
|
||
addGuess(song.title, 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
|
||
}
|
||
}
|
||
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
|
||
}
|
||
};
|
||
|
||
const handleGiveUp = () => {
|
||
setLastAction('SKIP');
|
||
addGuess("SKIPPED", false);
|
||
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);
|
||
};
|
||
|
||
const handleYearGuess = (year: number) => {
|
||
const correct = year === dailyPuzzle.releaseYear;
|
||
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 ? 30 : 20), // Include win + year bonus
|
||
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));
|
||
};
|
||
|
||
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 + 20, // Include win bonus only
|
||
outcome: 'won',
|
||
year_bonus: 'skipped'
|
||
}
|
||
});
|
||
}
|
||
|
||
// Send notification now that game is fully complete
|
||
sendGotifyNotification(gameState.guesses.length, 'won', dailyPuzzle.id, genre, gameState.score);
|
||
};
|
||
|
||
const unlockedSeconds = unlockSteps[Math.min(gameState.guesses.length, unlockSteps.length - 1)];
|
||
|
||
const handleShare = async () => {
|
||
let emojiGrid = '';
|
||
const totalGuesses = maxAttempts;
|
||
|
||
for (let i = 0; i < totalGuesses; i++) {
|
||
if (i < gameState.guesses.length) {
|
||
if (hasWon && i === gameState.guesses.length - 1) {
|
||
emojiGrid += '🟩';
|
||
} else if (gameState.guesses[i] === 'SKIPPED') {
|
||
emojiGrid += '⬛';
|
||
} else {
|
||
emojiGrid += '🟥';
|
||
}
|
||
} else {
|
||
emojiGrid += '⬜';
|
||
}
|
||
}
|
||
|
||
const speaker = hasWon ? '🔉' : '🔇';
|
||
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';
|
||
if (genre) {
|
||
if (isSpecial) {
|
||
shareUrl += `/special/${encodeURIComponent(genre)}`;
|
||
} else {
|
||
shareUrl += `/${encodeURIComponent(genre)}`;
|
||
}
|
||
}
|
||
|
||
const text = `Hördle #${dailyPuzzle.puzzleNumber}\n${genreText}\n${speaker}${emojiGrid}${bonusStar}\nScore: ${gameState.score}\n\n#Hördle #Music\n\n${shareUrl}`;
|
||
|
||
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
||
|
||
if (isMobile && navigator.share) {
|
||
try {
|
||
await navigator.share({
|
||
title: `Hördle #${dailyPuzzle.puzzleNumber}`,
|
||
text: text,
|
||
});
|
||
setShareText('✓ Shared!');
|
||
setTimeout(() => setShareText('🔗 Share'), 2000);
|
||
return;
|
||
} catch (err) {
|
||
if ((err as Error).name !== 'AbortError') {
|
||
console.error('Share failed:', err);
|
||
}
|
||
}
|
||
}
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
setShareText('✓ Copied!');
|
||
setTimeout(() => setShareText('🔗 Share'), 2000);
|
||
} catch (err) {
|
||
console.error('Clipboard failed:', err);
|
||
setShareText('✗ Failed');
|
||
setTimeout(() => setShareText('🔗 Share'), 2000);
|
||
}
|
||
};
|
||
|
||
const handleRatingSubmit = async (rating: number) => {
|
||
if (!dailyPuzzle) return;
|
||
|
||
try {
|
||
await submitRating(dailyPuzzle.songId, rating, genre, isSpecial, dailyPuzzle.puzzleNumber);
|
||
setHasRated(true);
|
||
|
||
const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
|
||
if (!ratedPuzzles.includes(dailyPuzzle.id)) {
|
||
ratedPuzzles.push(dailyPuzzle.id);
|
||
localStorage.setItem('hoerdle_rated_puzzles', JSON.stringify(ratedPuzzles));
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to submit rating', error);
|
||
}
|
||
};
|
||
|
||
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' }}>
|
||
Next puzzle in: {timeUntilNext}
|
||
</div>
|
||
</header>
|
||
|
||
<main className="game-board">
|
||
<div style={{ borderBottom: '1px solid #e5e7eb', paddingBottom: '1rem' }}>
|
||
<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) => {
|
||
const isCorrect = hasWon && i === gameState.guesses.length - 1;
|
||
return (
|
||
<div key={i} className="guess-item">
|
||
<span className="guess-number">#{i + 1}</span>
|
||
<span className={`guess-text ${guess === 'SKIPPED' ? 'skipped' : ''} ${isCorrect ? 'correct' : ''}`}>
|
||
{isCorrect ? 'Correct!' : guess}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{!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"
|
||
>
|
||
{gameState.guesses.length === 0 && !hasPlayedAudio
|
||
? 'Start'
|
||
: `Skip (+${unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)`
|
||
}
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={handleGiveUp}
|
||
className="skip-button"
|
||
style={{
|
||
background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||
boxShadow: '0 4px 15px rgba(245, 87, 108, 0.4)'
|
||
}}
|
||
>
|
||
Solve (Give Up)
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{(hasWon || hasLost) && (
|
||
<div className={`message-box ${hasWon ? 'success' : 'failure'}`}>
|
||
<h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
|
||
{hasWon ? 'You won!' : 'Game Over'}
|
||
</h2>
|
||
|
||
<div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: hasWon ? '#059669' : '#dc2626' }}>
|
||
Score: {gameState.score}
|
||
</div>
|
||
|
||
<details style={{ marginBottom: '1rem', cursor: 'pointer', fontSize: '0.9rem', color: '#666' }}>
|
||
<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) => (
|
||
<li key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.25rem 0' }}>
|
||
<span>{item.reason}</span>
|
||
<span style={{ fontWeight: 'bold', color: item.value >= 0 ? 'green' : 'red' }}>
|
||
{item.value > 0 ? '+' : ''}{item.value}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</details>
|
||
|
||
<p>{hasWon ? 'Come back tomorrow for a new song.' : 'The song was:'}</p>
|
||
|
||
<div style={{ margin: '1.5rem 0', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||
<img
|
||
src={dailyPuzzle.coverImage || '/favicon.ico'}
|
||
alt="Album Cover"
|
||
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>
|
||
{dailyPuzzle.releaseYear && gameState.yearGuessed && (
|
||
<p style={{ fontSize: '0.875rem', color: '#666', margin: '0 0 1rem 0' }}>Released: {dailyPuzzle.releaseYear}</p>
|
||
)}
|
||
<audio controls style={{ width: '100%' }}>
|
||
<source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<StarRating onRate={handleRatingSubmit} hasRated={hasRated} />
|
||
</div>
|
||
|
||
{statistics && <Statistics statistics={statistics} />}
|
||
<button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
|
||
{shareText}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</main>
|
||
|
||
{showYearModal && dailyPuzzle.releaseYear && (
|
||
<YearGuessModal
|
||
correctYear={dailyPuzzle.releaseYear}
|
||
onGuess={handleYearGuess}
|
||
onSkip={handleYearSkip}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ScoreDisplay({ score, breakdown }: { score: number, breakdown: Array<{ value: number, reason: string }> }) {
|
||
const tooltipText = breakdown.map(item => `${item.reason}: ${item.value > 0 ? '+' : ''}${item.value}`).join('\n');
|
||
|
||
// Create expression: "90 - 2 - 5 + 10"
|
||
// Limit to last 5 items to avoid overflow if too long
|
||
const displayItems = breakdown.length > 5 ?
|
||
[{ value: breakdown[0].value, reason: 'Start' }, ...breakdown.slice(-4)] :
|
||
breakdown;
|
||
|
||
const expression = displayItems.map((item, index) => {
|
||
if (index === 0 && breakdown.length <= 5) return item.value.toString();
|
||
if (index === 0 && breakdown.length > 5) return `${item.value} ...`;
|
||
return item.value >= 0 ? `+ ${item.value}` : `- ${Math.abs(item.value)}`;
|
||
}).join(' ');
|
||
|
||
return (
|
||
<div className="score-display" title={tooltipText} style={{
|
||
textAlign: 'center',
|
||
margin: '0.5rem 0',
|
||
padding: '0.5rem',
|
||
background: '#f3f4f6',
|
||
borderRadius: '0.5rem',
|
||
fontSize: '0.9rem',
|
||
fontFamily: 'monospace',
|
||
cursor: 'help'
|
||
}}>
|
||
<span style={{ color: '#666' }}>{expression} = </span>
|
||
<span style={{ fontWeight: 'bold', color: 'var(--primary)', fontSize: '1.1rem' }}>{score}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
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();
|
||
const minYear = 1950;
|
||
|
||
const closeOptions = new Set<number>();
|
||
closeOptions.add(correctYear);
|
||
|
||
// Add 2 close years (+/- 2)
|
||
while (closeOptions.size < 3) {
|
||
const offset = Math.floor(Math.random() * 5) - 2;
|
||
const year = correctYear + offset;
|
||
if (year <= currentYear && year >= minYear && year !== correctYear) {
|
||
closeOptions.add(year);
|
||
}
|
||
}
|
||
|
||
const allOptions = new Set(closeOptions);
|
||
|
||
// Fill up to 10 with random years
|
||
while (allOptions.size < 10) {
|
||
const year = Math.floor(Math.random() * (currentYear - minYear + 1)) + minYear;
|
||
allOptions.add(year);
|
||
}
|
||
|
||
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',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
background: 'rgba(0,0,0,0.8)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 1000,
|
||
padding: '1rem'
|
||
}}>
|
||
<div style={{
|
||
background: 'white',
|
||
padding: '2rem',
|
||
borderRadius: '1rem',
|
||
maxWidth: '500px',
|
||
width: '100%',
|
||
textAlign: 'center',
|
||
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)'
|
||
}}>
|
||
{!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>
|
||
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
|
||
gap: '0.75rem',
|
||
marginBottom: '1.5rem'
|
||
}}>
|
||
{options.map(year => (
|
||
<button
|
||
key={year}
|
||
onClick={() => handleGuess(year)}
|
||
style={{
|
||
padding: '0.75rem',
|
||
background: '#f3f4f6',
|
||
border: '2px solid #e5e7eb',
|
||
borderRadius: '0.5rem',
|
||
fontSize: '1.1rem',
|
||
fontWeight: 'bold',
|
||
color: '#374151',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.2s'
|
||
}}
|
||
onMouseOver={e => e.currentTarget.style.borderColor = '#10b981'}
|
||
onMouseOut={e => e.currentTarget.style.borderColor = '#e5e7eb'}
|
||
>
|
||
{year}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<button
|
||
onClick={handleSkip}
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
color: '#6b7280',
|
||
textDecoration: 'underline',
|
||
cursor: 'pointer',
|
||
fontSize: '0.9rem'
|
||
}}
|
||
>
|
||
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: '#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>
|
||
</>
|
||
) : (
|
||
<>
|
||
<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>
|
||
</>
|
||
)
|
||
) : (
|
||
<>
|
||
<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>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StarRating({ onRate, hasRated }: { onRate: (rating: number) => void, hasRated: boolean }) {
|
||
const [hover, setHover] = useState(0);
|
||
const [rating, setRating] = useState(0);
|
||
|
||
if (hasRated) {
|
||
return <div style={{ color: '#666', 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>
|
||
<div style={{ display: 'flex', gap: '0.25rem', justifyContent: 'center' }}>
|
||
{[...Array(5)].map((_, index) => {
|
||
const ratingValue = index + 1;
|
||
return (
|
||
<button
|
||
key={index}
|
||
type="button"
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontSize: '2rem',
|
||
color: ratingValue <= (hover || rating) ? '#ffc107' : '#9ca3af',
|
||
transition: 'color 0.2s',
|
||
padding: '0 0.25rem'
|
||
}}
|
||
onClick={() => {
|
||
setRating(ratingValue);
|
||
onRate(ratingValue);
|
||
}}
|
||
onMouseEnter={() => setHover(ratingValue)}
|
||
onMouseLeave={() => setHover(0)}
|
||
>
|
||
★
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|