File size: 3,475 Bytes
e9a2815 8725cc4 81e6964 e9a2815 8725cc4 81e6964 8725cc4 81e6964 8725cc4 81e6964 5835ecd e9a2815 831f7e7 8725cc4 5cd06ed e9a2815 8725cc4 e9a2815 34f302f 5cd06ed e9a2815 81e6964 8725cc4 81e6964 8725cc4 e9a2815 5cd06ed e9a2815 5cd06ed e9a2815 6864389 e9a2815 81e6964 5cd06ed 81e6964 8725cc4 e9a2815 |
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 |
import { useState } from "react";
import { motion } from "framer-motion";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useTranslation } from "@/hooks/useTranslation";
import { RoundHeader } from "./sentence-builder/RoundHeader";
import { WordDisplay } from "./sentence-builder/WordDisplay";
import { SentenceDisplay } from "./sentence-builder/SentenceDisplay";
import { InputForm } from "./sentence-builder/InputForm";
interface SentenceBuilderProps {
currentWord: string;
successfulRounds: number;
sentence: string[];
playerInput: string;
isAiThinking: boolean;
onInputChange: (value: string) => void;
onSubmitWord: (e: React.FormEvent) => void;
onMakeGuess: () => void;
onBack?: () => void;
}
export const SentenceBuilder = ({
currentWord,
successfulRounds,
sentence,
playerInput,
isAiThinking,
onInputChange,
onSubmitWord,
onMakeGuess,
onBack,
}: SentenceBuilderProps) => {
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const [hasMultipleWords, setHasMultipleWords] = useState(false);
const [containsTargetWord, setContainsTargetWord] = useState(false);
const t = useTranslation();
console.log("SentenceBuilder - Rendering with showConfirmDialog:", showConfirmDialog);
const validateInput = (input: string) => {
setHasMultipleWords(input.trim().split(/\s+/).length > 1);
setContainsTargetWord(
input.toLowerCase().includes(currentWord.toLowerCase())
);
};
const handleInputChange = (value: string) => {
validateInput(value);
onInputChange(value);
};
const handleSetShowConfirmDialog = (show: boolean) => {
console.log("SentenceBuilder - Setting showConfirmDialog to:", show);
setShowConfirmDialog(show);
};
const isValidInput = !playerInput || /^[\p{L} ]+$/u.test(playerInput);
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-center relative"
>
<RoundHeader
successfulRounds={successfulRounds}
onBack={onBack}
showConfirmDialog={showConfirmDialog}
setShowConfirmDialog={handleSetShowConfirmDialog}
/>
<WordDisplay currentWord={currentWord} />
<SentenceDisplay sentence={sentence} />
<InputForm
playerInput={playerInput}
onInputChange={handleInputChange}
onSubmitWord={onSubmitWord}
onMakeGuess={onMakeGuess}
isAiThinking={isAiThinking}
hasMultipleWords={hasMultipleWords}
containsTargetWord={containsTargetWord}
isValidInput={isValidInput}
sentence={sentence}
/>
<AlertDialog open={showConfirmDialog} onOpenChange={handleSetShowConfirmDialog}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t.game.leaveGameTitle}</AlertDialogTitle>
<AlertDialogDescription>
{t.game.leaveGameDescription}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t.game.cancel}</AlertDialogCancel>
<AlertDialogAction onClick={() => onBack?.()}>
{t.game.confirm}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</motion.div>
);
}; |