File size: 3,718 Bytes
8725cc4 0ce34cb 831f7e7 8725cc4 0ce34cb 8725cc4 0ce34cb 8725cc4 0ce34cb 831f7e7 8725cc4 81e6964 8725cc4 81e6964 8725cc4 81e6964 0ce34cb 831f7e7 0ce34cb 831f7e7 0ce34cb 831f7e7 0ce34cb 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 117 118 119 |
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";
import { useTranslation } from "@/hooks/useTranslation";
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);
const t = useTranslation();
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-center relative"
>
<div className="absolute right-0 top-0 bg-primary/10 px-3 py-1 rounded-lg">
<span className="text-sm font-medium text-primary">
{t.game.round} {currentScore + 1}
</span>
</div>
<h2 className="mb-4 text-2xl font-semibold text-gray-900">Think in Sync</h2>
<div>
<p className="text-sm text-gray-600 mb-1">{t.guess.goalDescription}</p>
<div className="mb-6 overflow-hidden rounded-lg bg-secondary/10">
<p className="p-4 text-2xl font-bold tracking-wider text-secondary">
{currentWord}
</p>
</div>
</div>
<div className="space-y-4">
<div>
<p className="text-sm text-gray-600 mb-1">{t.guess.providedDescription}</p>
<div className="rounded-lg bg-gray-50">
<p className="p-4 text-2xl tracking-wider text-gray-800">
{sentence.join(" ")}
</p>
</div>
</div>
<div>
<p className="text-sm text-gray-600 mb-1">{t.guess.aiGuessedDescription}</p>
<div className={`rounded-lg p-4 ${isGuessCorrect() ? 'bg-green-50' : 'bg-red-50'}`}>
<p className={`text-2xl font-bold tracking-wider ${isGuessCorrect() ? 'text-green-600' : 'text-red-600'}`}>
{aiGuess}
</p>
</div>
</div>
</div>
<div className="mt-6 flex flex-col gap-4">
{isGuessCorrect() ? (
<Button
onClick={onNextRound}
className="w-full bg-primary text-lg hover:bg-primary/90"
>
{t.guess.nextRound} ⏎
</Button>
) : (
<>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button
className="w-full bg-secondary text-lg hover:bg-secondary/90"
>
{t.guess.viewLeaderboard} 🏆
</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"
>
{t.guess.playAgain} ⏎
</Button>
</>
)}
</div>
</motion.div>
);
}; |