245 lines
10 KiB
TypeScript
245 lines
10 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 } from '../app/actions';
|
|
|
|
interface GameProps {
|
|
dailyPuzzle: {
|
|
id: number;
|
|
audioUrl: string;
|
|
songId: number;
|
|
title: string;
|
|
artist: string;
|
|
coverImage: string | null;
|
|
} | null;
|
|
}
|
|
|
|
const UNLOCK_STEPS = [2, 4, 7, 11, 16, 30, 60];
|
|
|
|
export default function Game({ dailyPuzzle }: GameProps) {
|
|
const { gameState, statistics, addGuess } = useGameState();
|
|
const [hasWon, setHasWon] = useState(false);
|
|
const [hasLost, setHasLost] = useState(false);
|
|
const [shareText, setShareText] = useState('Share Result');
|
|
const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (gameState && dailyPuzzle) {
|
|
setHasWon(gameState.isSolved);
|
|
setHasLost(gameState.isFailed);
|
|
}
|
|
}, [gameState, dailyPuzzle]);
|
|
|
|
useEffect(() => {
|
|
setLastAction(null);
|
|
}, [dailyPuzzle?.id]);
|
|
|
|
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.</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) => {
|
|
setLastAction('GUESS');
|
|
if (song.id === dailyPuzzle.songId) {
|
|
addGuess(song.title, true);
|
|
setHasWon(true);
|
|
sendGotifyNotification(gameState.guesses.length + 1, 'won', dailyPuzzle.id);
|
|
} else {
|
|
addGuess(song.title, false);
|
|
if (gameState.guesses.length + 1 >= 7) {
|
|
setHasLost(true);
|
|
sendGotifyNotification(7, 'lost', dailyPuzzle.id);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSkip = () => {
|
|
setLastAction('SKIP');
|
|
addGuess("SKIPPED", false);
|
|
};
|
|
|
|
const handleGiveUp = () => {
|
|
setLastAction('SKIP');
|
|
addGuess("SKIPPED", false);
|
|
setHasLost(true);
|
|
sendGotifyNotification(7, 'lost', dailyPuzzle.id);
|
|
};
|
|
|
|
const unlockedSeconds = UNLOCK_STEPS[Math.min(gameState.guesses.length, 6)];
|
|
|
|
const handleShare = () => {
|
|
let emojiGrid = '';
|
|
const totalGuesses = 7;
|
|
|
|
// Build the grid
|
|
for (let i = 0; i < totalGuesses; i++) {
|
|
if (i < gameState.guesses.length) {
|
|
// If this was the winning guess (last one and won)
|
|
if (hasWon && i === gameState.guesses.length - 1) {
|
|
emojiGrid += '🟩';
|
|
} else {
|
|
// Wrong or skipped
|
|
emojiGrid += '⬛';
|
|
}
|
|
} else {
|
|
// Unused attempts
|
|
emojiGrid += '⬜';
|
|
}
|
|
}
|
|
|
|
const speaker = hasWon ? '🔉' : '🔇';
|
|
const text = `Hördle #${dailyPuzzle.id}\n\n${speaker}${emojiGrid}\n\n#Hördle #Music\n\nhttps://hoerdle.elpatron.me`;
|
|
|
|
// Fallback method for copying to clipboard
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.opacity = '0';
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
|
|
try {
|
|
document.execCommand('copy');
|
|
setShareText('Copied!');
|
|
setTimeout(() => setShareText('Share Result'), 2000);
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err);
|
|
setShareText('Copy failed');
|
|
setTimeout(() => setShareText('Share Result'), 2000);
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<header className="header">
|
|
<h1 className="title">Hördle #{dailyPuzzle.id}</h1>
|
|
</header>
|
|
|
|
<main className="game-board">
|
|
|
|
<div style={{ borderBottom: '1px solid #e5e7eb', paddingBottom: '1rem' }}>
|
|
<div className="status-bar">
|
|
<span>Attempt {gameState.guesses.length + 1} / 7</span>
|
|
<span>{unlockedSeconds}s unlocked</span>
|
|
</div>
|
|
<AudioPlayer
|
|
src={dailyPuzzle.audioUrl}
|
|
unlockedSeconds={unlockedSeconds}
|
|
autoPlay={lastAction === 'SKIP'}
|
|
/>
|
|
</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={false} />
|
|
{gameState.guesses.length < 6 ? (
|
|
<button
|
|
onClick={handleSkip}
|
|
className="skip-button"
|
|
>
|
|
Skip (+{UNLOCK_STEPS[Math.min(gameState.guesses.length + 1, 6)] - 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 && (
|
|
<div className="message-box success">
|
|
<h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>You won!</h2>
|
|
<p>Come back tomorrow for a new song.</p>
|
|
|
|
{/* Song Details */}
|
|
<div style={{ margin: '1.5rem 0', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
{dailyPuzzle.coverImage && (
|
|
<img
|
|
src={dailyPuzzle.coverImage}
|
|
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 1rem 0' }}>{dailyPuzzle.artist}</p>
|
|
<audio controls style={{ width: '100%' }}>
|
|
<source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</div>
|
|
|
|
{statistics && <Statistics statistics={statistics} />}
|
|
<button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
|
|
{shareText}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{hasLost && (
|
|
<div className="message-box failure">
|
|
<h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>Game Over</h2>
|
|
<p>The song was:</p>
|
|
|
|
{/* Song Details */}
|
|
<div style={{ margin: '1.5rem 0', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
{dailyPuzzle.coverImage && (
|
|
<img
|
|
src={dailyPuzzle.coverImage}
|
|
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 1rem 0' }}>{dailyPuzzle.artist}</p>
|
|
<audio controls style={{ width: '100%' }}>
|
|
<source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</div>
|
|
|
|
{statistics && <Statistics statistics={statistics} />}
|
|
<button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
|
|
{shareText}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|