elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement song rating system with admin view and user persistence

Browse Source
This commit is contained in:
Hördle Bot
2025-11-23 10:34:45 +01:00
parent dc83c8372f
commit 4d3032df36
7 changed files with 191 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/actions.ts
View File

@@ -30,3 +30,44 @@ export async function sendGotifyNotification(attempts: number, status: 'won' | '
console.error('Error sending Gotify notification:', error);
}
}
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function submitRating(songId: number, rating: number, genre?: string | null) {
try {
const song = await prisma.song.findUnique({ where: { id: songId } });
if (!song) throw new Error('Song not found');
const newRatingCount = song.ratingCount + 1;
const newAverageRating = ((song.averageRating * song.ratingCount) + rating) / newRatingCount;
await prisma.song.update({
where: { id: songId },
data: {
averageRating: newAverageRating,
ratingCount: newRatingCount,
},
});
// Send Gotify notification for the rating
const genreText = genre ? `[${genre}] ` : '';
const title = `Hördle Rating: ${rating} Stars`;
const message = `Song "${song.title}" by ${song.artist} ${genreText}received a ${rating}-star rating. (Avg: ${newAverageRating.toFixed(2)}, Count: ${newRatingCount})`;
await fetch(`${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: title,
message: message,
priority: 5,
}),
});
return { success: true, averageRating: newAverageRating };
} catch (error) {
console.error('Error submitting rating:', error);
return { success: false, error: 'Failed to submit rating' };
}
}

21
app/admin/page.tsx
View File

@@ -42,6 +42,8 @@ interface Song {
puzzles: DailyPuzzle[];
genres: Genre[];
specials: Special[];
averageRating: number;
ratingCount: number;
}
type SortField = 'id' | 'title' | 'artist' | 'createdAt';
@@ -1141,6 +1143,7 @@ export default function AdminPage() {
Added {sortField === 'createdAt' && (sortDirection === 'asc' ? '↑' : '↓')}
</th>
<th style={{ padding: '0.75rem' }}>Activations</th>
<th style={{ padding: '0.75rem' }}>Rating</th>
<th style={{ padding: '0.75rem' }}>Actions</th>
</tr>
</thead>
@@ -1211,6 +1214,15 @@ export default function AdminPage() {
{new Date(song.createdAt).toLocaleDateString('de-DE')}
</td>
<td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
<td style={{ padding: '0.75rem', color: '#666' }}>
{song.averageRating > 0 ? (
<span title={`${song.ratingCount} ratings`}>
{song.averageRating.toFixed(1)} ★ <span style={{ color: '#999', fontSize: '0.8rem' }}>({song.ratingCount})</span>
</span>
) : (
<span style={{ color: '#ccc' }}>-</span>
)}
</td>
<td style={{ padding: '0.75rem' }}>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<button
@@ -1297,6 +1309,15 @@ export default function AdminPage() {
{new Date(song.createdAt).toLocaleDateString('de-DE')}
</td>
<td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
<td style={{ padding: '0.75rem', color: '#666' }}>
{song.averageRating > 0 ? (
<span title={`${song.ratingCount} ratings`}>
{song.averageRating.toFixed(1)} ★ <span style={{ color: '#999', fontSize: '0.8rem' }}>({song.ratingCount})</span>
</span>
) : (
<span style={{ color: '#ccc' }}>-</span>
)}
</td>
<td style={{ padding: '0.75rem' }}>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<button

2
app/api/songs/route.ts
View File

@@ -32,6 +32,8 @@ export async function GET() {
puzzles: song.puzzles,
genres: song.genres,
specials: song.specials.map(ss => ss.special),
averageRating: song.averageRating,
ratingCount: song.ratingCount,
}));
return NextResponse.json(songsWithActivations);

85
components/Game.tsx
View File

@@ -5,7 +5,7 @@ import AudioPlayer from './AudioPlayer';
import GuessInput from './GuessInput';
import Statistics from './Statistics';
import { useGameState } from '../lib/gameState';
import { sendGotifyNotification } from '../app/actions';
import { sendGotifyNotification, submitRating } from '../app/actions';
interface GameProps {
dailyPuzzle: {
@@ -34,6 +34,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
const [isProcessingGuess, setIsProcessingGuess] = useState(false);
const [timeUntilNext, setTimeUntilNext] = useState('');
const [hasRated, setHasRated] = useState(false);
useEffect(() => {
const updateCountdown = () => {
@@ -180,6 +181,35 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
}
};
useEffect(() => {
if (dailyPuzzle) {
const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
if (ratedPuzzles.includes(dailyPuzzle.id)) {
setHasRated(true);
} else {
setHasRated(false);
}
}
}, [dailyPuzzle]);
const handleRatingSubmit = async (rating: number) => {
if (!dailyPuzzle) return;
try {
await submitRating(dailyPuzzle.songId, rating, genre);
setHasRated(true);
// Persist to localStorage
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">
@@ -265,6 +295,11 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
</audio>
</div>
{/* Rating Component */}
<div style={{ marginBottom: '1rem' }}>
<StarRating onRate={handleRatingSubmit} hasRated={hasRated} />
</div>
{statistics && <Statistics statistics={statistics} />}
<button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
{shareText}
@@ -294,6 +329,11 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
</audio>
</div>
{/* Rating Component */}
<div style={{ marginBottom: '1rem' }}>
<StarRating onRate={handleRatingSubmit} hasRated={hasRated} />
</div>
{statistics && <Statistics statistics={statistics} />}
<button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
{shareText}
@@ -305,3 +345,46 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
</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 song:</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>
);
}

21
prisma/migrations/20251123083856_add_rating_system/migration.sql Normal file
View File

@@ -0,0 +1,21 @@
-- AlterTable
ALTER TABLE "Special" ADD COLUMN "curator" TEXT;
-- RedefineTables
PRAGMA defer_foreign_keys=ON;
PRAGMA foreign_keys=OFF;
CREATE TABLE "new_Song" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"title" TEXT NOT NULL,
"artist" TEXT NOT NULL,
"filename" TEXT NOT NULL,
"coverImage" TEXT,
"createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
"averageRating" REAL NOT NULL DEFAULT 0,
"ratingCount" INTEGER NOT NULL DEFAULT 0
);
INSERT INTO "new_Song" ("artist", "coverImage", "createdAt", "filename", "id", "title") SELECT "artist", "coverImage", "createdAt", "filename", "id", "title" FROM "Song";
DROP TABLE "Song";
ALTER TABLE "new_Song" RENAME TO "Song";
PRAGMA foreign_keys=ON;
PRAGMA defer_foreign_keys=OFF;

2
prisma/schema.prisma
View File

@@ -20,6 +20,8 @@ model Song {
puzzles DailyPuzzle[]
genres Genre[]
specials SpecialSong[]
averageRating Float @default(0)
ratingCount Int @default(0)
}
model Genre {

30
scripts/restore_songs.ts
View File

@@ -33,23 +33,33 @@ async function restoreSongs() {
const title = metadata.common.title || 'Unknown Title';
const artist = metadata.common.artist || 'Unknown Artist';
const genres = metadata.common.genre || [];
// Try to find matching cover
// This is a best-effort guess based on timestamp or just null if we can't link it easily
// Since we don't store the link between file and cover in filename, we might lose cover association
// unless we re-extract it. But we already have cover files.
// For now, let's just restore the song entry. Re-extracting cover would duplicate files.
// If the user wants covers back perfectly, we might need to re-parse or just leave null.
// Let's leave null for now to avoid clutter, or maybe try to find a cover with similar timestamp if possible?
// Actually, the cover filename is not easily deducible from song filename.
// Let's just restore the song data.
// Create or find genres
const genreConnect = [];
for (const genreName of genres) {
if (!genreName) continue;
// Simple normalization
const normalizedGenre = genreName.trim();
// Upsert genre (we can't use upsert easily with connect, so find or create first)
let genre = await prisma.genre.findUnique({ where: { name: normalizedGenre } });
if (!genre) {
genre = await prisma.genre.create({ data: { name: normalizedGenre } });
console.log(`Created genre: ${normalizedGenre}`);
}
genreConnect.push({ id: genre.id });
}
await prisma.song.create({
data: {
title,
artist,
filename,
// coverImage: null // We lose the cover link unfortunately, unless we re-extract
genres: {
connect: genreConnect
}
}
});