Add collapsible Daily Puzzles management table to admin area
This commit is contained in:
Hördle Bot
@@ -97,6 +97,11 @@ export default function AdminPage() {
|
||||
const [playingSongId, setPlayingSongId] = useState<number | null>(null);
|
||||
const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
|
||||
|
||||
// Daily Puzzles state
|
||||
const [dailyPuzzles, setDailyPuzzles] = useState<any[]>([]);
|
||||
const [playingPuzzleId, setPlayingPuzzleId] = useState<number | null>(null);
|
||||
const [showDailyPuzzles, setShowDailyPuzzles] = useState(false);
|
||||
|
||||
// Check for existing auth on mount
|
||||
useEffect(() => {
|
||||
const authToken = localStorage.getItem('hoerdle_admin_auth');
|
||||
@@ -104,6 +109,7 @@ export default function AdminPage() {
|
||||
setIsAuthenticated(true);
|
||||
fetchSongs();
|
||||
fetchGenres();
|
||||
fetchDailyPuzzles();
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -117,6 +123,7 @@ export default function AdminPage() {
|
||||
setIsAuthenticated(true);
|
||||
fetchSongs();
|
||||
fetchGenres();
|
||||
fetchDailyPuzzles();
|
||||
} else {
|
||||
alert('Wrong password');
|
||||
}
|
||||
@@ -193,6 +200,63 @@ export default function AdminPage() {
|
||||
else alert('Failed to delete special');
|
||||
};
|
||||
|
||||
// Daily Puzzles functions
|
||||
const fetchDailyPuzzles = async () => {
|
||||
const res = await fetch('/api/admin/daily-puzzles');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDailyPuzzles(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeletePuzzle = async (puzzleId: number) => {
|
||||
if (!confirm('Delete this daily puzzle? A new one will be generated automatically.')) return;
|
||||
const res = await fetch('/api/admin/daily-puzzles', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ puzzleId }),
|
||||
});
|
||||
if (res.ok) {
|
||||
fetchDailyPuzzles();
|
||||
alert('Puzzle deleted and regenerated successfully');
|
||||
} else {
|
||||
alert('Failed to delete puzzle');
|
||||
}
|
||||
};
|
||||
|
||||
const handlePlayPuzzle = (puzzle: any) => {
|
||||
if (playingPuzzleId === puzzle.id) {
|
||||
// Pause
|
||||
audioElement?.pause();
|
||||
setPlayingPuzzleId(null);
|
||||
setAudioElement(null);
|
||||
} else {
|
||||
// Stop any currently playing audio
|
||||
if (audioElement) {
|
||||
audioElement.pause();
|
||||
setAudioElement(null);
|
||||
}
|
||||
|
||||
const audio = new Audio(puzzle.song.audioUrl);
|
||||
audio.play()
|
||||
.then(() => {
|
||||
setAudioElement(audio);
|
||||
setPlayingPuzzleId(puzzle.id);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Playback error:', error);
|
||||
alert(`Failed to play audio: ${error.message}`);
|
||||
setPlayingPuzzleId(null);
|
||||
setAudioElement(null);
|
||||
});
|
||||
|
||||
audio.onended = () => {
|
||||
setPlayingPuzzleId(null);
|
||||
setAudioElement(null);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const startEditSpecial = (special: Special) => {
|
||||
setEditingSpecialId(special.id);
|
||||
setEditSpecialName(special.name);
|
||||
@@ -839,13 +903,10 @@ export default function AdminPage() {
|
||||
{message && (
|
||||
<div style={{
|
||||
marginTop: '1rem',
|
||||
padding: '1rem',
|
||||
background: message.includes('❌') ? '#fee2e2' : '#d4edda',
|
||||
border: `1px solid ${message.includes('❌') ? '#ef4444' : '#28a745'}`,
|
||||
borderRadius: '0.25rem',
|
||||
whiteSpace: 'pre-line',
|
||||
fontSize: '0.875rem',
|
||||
fontFamily: 'monospace'
|
||||
padding: '0.75rem',
|
||||
background: '#d1fae5',
|
||||
color: '#065f46',
|
||||
borderRadius: '0.25rem'
|
||||
}}>
|
||||
{message}
|
||||
</div>
|
||||
@@ -853,6 +914,93 @@ export default function AdminPage() {
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Today's Daily Puzzles */}
|
||||
<div className="admin-card">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
|
||||
Today's Daily Puzzles
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowDailyPuzzles(!showDailyPuzzles)}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
background: '#f3f4f6',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '0.25rem',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.875rem'
|
||||
}}
|
||||
>
|
||||
{showDailyPuzzles ? '▼ Hide' : '▶ Show'}
|
||||
</button>
|
||||
</div>
|
||||
{showDailyPuzzles && (dailyPuzzles.length === 0 ? (
|
||||
<p style={{ color: '#6b7280' }}>No daily puzzles found for today.</p>
|
||||
) : (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #e5e7eb' }}>
|
||||
<th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>Category</th>
|
||||
<th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>Song</th>
|
||||
<th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>Artist</th>
|
||||
<th style={{ padding: '0.75rem', textAlign: 'center', fontWeight: 'bold' }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dailyPuzzles.map(puzzle => (
|
||||
<tr key={puzzle.id} style={{ borderBottom: '1px solid #e5e7eb' }}>
|
||||
<td style={{ padding: '0.75rem' }}>
|
||||
<span style={{
|
||||
background: puzzle.categoryType === 'global' ? '#dbeafe' : puzzle.categoryType === 'special' ? '#fce7f3' : '#f3f4f6',
|
||||
color: puzzle.categoryType === 'global' ? '#1e40af' : puzzle.categoryType === 'special' ? '#be185d' : '#374151',
|
||||
padding: '0.25rem 0.5rem',
|
||||
borderRadius: '0.25rem',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '500'
|
||||
}}>
|
||||
{puzzle.category}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{puzzle.song.title}</td>
|
||||
<td style={{ padding: '0.75rem' }}>{puzzle.song.artist}</td>
|
||||
<td style={{ padding: '0.75rem', textAlign: 'center' }}>
|
||||
<button
|
||||
onClick={() => handlePlayPuzzle(puzzle)}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
marginRight: '0.5rem',
|
||||
background: playingPuzzleId === puzzle.id ? '#ef4444' : '#3b82f6',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '0.25rem',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.875rem'
|
||||
}}
|
||||
>
|
||||
{playingPuzzleId === puzzle.id ? '⏸ Pause' : '▶ Play'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeletePuzzle(puzzle.id)}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
background: '#ef4444',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '0.25rem',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.875rem'
|
||||
}}
|
||||
>
|
||||
🗑️ Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="admin-card">
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
||||
Song Library ({songs.length} songs)
|
||||
|
||||
Reference in New Issue
Block a user