545 lines
22 KiB
TypeScript
545 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import AudioPlayer from './AudioPlayer';
|
|
import GuessInput from './GuessInput';
|
|
import Statistics from './Statistics';
|
|
import { useGameState } from '../lib/gameState';
|
|
import { sendGotifyNotification, submitRating } from '../app/actions';
|
|
|
|
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);
|
|
|
|
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);
|
|
// 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);
|
|
sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0); // Score is 0 on failure
|
|
}
|
|
}
|
|
setTimeout(() => setIsProcessingGuess(false), 500);
|
|
};
|
|
|
|
const handleSkip = () => {
|
|
setLastAction('SKIP');
|
|
addGuess("SKIPPED", false);
|
|
|
|
if (gameState.guesses.length + 1 >= maxAttempts) {
|
|
setHasLost(true);
|
|
setHasWon(false);
|
|
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);
|
|
sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0);
|
|
};
|
|
|
|
const handleYearGuess = (year: number) => {
|
|
const correct = year === dailyPuzzle.releaseYear;
|
|
addYearBonus(correct);
|
|
setShowYearModal(false);
|
|
|
|
// 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);
|
|
// 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 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 className="status-bar">
|
|
<span>Attempt {gameState.guesses.length + 1} / {maxAttempts}</span>
|
|
<span>{unlockedSeconds}s unlocked</span>
|
|
</div>
|
|
|
|
<ScoreDisplay score={gameState.score} breakdown={gameState.scoreBreakdown} />
|
|
|
|
<AudioPlayer
|
|
src={dailyPuzzle.audioUrl}
|
|
unlockedSeconds={unlockedSeconds}
|
|
startTime={dailyPuzzle.startTime}
|
|
autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
|
|
onReplay={addReplay}
|
|
/>
|
|
</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 && (
|
|
<>
|
|
<GuessInput onGuess={handleGuess} disabled={isProcessingGuess} />
|
|
{gameState.guesses.length < maxAttempts - 1 ? (
|
|
<button
|
|
onClick={handleSkip}
|
|
className="skip-button"
|
|
>
|
|
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[]>([]);
|
|
|
|
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]);
|
|
|
|
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)'
|
|
}}>
|
|
<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={() => onGuess(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={onSkip}
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
color: '#6b7280',
|
|
textDecoration: 'underline',
|
|
cursor: 'pointer',
|
|
fontSize: '0.9rem'
|
|
}}
|
|
>
|
|
Skip Bonus
|
|
</button>
|
|
</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>
|
|
);
|
|
}
|