Hördle Bot
f5cb542bba
- Verwende explizite === true Prüfung für isSolved/isFailed - Hinzugefügte Debug-Logs um State-Werte zu überprüfen - Zeigt gameState.isSolved/isFailed, Typen und berechnete Werte - Hilft beim Debuggen, warum Ergebnisanzeige nicht angezeigt wird
1034 lines
48 KiB
TypeScript
1034 lines
48 KiB
TypeScript
'use client';
|
|
|
|
import { config } from '@/lib/config';
|
|
import { useEffect, useState, useRef } from 'react';
|
|
import { useTranslations, useLocale } from 'next-intl';
|
|
import AudioPlayer, { AudioPlayerRef } from './AudioPlayer';
|
|
import GuessInput from './GuessInput';
|
|
import Statistics from './Statistics';
|
|
import ExtraPuzzlesPopover from './ExtraPuzzlesPopover';
|
|
import { useGameState } from '../lib/gameState';
|
|
import { getGenreKey } from '@/lib/playerStorage';
|
|
import type { ExternalPuzzle } from '@/lib/externalPuzzles';
|
|
import { getRandomExternalPuzzle } from '@/lib/externalPuzzles';
|
|
import { hasPlayedAllDailyPuzzlesForToday, hasSeenExtraPuzzlesPopoverToday, markDailyPuzzlePlayedToday, markExtraPuzzlesPopoverShownToday } from '@/lib/extraPuzzlesTracker';
|
|
import { sendGotifyNotification, submitRating } from '../app/actions';
|
|
import { getOrCreatePlayerId } from '@/lib/playerId';
|
|
|
|
// 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[];
|
|
// List of genre keys that zusammen alle Tagesrätsel des Tages repräsentieren (z. B. ['global', 'Rock', 'Pop']).
|
|
// Wird genutzt, um zu prüfen, ob der Spieler alle Tagesrätsel gespielt hat.
|
|
requiredDailyKeys?: string[];
|
|
}
|
|
|
|
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, requiredDailyKeys }: GameProps) {
|
|
const t = useTranslations('Game');
|
|
const locale = useLocale();
|
|
const { gameState, statistics, addGuess, giveUp, addReplay, addYearBonus, skipYearBonus } = useGameState(genre, maxAttempts, isSpecial);
|
|
const [hasWon, setHasWon] = useState(gameState?.isSolved ?? false);
|
|
const [hasLost, setHasLost] = useState(gameState?.isFailed ?? false);
|
|
const [shareText, setShareText] = useState(`🔗 ${t('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 [showExtraPuzzlesPopover, setShowExtraPuzzlesPopover] = useState(false);
|
|
const [extraPuzzle, setExtraPuzzle] = useState<ExternalPuzzle | null>(null);
|
|
const audioPlayerRef = useRef<AudioPlayerRef>(null);
|
|
const [commentText, setCommentText] = useState('');
|
|
const [commentSending, setCommentSending] = useState(false);
|
|
const [commentSent, setCommentSent] = useState(false);
|
|
const [commentError, setCommentError] = useState<string | null>(null);
|
|
const [commentCollapsed, setCommentCollapsed] = useState(true);
|
|
const [rewrittenMessage, setRewrittenMessage] = useState<string | null>(null);
|
|
const [commentAIConsent, setCommentAIConsent] = 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) {
|
|
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);
|
|
}
|
|
} else {
|
|
// Reset states when gameState is null (e.g., during loading)
|
|
setHasWon(false);
|
|
setHasLost(false);
|
|
}
|
|
}, [gameState, dailyPuzzle]);
|
|
|
|
// Track gespielte Tagesrätsel & entscheide, ob das Partner-Popover gezeigt werden soll
|
|
useEffect(() => {
|
|
if (!gameState || !dailyPuzzle) return;
|
|
|
|
const gameEnded = gameState.isSolved || gameState.isFailed;
|
|
if (!gameEnded) return;
|
|
|
|
const genreKey = getGenreKey(isSpecial ? null : genre, isSpecial, isSpecial ? genre || undefined : undefined);
|
|
markDailyPuzzlePlayedToday(genreKey);
|
|
|
|
if (!requiredDailyKeys || requiredDailyKeys.length === 0) return;
|
|
if (hasSeenExtraPuzzlesPopoverToday()) return;
|
|
if (!hasPlayedAllDailyPuzzlesForToday(requiredDailyKeys)) return;
|
|
|
|
const partnerPuzzle = getRandomExternalPuzzle();
|
|
if (!partnerPuzzle) return;
|
|
|
|
setExtraPuzzle(partnerPuzzle);
|
|
setShowExtraPuzzlesPopover(true);
|
|
markExtraPuzzlesPopoverShownToday();
|
|
|
|
if (typeof window !== 'undefined' && window.plausible) {
|
|
window.plausible('extra_puzzles_popover_shown', {
|
|
props: {
|
|
partner: partnerPuzzle.id,
|
|
url: partnerPuzzle.url,
|
|
},
|
|
});
|
|
}
|
|
}, [gameState?.isSolved, gameState?.isFailed, dailyPuzzle?.id, genre, isSpecial, requiredDailyKeys]);
|
|
|
|
useEffect(() => {
|
|
setLastAction(null);
|
|
}, [dailyPuzzle?.id]);
|
|
|
|
useEffect(() => {
|
|
if (dailyPuzzle) {
|
|
const ratedPuzzles = JSON.parse(localStorage.getItem(`${config.appName.toLowerCase()}_rated_puzzles`) || '[]');
|
|
if (ratedPuzzles.includes(dailyPuzzle.id)) {
|
|
setHasRated(true);
|
|
} else {
|
|
setHasRated(false);
|
|
}
|
|
|
|
// Check if comment already sent for this puzzle
|
|
const playerIdentifier = getOrCreatePlayerId();
|
|
if (playerIdentifier) {
|
|
const commentedPuzzles = JSON.parse(localStorage.getItem(`${config.appName.toLowerCase()}_commented_puzzles`) || '[]');
|
|
if (commentedPuzzles.includes(dailyPuzzle.id)) {
|
|
setCommentSent(true);
|
|
}
|
|
}
|
|
}
|
|
}, [dailyPuzzle]);
|
|
|
|
if (!dailyPuzzle) return (
|
|
<div className="game-container" style={{ textAlign: 'center', padding: '2rem' }}>
|
|
<h2>{t('noPuzzleAvailable')}</h2>
|
|
<p>{t('noPuzzleDescription')}</p>
|
|
<p>{t('noPuzzleGenre')}{genre ? ` für Genre "${genre}"` : ''}.</p>
|
|
<a href="/admin" style={{ color: 'var(--primary)', textDecoration: 'underline' }}>{t('goToAdmin')}</a>
|
|
</div>
|
|
);
|
|
if (!gameState) return <div>{t('loadingState')}</div>;
|
|
|
|
// Use gameState directly for isSolved/isFailed to ensure consistency when returning to completed puzzles
|
|
// Always use gameState values directly - they are the source of truth
|
|
// This ensures that when returning to a completed puzzle, the result is shown immediately
|
|
// IMPORTANT: Check gameState.isSolved/isFailed directly, not the local state variables
|
|
const isSolved = gameState.isSolved === true;
|
|
const isFailed = gameState.isFailed === true;
|
|
|
|
// Debug logging to understand the issue
|
|
if (typeof window !== 'undefined') {
|
|
console.log('[Game] State check:', {
|
|
gameStateIsSolved: gameState.isSolved,
|
|
gameStateIsFailed: gameState.isFailed,
|
|
gameStateTypeIsSolved: typeof gameState.isSolved,
|
|
gameStateTypeIsFailed: typeof gameState.isFailed,
|
|
guesses: gameState.guesses.length,
|
|
maxAttempts,
|
|
computedIsSolved: isSolved,
|
|
computedIsFailed: isFailed,
|
|
willShowInput: !isSolved && !isFailed,
|
|
willShowResult: isSolved || isFailed
|
|
});
|
|
}
|
|
|
|
const handleGuess = (song: any) => {
|
|
if (isProcessingGuess) return;
|
|
// Prevent guessing if already solved or failed
|
|
if (gameState?.isSolved || gameState?.isFailed) {
|
|
return;
|
|
}
|
|
|
|
setIsProcessingGuess(true);
|
|
setLastAction('GUESS');
|
|
if (song.id === dailyPuzzle.songId) {
|
|
addGuess(song.title, true);
|
|
setHasWon(true);
|
|
// gameState.isSolved will be updated by useGameState
|
|
// 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);
|
|
// gameState.isFailed will be updated by useGameState
|
|
// 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 = () => {
|
|
// Prevent skipping if already solved or failed
|
|
if (gameState?.isSolved || gameState?.isFailed) return;
|
|
|
|
// 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);
|
|
// gameState.isFailed will be updated by useGameState
|
|
// 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 = () => {
|
|
// Prevent giving up if already solved or failed
|
|
if (gameState?.isSolved || gameState?.isFailed) return;
|
|
|
|
setLastAction('SKIP');
|
|
addGuess("SKIPPED", false);
|
|
giveUp(); // Ensure game is marked as failed and score reset to 0
|
|
setHasLost(true);
|
|
setHasWon(false);
|
|
// gameState.isFailed will be updated by useGameState
|
|
// 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 ? 10 : 0), // Include year bonus if correct
|
|
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, // Score already includes win bonus
|
|
outcome: 'won',
|
|
year_bonus: 'skipped'
|
|
}
|
|
});
|
|
}
|
|
|
|
// Send notification now that game is fully complete
|
|
sendGotifyNotification(gameState.guesses.length, 'won', dailyPuzzle.id, genre, gameState.score);
|
|
};
|
|
|
|
const handleCommentSubmit = async () => {
|
|
if (!commentText.trim() || commentSending || commentSent || !dailyPuzzle || !commentAIConsent) {
|
|
return;
|
|
}
|
|
|
|
setCommentSending(true);
|
|
setCommentError(null);
|
|
setRewrittenMessage(null);
|
|
|
|
try {
|
|
const playerIdentifier = getOrCreatePlayerId();
|
|
if (!playerIdentifier) {
|
|
throw new Error('Could not get player identifier');
|
|
}
|
|
|
|
// 1. Rewrite message using AI
|
|
const rewriteResponse = await fetch('/api/rewrite-message', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: commentText.trim() })
|
|
});
|
|
|
|
let finalMessage = commentText.trim();
|
|
if (rewriteResponse.ok) {
|
|
const rewriteData = await rewriteResponse.json();
|
|
if (rewriteData.rewrittenMessage) {
|
|
finalMessage = rewriteData.rewrittenMessage;
|
|
// Only show rewritten message if it was actually changed
|
|
// The API adds "(autocorrected by Polite-Bot)" suffix only if message was changed
|
|
const wasChanged = finalMessage.includes('(autocorrected by Polite-Bot)');
|
|
if (wasChanged) {
|
|
// Remove the suffix for display
|
|
const displayMessage = finalMessage.replace(/\s*\(autocorrected by Polite-Bot\)\s*/g, '').trim();
|
|
setRewrittenMessage(displayMessage);
|
|
} else {
|
|
// Ensure rewrittenMessage is not set if message wasn't changed
|
|
setRewrittenMessage(null);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 2. Send comment
|
|
// For specials, genreId should be null. For global, also null. For genres, we pass null and let API determine from puzzle
|
|
const genreId = isSpecial ? null : null; // API will determine from puzzle
|
|
|
|
const response = await fetch('/api/curator-comment', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
puzzleId: dailyPuzzle.id,
|
|
genreId: genreId,
|
|
message: finalMessage,
|
|
originalMessage: commentText.trim() !== finalMessage ? commentText.trim() : undefined,
|
|
playerIdentifier: playerIdentifier
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Failed to send comment');
|
|
}
|
|
|
|
setCommentSent(true);
|
|
setCommentText('');
|
|
|
|
// Store in localStorage that comment was sent
|
|
const commentedPuzzles = JSON.parse(localStorage.getItem(`${config.appName.toLowerCase()}_commented_puzzles`) || '[]');
|
|
if (!commentedPuzzles.includes(dailyPuzzle.id)) {
|
|
commentedPuzzles.push(dailyPuzzle.id);
|
|
localStorage.setItem(`${config.appName.toLowerCase()}_commented_puzzles`, JSON.stringify(commentedPuzzles));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error sending comment:', error);
|
|
setCommentError(error instanceof Error ? error.message : 'Failed to send comment');
|
|
} finally {
|
|
setCommentSending(false);
|
|
}
|
|
};
|
|
|
|
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 (gameState.guesses[i] === 'SKIPPED') {
|
|
emojiGrid += '⬛';
|
|
} else if (isSolved && i === gameState.guesses.length - 1) {
|
|
emojiGrid += '🟩';
|
|
} else {
|
|
emojiGrid += '🟥';
|
|
}
|
|
} else {
|
|
// If game is lost, fill remaining slots with black squares
|
|
emojiGrid += isFailed ? '⬛' : '⬜';
|
|
}
|
|
}
|
|
|
|
const speaker = isSolved ? '🔉' : '🔇';
|
|
const bonusStar = (isSolved && gameState.yearGuessed && dailyPuzzle.releaseYear && gameState.scoreBreakdown.some(item => item.reason === 'Bonus: Correct Year')) ? '⭐' : '';
|
|
const genreText = genre ? `${isSpecial ? t('special') : t('genre')}: ${genre}\n` : '';
|
|
|
|
// Use current domain from window.location to support both hoerdle.de and hördle.de
|
|
const rawHost = typeof window !== 'undefined' ? window.location.hostname : config.domain;
|
|
const protocol = typeof window !== 'undefined' ? window.location.protocol : 'https:';
|
|
|
|
// For users on hördle.de, use Punycode domain (xn--hrdle-jua.de) in share message
|
|
// to avoid rendering issues with Unicode domains
|
|
let currentHost = rawHost;
|
|
if (rawHost === 'hördle.de' || rawHost === 'xn--hrdle-jua.de') {
|
|
currentHost = 'xn--hrdle-jua.de';
|
|
}
|
|
|
|
// OLD CODE (commented out - may be needed again in the future):
|
|
// Use current domain from window.location to support both hoerdle.de and hördle.de,
|
|
// but always share the pretty Unicode-Domain "hördle.de" instead of the Punycode variant.
|
|
// const currentHost = rawHost === 'xn--hrdle-jua.de' ? 'hördle.de' : rawHost;
|
|
|
|
let shareUrl = `${protocol}//${currentHost}`;
|
|
// Add locale prefix if not default (en)
|
|
if (locale !== 'en') {
|
|
shareUrl += `/${locale}`;
|
|
}
|
|
if (genre) {
|
|
if (isSpecial) {
|
|
shareUrl += `/special/${encodeURIComponent(genre)}`;
|
|
} else {
|
|
shareUrl += `/${encodeURIComponent(genre)}`;
|
|
}
|
|
}
|
|
|
|
const text = `${config.appName} #${dailyPuzzle.puzzleNumber}\n${genreText}\n${speaker}${emojiGrid}${bonusStar}\n${t('score')}: ${gameState.score}\n\n#${config.appName} #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(t('shared'));
|
|
setTimeout(() => setShareText(`🔗 ${t('share')}`), 2000);
|
|
return;
|
|
} catch (err) {
|
|
if ((err as Error).name !== 'AbortError') {
|
|
console.error('Share failed:', err);
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
setShareText(t('copied'));
|
|
setTimeout(() => setShareText(`🔗 ${t('share')}`), 2000);
|
|
} catch (err) {
|
|
console.error('Clipboard failed:', err);
|
|
setShareText(t('shareFailed'));
|
|
setTimeout(() => setShareText(`🔗 ${t('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(`${config.appName.toLowerCase()}_rated_puzzles`) || '[]');
|
|
if (!ratedPuzzles.includes(dailyPuzzle.id)) {
|
|
ratedPuzzles.push(dailyPuzzle.id);
|
|
localStorage.setItem(`${config.appName.toLowerCase()}_rated_puzzles`, JSON.stringify(ratedPuzzles));
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to submit rating', error);
|
|
}
|
|
};
|
|
|
|
// Aktuelle Attempt-Anzeige:
|
|
// - Während des Spiels: nächster Versuch = guesses.length + 1
|
|
// - Nach Spielende (gelöst oder verloren): letzter Versuch = guesses.length
|
|
const currentAttempt = (gameState.isSolved || gameState.isFailed)
|
|
? gameState.guesses.length
|
|
: gameState.guesses.length + 1;
|
|
|
|
return (
|
|
<div className="container">
|
|
<header className="header">
|
|
<h1 id="tour-title" className="title">{config.appName} #{dailyPuzzle.puzzleNumber}{genre ? ` / ${genre}` : ''}</h1>
|
|
<div style={{ fontSize: '0.9rem', color: 'var(--muted-foreground)', marginTop: '0.5rem', marginBottom: '1rem' }}>
|
|
{t('nextPuzzle')}: {timeUntilNext}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="game-board">
|
|
<div style={{ borderBottom: '1px solid #e5e7eb', paddingBottom: '1rem' }}>
|
|
<div id="tour-status" className="status-bar">
|
|
<span>{t('attempt')} {currentAttempt} / {maxAttempts}</span>
|
|
<span>{unlockedSeconds}s {t('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' && !isSolved && !isFailed)}
|
|
onReplay={addReplay}
|
|
onHasPlayedChange={setHasPlayedAudio}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="guess-list">
|
|
{gameState.guesses.map((guess, i) => {
|
|
const isCorrect = isSolved && 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 ? t('correct') : guess}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{!isSolved && !isFailed && (
|
|
<>
|
|
<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
|
|
? t('start')
|
|
: t('skipWithBonus', { seconds: unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds })
|
|
}
|
|
</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)'
|
|
}}
|
|
>
|
|
{t('solveGiveUp')}
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{(isSolved || isFailed) && (
|
|
<div className={`message-box ${isSolved ? 'success' : 'failure'}`}>
|
|
<h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
|
|
{isSolved ? t('won') : t('lost')}
|
|
</h2>
|
|
|
|
<div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: isSolved ? 'var(--success)' : 'var(--danger)' }}>
|
|
{t('score')}: {gameState.score}
|
|
</div>
|
|
|
|
<details style={{ marginBottom: '1rem', cursor: 'pointer', fontSize: '0.9rem', color: 'var(--muted-foreground)' }}>
|
|
<summary>{t('scoreBreakdown')}</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>{isSolved ? t('comeBackTomorrow') : t('theSongWas')}</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={t('albumCover')}
|
|
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: 'var(--muted-foreground)', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.artist}</p>
|
|
{dailyPuzzle.releaseYear && gameState.yearGuessed && (
|
|
<p style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', margin: '0 0 1rem 0' }}>{t('released')}: {dailyPuzzle.releaseYear}</p>
|
|
)}
|
|
<audio controls style={{ width: '100%' }}>
|
|
<source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
|
|
{t('yourBrowserDoesNotSupport')}
|
|
</audio>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '1.25rem' }}>
|
|
<StarRating onRate={handleRatingSubmit} hasRated={hasRated} />
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '1.25rem', textAlign: 'center' }}>
|
|
<p style={{ fontSize: '0.85rem', color: 'var(--muted-foreground)', marginBottom: '0.5rem' }}>
|
|
{t('shareExplanation')}
|
|
</p>
|
|
<button onClick={handleShare} className="btn-primary">
|
|
{shareText}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Comment Form */}
|
|
{!commentSent && (
|
|
<div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem' }}>
|
|
<div
|
|
onClick={() => setCommentCollapsed(!commentCollapsed)}
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
cursor: 'pointer',
|
|
marginBottom: commentCollapsed ? 0 : '1rem'
|
|
}}
|
|
>
|
|
<h3 style={{ fontSize: '1rem', fontWeight: 'bold', margin: 0 }}>
|
|
{t('sendComment')}
|
|
</h3>
|
|
<span>{commentCollapsed ? '▼' : '▲'}</span>
|
|
</div>
|
|
|
|
{!commentCollapsed && (
|
|
<>
|
|
<p style={{ fontSize: '0.85rem', color: 'var(--muted-foreground)', marginBottom: '0.75rem' }}>
|
|
{t('commentHelp')}
|
|
</p>
|
|
<textarea
|
|
value={commentText}
|
|
onChange={(e) => setCommentText(e.target.value)}
|
|
placeholder={t('commentPlaceholder')}
|
|
maxLength={300}
|
|
style={{
|
|
width: '100%',
|
|
minHeight: '100px',
|
|
padding: '0.75rem',
|
|
borderRadius: '0.5rem',
|
|
border: '1px solid var(--border)',
|
|
fontSize: '0.9rem',
|
|
fontFamily: 'inherit',
|
|
resize: 'vertical',
|
|
marginBottom: '0.5rem',
|
|
display: 'block',
|
|
boxSizing: 'border-box' // Ensure padding and border are included in width
|
|
}}
|
|
disabled={commentSending}
|
|
/>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
|
|
<span style={{ fontSize: '0.75rem', color: 'var(--muted-foreground)' }}>
|
|
{commentText.length}/300
|
|
</span>
|
|
{commentError && (
|
|
<span style={{ fontSize: '0.75rem', color: 'var(--danger)' }}>
|
|
{commentError}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div style={{ marginBottom: '0.75rem' }}>
|
|
<label style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', fontSize: '0.85rem', color: 'var(--foreground)', cursor: 'pointer' }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={commentAIConsent}
|
|
onChange={(e) => setCommentAIConsent(e.target.checked)}
|
|
disabled={commentSending || commentSent}
|
|
style={{ marginTop: '0.2rem', cursor: (commentSending || commentSent) ? 'not-allowed' : 'pointer' }}
|
|
/>
|
|
<span>{t('commentAIConsent')}</span>
|
|
</label>
|
|
</div>
|
|
<button
|
|
onClick={handleCommentSubmit}
|
|
disabled={!commentText.trim() || commentSending || commentSent || !commentAIConsent}
|
|
className="btn-primary"
|
|
style={{
|
|
width: '100%',
|
|
opacity: (!commentText.trim() || commentSending || commentSent || !commentAIConsent) ? 0.5 : 1,
|
|
cursor: (!commentText.trim() || commentSending || commentSent || !commentAIConsent) ? 'not-allowed' : 'pointer'
|
|
}}
|
|
>
|
|
{commentSending ? t('sending') : t('sendComment')}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{commentSent && (
|
|
<div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(16, 185, 129, 0.1)', borderRadius: '0.5rem', border: '1px solid rgba(16, 185, 129, 0.3)' }}>
|
|
{rewrittenMessage ? (
|
|
<>
|
|
<p style={{ fontSize: '0.9rem', color: 'var(--success)', textAlign: 'center', marginBottom: '0.5rem' }}>
|
|
{t('commentSent')}
|
|
</p>
|
|
<div style={{ fontSize: '0.85rem', color: 'var(--muted-foreground)', textAlign: 'center' }}>
|
|
<p style={{ marginBottom: '0.25rem' }}>{t('commentRewritten')}</p>
|
|
<p style={{ fontStyle: 'italic' }}>"{rewrittenMessage}"</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p style={{ fontSize: '0.9rem', color: 'var(--success)', textAlign: 'center', marginBottom: 0 }}>
|
|
{t('commentThankYou')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{statistics && <Statistics statistics={statistics} />}
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{showYearModal && dailyPuzzle.releaseYear && (
|
|
<YearGuessModal
|
|
correctYear={dailyPuzzle.releaseYear}
|
|
onGuess={handleYearGuess}
|
|
onSkip={handleYearSkip}
|
|
/>
|
|
)}
|
|
|
|
{showExtraPuzzlesPopover && extraPuzzle && (
|
|
<ExtraPuzzlesPopover
|
|
puzzle={extraPuzzle}
|
|
onClose={() => setShowExtraPuzzlesPopover(false)}
|
|
/>
|
|
)}
|
|
</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: 'var(--muted)',
|
|
borderRadius: '0.5rem',
|
|
fontSize: '0.9rem',
|
|
fontFamily: 'monospace',
|
|
cursor: 'help'
|
|
}}>
|
|
<span style={{ color: 'var(--muted-foreground)' }}>{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 t = useTranslations('Game');
|
|
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: 'var(--primary)' }}>{t('bonusRound')}</h3>
|
|
<p style={{ marginBottom: '1.5rem', color: 'var(--secondary)' }}>{t('guessReleaseYear')} <strong style={{ color: 'var(--success)' }}>+10 {t('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: 'var(--muted)',
|
|
border: '2px solid var(--border)',
|
|
borderRadius: '0.5rem',
|
|
fontSize: '1.1rem',
|
|
fontWeight: 'bold',
|
|
color: 'var(--secondary)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.2s'
|
|
}}
|
|
onMouseOver={e => e.currentTarget.style.borderColor = 'var(--success)'}
|
|
onMouseOut={e => e.currentTarget.style.borderColor = 'var(--border)'}
|
|
>
|
|
{year}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleSkip}
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
color: 'var(--muted-foreground)',
|
|
textDecoration: 'underline',
|
|
cursor: 'pointer',
|
|
fontSize: '0.9rem'
|
|
}}
|
|
>
|
|
{t('skipBonus')}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<div style={{ padding: '2rem 0' }}>
|
|
{feedback.guessedYear ? (
|
|
feedback.correct ? (
|
|
<>
|
|
<div style={{ fontSize: '4rem', marginBottom: '1rem' }}>🎉</div>
|
|
<h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--success)', marginBottom: '0.5rem' }}>{t('correct')}</h3>
|
|
<p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>{t('released')} {correctYear}</p>
|
|
<p style={{ fontSize: '1.5rem', fontWeight: 'bold', color: 'var(--success)', marginTop: '1rem' }}>+10 {t('points')}!</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div style={{ fontSize: '4rem', marginBottom: '1rem' }}>😕</div>
|
|
<h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--danger)', marginBottom: '0.5rem' }}>{t('notQuite')}</h3>
|
|
<p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>{t('youGuessed')} {feedback.guessedYear}</p>
|
|
<p style={{ fontSize: '1.2rem', color: 'var(--secondary)', marginTop: '0.5rem' }}>{t('actuallyReleasedIn')} <strong>{correctYear}</strong></p>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div style={{ fontSize: '4rem', marginBottom: '1rem' }}>⏭️</div>
|
|
<h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--muted-foreground)', marginBottom: '0.5rem' }}>{t('skipped')}</h3>
|
|
<p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>{t('released')} {correctYear}</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StarRating({ onRate, hasRated }: { onRate: (rating: number) => void, hasRated: boolean }) {
|
|
const t = useTranslations('Game');
|
|
const [hover, setHover] = useState(0);
|
|
const [rating, setRating] = useState(0);
|
|
|
|
if (hasRated) {
|
|
return <div style={{ color: 'var(--muted-foreground)', fontStyle: 'italic' }}>{t('thanksForRating')}</div>;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="star-rating"
|
|
title={t('ratingTooltip')}
|
|
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
|
|
>
|
|
<span style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', fontWeight: '500' }}>{t('rateThisPuzzle')}</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) ? 'var(--warning)' : 'var(--muted-foreground)',
|
|
transition: 'color 0.2s',
|
|
padding: '0 0.25rem'
|
|
}}
|
|
onClick={() => {
|
|
setRating(ratingValue);
|
|
onRate(ratingValue);
|
|
}}
|
|
onMouseEnter={() => setHover(ratingValue)}
|
|
onMouseLeave={() => setHover(0)}
|
|
>
|
|
★
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|