help dialog

src/components/game/WelcomeScreen.tsx

@@ -2,7 +2,8 @@ import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
 import { useState } from "react";
 import { HighScoreBoard } from "../HighScoreBoard";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Card, CardContent } from "@/components/ui/card";
 
 interface WelcomeScreenProps {
   onStart: () => void;
@@ -10,20 +11,46 @@ interface WelcomeScreenProps {
 
 export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
   const [showHighScores, setShowHighScores] = useState(false);
+  const [showHowToPlay, setShowHowToPlay] = useState(false);
+
+  const HowToPlayContent = () => (
+    <div className="space-y-6">
+      <div className="grid gap-4 text-gray-600">
+        <div>
+          <h3 className="font-medium text-gray-800">The Setup</h3>
+          <p>You'll work with two AIs: one as your partner giving clues, and another trying to guess the word.</p>
+        </div>
+        <div>
+          <h3 className="font-medium text-gray-800">Your Goal</h3>
+          <p>Help the AI guess the secret word using one-word clues. Each correct guess earns you a point!</p>
+        </div>
+        <div>
+          <h3 className="font-medium text-gray-800">The Rules</h3>
+          <ul className="list-disc list-inside space-y-1">
+            <li>One word per clue only</li>
+            <li>No parts of the secret word or translations</li>
+            <li>Clues must relate to the word (be creative!)</li>
+            <li>No spelling out the answer</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
 
   return (
     <>
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        className="text-center"
+        className="max-w-2xl mx-auto text-center space-y-8"
       >
-        <h1 className="mb-6 text-4xl font-bold text-gray-900">Think in Sync</h1>
-        <p className="mb-8 text-gray-600">
-          This game is a variation of a classical childrens game.
-          You will be given a secret word. Your goal is to describe this secret word so that an AI can guess it.
-          However, you are only allowed to say one word at the time, taking turns with another AI.
-        </p>
+        <div>
+          <h1 className="mb-4 text-4xl font-bold text-gray-900">Think in Sync</h1>
+          <p className="text-lg text-gray-600">
+            A modern twist on a classic children's game where you team up with AI to guess secret words!
+          </p>
+        </div>
+
         <div className="space-y-4">
           <Button
             onClick={onStart}
@@ -31,13 +58,22 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
           >
             Start Game ⏎
           </Button>
-          <Button
-            onClick={() => setShowHighScores(true)}
-            variant="outline"
-            className="w-full text-lg"
-          >
-            View Leaderboard 🏆
-          </Button>
+          <div className="grid grid-cols-2 gap-4">
+            <Button
+              onClick={() => setShowHowToPlay(true)}
+              variant="outline"
+              className="text-lg"
+            >
+              How to Play 📖
+            </Button>
+            <Button
+              onClick={() => setShowHighScores(true)}
+              variant="outline"
+              className="text-lg"
+            >
+              Leaderboard 🏆
+            </Button>
+          </div>
         </div>
       </motion.div>
 
@@ -51,6 +87,15 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
           />
         </DialogContent>
       </Dialog>
+
+      <Dialog open={showHowToPlay} onOpenChange={setShowHowToPlay}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-xl font-semibold text-primary">How to Play</DialogTitle>
+          </DialogHeader>
+          <HowToPlayContent />
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
+};