File size: 2,930 Bytes
8725cc4 0ce34cb 8725cc4 0ce34cb 8725cc4 0ce34cb 8725cc4 0ce34cb 8725cc4 0ce34cb 8725cc4 |
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 |
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import {
Dialog,
DialogContent,
DialogTrigger,
} from "@/components/ui/dialog";
import { HighScoreBoard } from "@/components/HighScoreBoard";
import { useState } from "react";
interface GuessDisplayProps {
sentence: string[];
aiGuess: string;
currentWord: string;
onNextRound: () => void;
onPlayAgain: () => void;
currentScore: number;
avgWordsPerRound: number;
}
export const GuessDisplay = ({
sentence,
aiGuess,
currentWord,
onNextRound,
onPlayAgain,
currentScore,
avgWordsPerRound,
}: GuessDisplayProps) => {
const isGuessCorrect = () => aiGuess.toLowerCase() === currentWord.toLowerCase();
const [isDialogOpen, setIsDialogOpen] = useState(false);
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-center"
>
<h2 className="mb-4 text-2xl font-semibold text-gray-900">AI's Guess</h2>
<div className="mb-6 rounded-lg bg-gray-50 p-4">
<p className="mb-4 text-lg text-gray-800">
Your sentence: {sentence.join(" ")}
</p>
<p className="text-xl font-bold text-primary">AI guessed: {aiGuess}</p>
<p className="mt-4 text-lg">
{isGuessCorrect() ? (
<span className="text-green-600">
Correct guess! 🎉 Ready for the next round? Press Enter
</span>
) : (
<span className="text-red-600">
Game Over! Press Enter to play again
</span>
)}
</p>
</div>
<div className="flex flex-col gap-4">
{isGuessCorrect() ? (
<Button
onClick={onNextRound}
className="w-full bg-primary text-lg hover:bg-primary/90"
>
Next Round ⏎
</Button>
) : (
<>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button
className="w-full bg-secondary text-lg hover:bg-secondary/90"
>
View High Scores
</Button>
</DialogTrigger>
<DialogContent className="max-w-md bg-white">
<HighScoreBoard
currentScore={currentScore}
avgWordsPerRound={avgWordsPerRound}
onClose={() => setIsDialogOpen(false)}
onPlayAgain={() => {
setIsDialogOpen(false);
onPlayAgain();
}}
/>
</DialogContent>
</Dialog>
<Button
onClick={onPlayAgain}
className="w-full bg-primary text-lg hover:bg-primary/90"
>
Play Again ⏎
</Button>
</>
)}
</div>
</motion.div>
);
}; |