File size: 3,454 Bytes
8725cc4 5cd06ed 6864389 0ce34cb 6864389 0ce34cb 8725cc4 5835ecd 0ce34cb 444233f aeb9637 8606349 8725cc4 5835ecd 0ce34cb 444233f aeb9637 8606349 8725cc4 47fea40 aeb9637 831f7e7 5cd06ed aeb9637 5cd06ed 8606349 47fea40 35af7d4 8725cc4 5835ecd 8725cc4 8606349 5cd06ed 6864389 5cd06ed 6864389 81e6964 6864389 8606349 6864389 8606349 6864389 47fea40 6864389 aeb9637 6864389 35af7d4 6864389 aeb9637 8725cc4 831f7e7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import { motion } from "framer-motion";
import { useState, useEffect } from "react";
import { useTranslation } from "@/hooks/useTranslation";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogTrigger,
} from "@/components/ui/dialog";
import { RoundHeader } from "./sentence-builder/RoundHeader";
import { WordDisplay } from "./sentence-builder/WordDisplay";
import { GuessDescription } from "./guess-display/GuessDescription";
import { GuessResult } from "./guess-display/GuessResult";
import { ActionButtons } from "./guess-display/ActionButtons";
import { HighScoreBoard } from "@/components/HighScoreBoard";
interface GuessDisplayProps {
sentence: string[];
aiGuess: string;
currentWord: string;
onNextRound: () => void;
onPlayAgain: () => void;
onBack?: () => void;
currentScore: number;
avgWordsPerRound: number;
sessionId: string;
currentTheme: string;
onHighScoreDialogChange?: (isOpen: boolean) => void;
normalizeWord: (word: string) => string;
}
export const GuessDisplay = ({
sentence,
aiGuess,
currentWord,
onNextRound,
onPlayAgain,
onBack,
currentScore,
avgWordsPerRound,
sessionId,
currentTheme,
onHighScoreDialogChange,
normalizeWord,
}: GuessDisplayProps) => {
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const [hasSubmittedScore, setHasSubmittedScore] = useState(false);
const [showHighScores, setShowHighScores] = useState(false);
const t = useTranslation();
useEffect(() => {
onHighScoreDialogChange?.(showHighScores);
}, [showHighScores, onHighScoreDialogChange]);
const handleSetShowConfirmDialog = (show: boolean) => {
setShowConfirmDialog(show);
};
const isGuessCorrect = () => normalizeWord(aiGuess) === normalizeWord(currentWord);
const handleScoreSubmitted = () => {
setHasSubmittedScore(true);
};
const handleShowHighScores = () => {
setShowHighScores(true);
};
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-center relative space-y-6"
>
<RoundHeader
successfulRounds={currentScore}
onBack={onBack}
showConfirmDialog={showConfirmDialog}
setShowConfirmDialog={handleSetShowConfirmDialog}
/>
<WordDisplay currentWord={currentWord} />
<GuessDescription sentence={sentence} aiGuess={aiGuess} />
<GuessResult aiGuess={aiGuess} isCorrect={isGuessCorrect()} />
<ActionButtons
isCorrect={isGuessCorrect()}
onNextRound={onNextRound}
onPlayAgain={onPlayAgain}
currentScore={currentScore}
avgWordsPerRound={avgWordsPerRound}
sessionId={sessionId}
currentTheme={currentTheme}
onScoreSubmitted={handleScoreSubmitted}
onShowHighScores={handleShowHighScores}
/>
<Dialog open={showHighScores} onOpenChange={setShowHighScores}>
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
<HighScoreBoard
currentScore={currentScore}
avgWordsPerRound={avgWordsPerRound}
onClose={() => setShowHighScores(false)}
onPlayAgain={onPlayAgain}
sessionId={sessionId}
showThemeFilter={false}
initialTheme={currentTheme}
onScoreSubmitted={handleScoreSubmitted}
/>
</DialogContent>
</Dialog>
</motion.div>
);
}; |