Add more guessing game modes

Add two new modes to the guessing game: one where the user guesses the number using arbitrary yes/no questions, and another where the computer guesses the number using random, linear, or binary search.

src/components/GuessingGame.tsx

@@ -8,12 +8,15 @@ import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { Brain, User, Trophy, Target, HelpCircle, CheckCircle, XCircle } from 'lucide-react';
 import SocialShare from '@/components/SocialShare';
+import StandardGuessingMode from '@/components/guessing-game/StandardGuessingMode';
+import QuestionGuessingMode from '@/components/guessing-game/QuestionGuessingMode';
 
 interface GuessingGameProps {
   showSocialShare?: boolean;
 }
 
 type GameMode = 'user-guesses' | 'computer-asks';
+type UserGuessingMode = 'standard' | 'questions';
 type ComputerStrategy = 'random' | 'linear' | 'binary';
 type GameState = 'setup' | 'playing' | 'won' | 'lost';
 
@@ -26,6 +29,7 @@ const GuessingGame: React.FC<GuessingGameProps> = ({ showSocialShare = true }) =
   // Game settings
   const [range, setRange] = useState([50]);
   const [gameMode, setGameMode] = useState<GameMode>('user-guesses');
+  const [userGuessingMode, setUserGuessingMode] = useState<UserGuessingMode>('standard');
   const [computerStrategy, setComputerStrategy] = useState<ComputerStrategy>('binary');
   
   // Game state
@@ -383,6 +387,40 @@ const GuessingGame: React.FC<GuessingGameProps> = ({ showSocialShare = true }) =
                 </div>
               </div>
 
+              {/* User Guessing Mode Selection */}
+              {gameMode === 'user-guesses' && (
+                <div className="space-y-4">
+                  <Label className="text-lg font-semibold">Guessing Style</Label>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <Card 
+                      className={`cursor-pointer transition-all ${userGuessingMode === 'standard' ? 'ring-2 ring-accent' : ''}`}
+                      onClick={() => setUserGuessingMode('standard')}
+                    >
+                      <CardContent className="p-4 text-center space-y-2">
+                        <Target className="w-6 h-6 text-accent mx-auto" />
+                        <h4 className="font-semibold">Standard (High/Low)</h4>
+                        <p className="text-sm text-muted-foreground">
+                          Traditional guessing with "too high" or "too low" feedback
+                        </p>
+                      </CardContent>
+                    </Card>
+
+                    <Card 
+                      className={`cursor-pointer transition-all ${userGuessingMode === 'questions' ? 'ring-2 ring-accent' : ''}`}
+                      onClick={() => setUserGuessingMode('questions')}
+                    >
+                      <CardContent className="p-4 text-center space-y-2">
+                        <HelpCircle className="w-6 h-6 text-accent mx-auto" />
+                        <h4 className="font-semibold">Ask Questions</h4>
+                        <p className="text-sm text-muted-foreground">
+                          Ask yes/no questions about mathematical properties
+                        </p>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </div>
+              )}
+
               {/* Computer Strategy Selection */}
               {gameMode === 'computer-asks' && (
                 <div className="space-y-4">
@@ -421,79 +459,30 @@ const GuessingGame: React.FC<GuessingGameProps> = ({ showSocialShare = true }) =
             </div>
           )}
 
-          {gameState === 'playing' && gameMode === 'user-guesses' && (
-            <div className="space-y-6">
-              <div className="text-center space-y-2">
-                <h3 className="text-xl font-semibold">Guess the number between 1 and {maxRange}</h3>
-                <p className="text-muted-foreground">Guesses made: {guesses.length}</p>
-                {feedback && (
-                  <div className={`p-3 rounded-lg ${feedback.includes('Congratulations') ? 'bg-success/10 text-success' : 'bg-muted'}`}>
-                    {feedback}
-                  </div>
-                )}
-              </div>
+          {gameState === 'playing' && gameMode === 'user-guesses' && userGuessingMode === 'standard' && (
+            <StandardGuessingMode
+              maxRange={maxRange}
+              secretNumber={secretNumber!}
+              guesses={guesses}
+              feedback={feedback}
+              validNumbers={validNumbers}
+              userGuess={userGuess}
+              setUserGuess={setUserGuess}
+              onGuess={handleGuess}
+            />
+          )}
 
-              {/* Number Grid Display */}
-              <div className="space-y-4">
-                <h4 className="font-semibold text-center">Click a number or type your guess:</h4>
-                <div className="grid grid-cols-8 sm:grid-cols-10 md:grid-cols-12 lg:grid-cols-16 gap-1 max-h-64 overflow-y-auto p-2 border rounded-lg">
-                  {Array.from({ length: maxRange }, (_, i) => i + 1).map(num => {
-                    const isValid = validNumbers.has(num);
-                    const isGuessed = guesses.includes(num);
-                    
-                    return (
-                      <Button
-                        key={num}
-                        size="sm"
-                        variant={isGuessed ? "default" : isValid ? "outline" : "ghost"}
-                        className={`
-                          h-8 p-1 text-xs
-                          ${!isValid && !isGuessed ? 'opacity-30 cursor-not-allowed text-muted-foreground' : ''}
-                          ${isGuessed ? 'bg-accent text-accent-foreground' : ''}
-                          ${isValid && !isGuessed ? 'hover:bg-accent/10' : ''}
-                        `}
-                        onClick={() => isValid && !isGuessed && handleGuess(num)}
-                        disabled={!isValid || isGuessed}
-                      >
-                        {num}
-                      </Button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div className="flex gap-2">
-                <Input
-                  type="number"
-                  placeholder="Or type your guess"
-                  value={userGuess}
-                  onChange={(e) => setUserGuess(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && handleGuess()}
-                  min={1}
-                  max={maxRange}
-                />
-                <Button onClick={() => handleGuess()} disabled={!userGuess}>
-                  Guess
-                </Button>
-              </div>
-
-              {guesses.length > 0 && (
-                <div className="space-y-2">
-                  <h4 className="font-semibold">Previous Guesses:</h4>
-                  <div className="flex flex-wrap gap-2">
-                    {guesses.map((guess, index) => (
-                      <Badge key={index} variant="outline">
-                        {guess}
-                      </Badge>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <Button onClick={resetGame} variant="outline" className="w-full">
-                New Game
-              </Button>
-            </div>
+          {gameState === 'playing' && gameMode === 'user-guesses' && userGuessingMode === 'questions' && (
+            <QuestionGuessingMode
+              maxRange={maxRange}
+              secretNumber={secretNumber!}
+              guesses={guesses}
+              feedback={feedback}
+              validNumbers={validNumbers}
+              userGuess={userGuess}
+              setUserGuess={setUserGuess}
+              onGuess={handleGuess}
+            />
           )}
 
           {gameState === 'playing' && gameMode === 'computer-asks' && (