Felix Zieger
commited on
Commit
·
fc6c570
1
Parent(s):
2d83648
feedback
Browse files
src/components/game/WelcomeScreen.tsx
CHANGED
@@ -8,15 +8,18 @@ import { ContestSection } from "./welcome/ContestSection";
|
|
8 |
import { HuggingFaceLink } from "./welcome/HuggingFaceLink";
|
9 |
import { MainActions } from "./welcome/MainActions";
|
10 |
import { HowToPlayDialog } from "./welcome/HowToPlayDialog";
|
|
|
|
|
11 |
|
12 |
interface WelcomeScreenProps {
|
13 |
onStartDaily: () => void;
|
14 |
onStartNew: () => void;
|
15 |
}
|
16 |
|
17 |
-
export const WelcomeScreen = ({ onStartDaily
|
18 |
const [showHighScores, setShowHighScores] = useState(false);
|
19 |
const [showHowToPlay, setShowHowToPlay] = useState(false);
|
|
|
20 |
const t = useTranslation();
|
21 |
|
22 |
useEffect(() => {
|
@@ -37,7 +40,6 @@ export const WelcomeScreen = ({ onStartDaily: onStartDaily, onStartNew: onStartN
|
|
37 |
animate={{ opacity: 1 }}
|
38 |
className="max-w-2xl mx-auto text-center space-y-8"
|
39 |
>
|
40 |
-
|
41 |
<div className="relative">
|
42 |
<h1 className="mb-4 text-4xl font-bold text-gray-900">{t.welcome.title}</h1>
|
43 |
<div className="absolute top-0 right-0">
|
@@ -63,18 +65,25 @@ export const WelcomeScreen = ({ onStartDaily: onStartDaily, onStartNew: onStartN
|
|
63 |
className="max-w-2xl mx-auto text-center mt-8"
|
64 |
>
|
65 |
<div className="mt-12 text-sm text-gray-500 space-y-2">
|
66 |
-
<
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
<
|
74 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
75 |
</div>
|
76 |
-
</motion.div
|
77 |
-
|
78 |
|
79 |
<Dialog open={showHighScores} onOpenChange={setShowHighScores}>
|
80 |
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
|
@@ -89,6 +98,11 @@ export const WelcomeScreen = ({ onStartDaily: onStartDaily, onStartNew: onStartN
|
|
89 |
open={showHowToPlay}
|
90 |
onOpenChange={setShowHowToPlay}
|
91 |
/>
|
|
|
|
|
|
|
|
|
|
|
92 |
</>
|
93 |
);
|
94 |
-
};
|
|
|
8 |
import { HuggingFaceLink } from "./welcome/HuggingFaceLink";
|
9 |
import { MainActions } from "./welcome/MainActions";
|
10 |
import { HowToPlayDialog } from "./welcome/HowToPlayDialog";
|
11 |
+
import { CreditsDialog } from "./welcome/CreditsDialog";
|
12 |
+
import { Mail } from "lucide-react";
|
13 |
|
14 |
interface WelcomeScreenProps {
|
15 |
onStartDaily: () => void;
|
16 |
onStartNew: () => void;
|
17 |
}
|
18 |
|
19 |
+
export const WelcomeScreen = ({ onStartDaily, onStartNew }: WelcomeScreenProps) => {
|
20 |
const [showHighScores, setShowHighScores] = useState(false);
|
21 |
const [showHowToPlay, setShowHowToPlay] = useState(false);
|
22 |
+
const [showCredits, setShowCredits] = useState(false);
|
23 |
const t = useTranslation();
|
24 |
|
25 |
useEffect(() => {
|
|
|
40 |
animate={{ opacity: 1 }}
|
41 |
className="max-w-2xl mx-auto text-center space-y-8"
|
42 |
>
|
|
|
43 |
<div className="relative">
|
44 |
<h1 className="mb-4 text-4xl font-bold text-gray-900">{t.welcome.title}</h1>
|
45 |
<div className="absolute top-0 right-0">
|
|
|
65 |
className="max-w-2xl mx-auto text-center mt-8"
|
66 |
>
|
67 |
<div className="mt-12 text-sm text-gray-500 space-y-2">
|
68 |
+
<div className="flex justify-center items-center gap-4">
|
69 |
+
<button
|
70 |
+
onClick={() => setShowCredits(true)}
|
71 |
+
className="text-primary hover:text-primary/80 transition-colors"
|
72 |
+
>
|
73 |
+
Made by M1X
|
74 |
+
</button>
|
75 |
+
<span>•</span>
|
76 |
+
<a
|
77 |
+
href="mailto:[email protected]"
|
78 |
+
className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
|
79 |
+
title="Send us feedback"
|
80 |
+
>
|
81 |
+
<Mail className="w-4 h-4" />
|
82 |
+
<span>Feedback</span>
|
83 |
+
</a>
|
84 |
+
</div>
|
85 |
</div>
|
86 |
+
</motion.div>
|
|
|
87 |
|
88 |
<Dialog open={showHighScores} onOpenChange={setShowHighScores}>
|
89 |
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
|
|
|
98 |
open={showHowToPlay}
|
99 |
onOpenChange={setShowHowToPlay}
|
100 |
/>
|
101 |
+
|
102 |
+
<CreditsDialog
|
103 |
+
open={showCredits}
|
104 |
+
onOpenChange={setShowCredits}
|
105 |
+
/>
|
106 |
</>
|
107 |
);
|
108 |
+
};
|
src/components/game/welcome/CreditsDialog.tsx
ADDED
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
2 |
+
|
3 |
+
interface CreditsDialogProps {
|
4 |
+
open: boolean;
|
5 |
+
onOpenChange: (open: boolean) => void;
|
6 |
+
}
|
7 |
+
|
8 |
+
export const CreditsDialog = ({ open, onOpenChange }: CreditsDialogProps) => {
|
9 |
+
return (
|
10 |
+
<Dialog open={open} onOpenChange={onOpenChange}>
|
11 |
+
<DialogContent className="max-w-md">
|
12 |
+
<h2 className="text-2xl font-bold mb-4">Credits</h2>
|
13 |
+
<div className="space-y-2 text-gray-600">
|
14 |
+
<p>
|
15 |
+
Made with ❤️ by the M1X team:
|
16 |
+
</p>
|
17 |
+
<div className="space-y-1">
|
18 |
+
<a href="https://www.linkedin.com/in/sandro-mikautadze/" target="_blank" rel="noopener noreferrer" className="block text-primary hover:underline">Sandro</a>
|
19 |
+
<a href="https://www.linkedin.com/in/alessandro-pranzo/" target="_blank" rel="noopener noreferrer" className="block text-primary hover:underline">Alessandro</a>
|
20 |
+
<a href="https://www.linkedin.com/in/mattia-martino-528363225/" target="_blank" rel="noopener noreferrer" className="block text-primary hover:underline">Mattia</a>
|
21 |
+
<a href="https://www.linkedin.com/in/michael-sheroubi/" target="_blank" rel="noopener noreferrer" className="block text-primary hover:underline">Michael</a>
|
22 |
+
<a href="https://www.linkedin.com/in/michael-sheroubi/" target="_blank" rel="noopener noreferrer" className="block text-primary hover:underline">Emiliano</a>
|
23 |
+
<a href="https://felixzieger.de/" target="_blank" rel="noopener noreferrer" className="block text-primary hover:underline">Felix</a>
|
24 |
+
</div>
|
25 |
+
</div>
|
26 |
+
</DialogContent>
|
27 |
+
</Dialog>
|
28 |
+
);
|
29 |
+
};
|