File size: 2,842 Bytes
8725cc4 a64b653 a87b7db aeb9637 831f7e7 aeb9637 8725cc4 a64b653 8725cc4 a64b653 a87b7db 683d2d2 831f7e7 a87b7db a64b653 8725cc4 a87b7db 683d2d2 8725cc4 a64b653 831f7e7 a64b653 683d2d2 831f7e7 683d2d2 a64b653 aeb9637 a64b653 8ec33d8 aeb9637 ac04e03 aeb9637 ac04e03 aeb9637 ac04e03 a87b7db aeb9637 a87b7db 683d2d2 a64b653 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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
import { motion } from "framer-motion";
import { useEffect, 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 {
onStartDaily: () => void;
onStartNew: () => void;
}
export const WelcomeScreen = ({ onStartDaily: onStartDaily, onStartNew: onStartNew }: WelcomeScreenProps) => {
const [showHighScores, setShowHighScores] = useState(false);
const [showHowToPlay, setShowHowToPlay] = useState(false);
const t = useTranslation();
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === 'Enter') {
onStartDaily()
}
};
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
}, [onStartDaily]);
return (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="max-w-2xl mx-auto text-center space-y-8"
>
<div className="relative">
<h1 className="mb-4 text-4xl font-bold text-gray-900">{t.welcome.title}</h1>
<div className="absolute top-0 right-0">
<LanguageSelector />
</div>
<p className="text-lg text-gray-600">
{t.welcome.subtitle}
</p>
</div>
<MainActions
onStartDaily={onStartDaily}
onStartNew={onStartNew}
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)}
/>
</DialogContent>
</Dialog>
<HowToPlayDialog
open={showHowToPlay}
onOpenChange={setShowHowToPlay}
/>
</>
);
};
|