File size: 3,693 Bytes
e9a2815 8725cc4 81e6964 e9a2815 8725cc4 45444c0 8725cc4 8ec33d8 81e6964 8725cc4 81e6964 5835ecd e9a2815 8ec33d8 831f7e7 8725cc4 5cd06ed e9a2815 8ec33d8 e9a2815 8ec33d8 8725cc4 e9a2815 34f302f 5cd06ed e9a2815 81e6964 8725cc4 81e6964 8725cc4 e9a2815 5cd06ed e9a2815 5cd06ed e9a2815 8ec33d8 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 116 117 118 119 120 |
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;
normalizeWord: (word: string) => string; // Updated type definition
onBack?: () => void;
}
export const SentenceBuilder = ({
currentWord,
successfulRounds,
sentence,
playerInput,
isAiThinking,
onInputChange,
onSubmitWord,
onMakeGuess,
normalizeWord,
onBack,
}: SentenceBuilderProps) => {
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const [hasMultipleWords, setHasMultipleWords] = useState(false);
const [containsTargetWord, setContainsTargetWord] = useState(false);
const [isTooLong, setIsTooLong] = useState(false);
const t = useTranslation();
console.log("SentenceBuilder - Rendering with showConfirmDialog:", showConfirmDialog);
const validateInput = (input: string) => {
setHasMultipleWords(input.trim().split(/\s+/).length > 1);
setContainsTargetWord(
normalizeWord(input).includes(normalizeWord(currentWord))
);
setIsTooLong(input.trim().length >= 30);
};
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}
isTooLong={isTooLong}
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>
);
}; |