File size: 3,989 Bytes
8725cc4 65676ec a87b7db aeb9637 831f7e7 aeb9637 fc6c570 1a45d5d 8725cc4 a64b653 8725cc4 fc6c570 a87b7db 683d2d2 fc6c570 1a45d5d 831f7e7 a87b7db 65676ec 8725cc4 a87b7db 683d2d2 8725cc4 a64b653 831f7e7 a64b653 683d2d2 831f7e7 683d2d2 a64b653 aeb9637 a64b653 ac04e03 aeb9637 ac04e03 2d83648 fc6c570 1a45d5d fc6c570 2d83648 fc6c570 ac04e03 a87b7db aeb9637 a87b7db 683d2d2 a64b653 aeb9637 fc6c570 1a45d5d a87b7db 8725cc4 1a45d5d |
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 120 121 122 123 |
import { motion } from "framer-motion";
import { useState, useEffect } 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";
import { CreditsDialog } from "./welcome/CreditsDialog";
import { Mail } from "lucide-react";
import { StatsDialog } from "./welcome/StatsDialog";
interface WelcomeScreenProps {
onStartDaily: () => void;
onStartNew: () => void;
}
export const WelcomeScreen = ({ onStartDaily, onStartNew }: WelcomeScreenProps) => {
const [showHighScores, setShowHighScores] = useState(false);
const [showHowToPlay, setShowHowToPlay] = useState(false);
const [showCredits, setShowCredits] = useState(false);
const [showStats, setShowStats] = useState(false);
const t = useTranslation();
useEffect(() => {
const handleKeyPress = (event: KeyboardEvent) => {
if (event.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.2 }}
className="max-w-2xl mx-auto text-center mt-8"
>
<div className="mt-12 text-sm text-gray-500 space-y-2">
<div className="flex justify-center items-center gap-4">
<button
onClick={() => setShowCredits(true)}
className="text-primary hover:text-primary/80 transition-colors"
>
Made by M1X
</button>
<span>•</span>
<a
href="mailto:[email protected]"
className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
title="Send us feedback"
>
<Mail className="w-4 h-4" />
<span>Feedback</span>
</a>
<span>•</span>
<button
onClick={() => setShowStats(true)}
className="text-primary hover:text-primary/80 transition-colors"
>
{t.welcome.stats.title}
</button>
</div>
</div>
</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}
/>
<CreditsDialog
open={showCredits}
onOpenChange={setShowCredits}
/>
<StatsDialog
open={showStats}
onOpenChange={setShowStats}
/>
</>
);
};
|