File size: 3,563 Bytes
8725cc4 a87b7db 683d2d2 831f7e7 8725cc4 a87b7db 683d2d2 831f7e7 a87b7db 8725cc4 a87b7db 683d2d2 8725cc4 831f7e7 683d2d2 831f7e7 683d2d2 831f7e7 683d2d2 a87b7db 831f7e7 a87b7db 683d2d2 831f7e7 683d2d2 831f7e7 683d2d2 a87b7db 683d2d2 831f7e7 683d2d2 831f7e7 683d2d2 a87b7db 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 |
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { useState } from "react";
import { HighScoreBoard } from "../HighScoreBoard";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { LanguageSelector } from "./LanguageSelector";
import { useTranslation } from "@/hooks/useTranslation";
import { useContext } from "react";
import { LanguageContext } from "@/contexts/LanguageContext";
interface WelcomeScreenProps {
onStart: () => void;
}
export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
const [showHighScores, setShowHighScores] = useState(false);
const [showHowToPlay, setShowHowToPlay] = useState(false);
const t = useTranslation();
const { language } = useContext(LanguageContext);
return (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="max-w-2xl mx-auto text-center space-y-8"
>
<LanguageSelector />
<div>
<h1 className="mb-4 text-4xl font-bold text-gray-900">{t.welcome.title}</h1>
<p className="text-lg text-gray-600">
{t.welcome.subtitle}
</p>
</div>
<div className="space-y-4">
<Button
onClick={onStart}
className="w-full bg-primary text-lg hover:bg-primary/90"
>
{t.welcome.startButton} ⏎
</Button>
<div className="grid grid-cols-2 gap-4">
<Button
onClick={() => setShowHowToPlay(true)}
variant="outline"
className="text-lg"
>
{t.welcome.howToPlay} 📖
</Button>
<Button
onClick={() => setShowHighScores(true)}
variant="outline"
className="text-lg"
>
{t.welcome.leaderboard} 🏆
</Button>
</div>
</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>
<Dialog open={showHowToPlay} onOpenChange={setShowHowToPlay}>
<DialogContent className="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="text-xl font-semibold text-primary">{t.welcome.howToPlay}</DialogTitle>
</DialogHeader>
<div className="space-y-6">
<div className="grid gap-4 text-gray-600">
<div>
<h3 className="font-medium text-gray-800">{t.howToPlay.setup.title}</h3>
<p>{t.howToPlay.setup.description}</p>
</div>
<div>
<h3 className="font-medium text-gray-800">{t.howToPlay.goal.title}</h3>
<p>{t.howToPlay.goal.description}</p>
</div>
<div>
<h3 className="font-medium text-gray-800">{t.howToPlay.rules.title}</h3>
<ul className="list-disc list-inside space-y-1">
{t.howToPlay.rules.items.map((rule, index) => (
<li key={index}>{rule}</li>
))}
</ul>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</>
);
}; |