File size: 1,837 Bytes
8725cc4 a87b7db 8725cc4 a87b7db 8725cc4 a87b7db 8725cc4 a87b7db 8725cc4 0ce34cb |
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 |
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { useState } from "react";
import { HighScoreBoard } from "../HighScoreBoard";
import { Dialog, DialogContent } from "@/components/ui/dialog";
interface WelcomeScreenProps {
onStart: () => void;
}
export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
const [showHighScores, setShowHighScores] = useState(false);
return (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-center"
>
<h1 className="mb-6 text-4xl font-bold text-gray-900">Think in Sync</h1>
<p className="mb-8 text-gray-600">
This game is a variation of a classical childrens game.
You will be given a secret word. Your goal is to describe this secret word so that an AI can guess it.
However, you are only allowed to say one word at the time, taking turns with another AI.
</p>
<div className="space-y-4">
<Button
onClick={onStart}
className="w-full bg-primary text-lg hover:bg-primary/90"
>
Start Game ⏎
</Button>
<Button
onClick={() => setShowHighScores(true)}
variant="outline"
className="w-full text-lg"
>
View Leaderboard 🏆
</Button>
</div>
</motion.div>
<Dialog open={showHighScores} onOpenChange={setShowHighScores}>
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
<HighScoreBoard
currentScore={0}
avgWordsPerRound={0}
onClose={() => setShowHighScores(false)}
onPlayAgain={onStart}
/>
</DialogContent>
</Dialog>
</>
);
};
|