File size: 2,379 Bytes
8725cc4 a87b7db aeb9637 831f7e7 aeb9637 8725cc4 a87b7db 683d2d2 831f7e7 a87b7db 8725cc4 a87b7db 683d2d2 8725cc4 831f7e7 683d2d2 831f7e7 683d2d2 831f7e7 683d2d2 aeb9637 8ec33d8 aeb9637 ac04e03 aeb9637 ac04e03 aeb9637 ac04e03 a87b7db aeb9637 a87b7db 683d2d2 aeb9637 a87b7db 8725cc4 aeb9637 |
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 |
import { motion } from "framer-motion";
import { useState } from "react";
import { HighScoreBoard } from "../HighScoreBoard";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { LanguageSelector } from "./LanguageSelector";
import { useTranslation } from "@/hooks/useTranslation";
import { ContestSection } from "./welcome/ContestSection";
import { HuggingFaceLink } from "./welcome/HuggingFaceLink";
import { MainActions } from "./welcome/MainActions";
import { HowToPlayDialog } from "./welcome/HowToPlayDialog";
interface WelcomeScreenProps {
onStart: () => void;
}
export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
const [showHighScores, setShowHighScores] = useState(false);
const [showHowToPlay, setShowHowToPlay] = useState(false);
const t = useTranslation();
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>
<MainActions
onStart={onStart}
onShowHowToPlay={() => setShowHowToPlay(true)}
onShowHighScores={() => setShowHighScores(true)}
/>
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.1 }}
className="max-w-2xl mx-auto text-center mt-8"
>
<ContestSection />
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
className="max-w-2xl mx-auto text-center mt-8"
>
<HuggingFaceLink />
</motion.div>
<Dialog open={showHighScores} onOpenChange={setShowHighScores}>
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
<HighScoreBoard
showThemeFilter={true}
onClose={() => setShowHighScores(false)}
onPlayAgain={onStart}
/>
</DialogContent>
</Dialog>
<HowToPlayDialog
open={showHowToPlay}
onOpenChange={setShowHowToPlay}
/>
</>
);
};
|