File size: 2,627 Bytes
8725cc4 5cd06ed 6864389 8725cc4 a64b653 8725cc4 0ce34cb 444233f aeb9637 a64b653 8606349 65676ec 8725cc4 a64b653 8725cc4 0ce34cb 444233f aeb9637 a64b653 8606349 65676ec 8725cc4 47fea40 831f7e7 5cd06ed 8606349 47fea40 a64b653 47fea40 a64b653 35af7d4 8725cc4 5835ecd 8725cc4 8606349 5cd06ed 6864389 5cd06ed 6864389 81e6964 6864389 8606349 65676ec 8606349 a64b653 65676ec a64b653 47fea40 6864389 a64b653 6864389 aeb9637 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 |
import { motion } from "framer-motion";
import { useState, useEffect } from "react";
import { useTranslation } from "@/hooks/useTranslation";
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";
interface GuessDisplayProps {
currentScore: number;
currentWord: string;
sentence: string[];
aiGuess: string;
avgWordsPerRound: number;
sessionId: string;
currentTheme: string;
onNextRound: () => void;
onGameReview: () => void;
onBack?: () => void;
normalizeWord: (word: string) => string;
aiModel?: string;
}
export const GuessDisplay = ({
currentScore,
currentWord,
sentence,
aiGuess,
avgWordsPerRound,
sessionId,
currentTheme,
onNextRound,
onBack,
onGameReview,
normalizeWord,
aiModel,
}: GuessDisplayProps) => {
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const t = useTranslation();
const handleSetShowConfirmDialog = (show: boolean) => {
setShowConfirmDialog(show);
};
const isGuessCorrect = () => normalizeWord(aiGuess) === normalizeWord(currentWord);
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === 'Enter') {
if (isGuessCorrect()) {
onNextRound();
} else {
onGameReview();
}
}
};
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
}, [isGuessCorrect, onNextRound, onGameReview]);
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} model={aiModel} />
<GuessResult
aiGuess={aiGuess}
isCorrect={isGuessCorrect()}
onNextRound={onNextRound}
model={aiModel}
/>
<ActionButtons
isCorrect={isGuessCorrect()}
onNextRound={onNextRound}
onGameReview={onGameReview}
currentScore={currentScore}
avgWordsPerRound={avgWordsPerRound}
sessionId={sessionId}
currentTheme={currentTheme}
/>
</motion.div>
);
}; |