Refine card reveal in one-by-one mode

Make one card visible at a time in response to user input in one-by-one mode.

src/components/BinarySearchTrick.tsx

@@ -5,7 +5,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
-import { HelpCircle, RefreshCw } from 'lucide-react';
+import { HelpCircle, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react';
 import SocialShare from '@/components/SocialShare';
 
 interface BinarySearchTrickProps {
@@ -17,7 +17,7 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
   const [result, setResult] = useState<number | null>(null);
   const [showResult, setShowResult] = useState(false);
   const [isOneByOne, setIsOneByOne] = useState(false);
-  const [visibleCards, setVisibleCards] = useState<number[]>([]);
+  const [currentCardIndex, setCurrentCardIndex] = useState(0);
   const [cards, setCards] = useState<Array<{id: number; title: string; numbers: number[]}>>([]);
 
   // Function to shuffle array
@@ -70,23 +70,23 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
   // Initialize cards on component mount
   useEffect(() => {
     setCards(generateCards());
-    setVisibleCards([16, 8, 4, 2, 1]); // All cards visible by default
   }, []);
 
   // Handle mode toggle
   const handleModeToggle = (checked: boolean) => {
     setIsOneByOne(checked);
-    if (checked) {
-      // Start one-by-one mode - show first card
-      setVisibleCards([16]);
-      setTimeout(() => setVisibleCards(prev => [...prev, 8]), 500);
-      setTimeout(() => setVisibleCards(prev => [...prev, 4]), 1000);
-      setTimeout(() => setVisibleCards(prev => [...prev, 2]), 1500);
-      setTimeout(() => setVisibleCards(prev => [...prev, 1]), 2000);
-    } else {
-      // Show all cards immediately
-      setVisibleCards([16, 8, 4, 2, 1]);
-    }
+    setCurrentCardIndex(0);
+    setSelectedCards([]);
+    setShowResult(false);
+  };
+
+  // Navigation functions for one-by-one mode
+  const goToPreviousCard = () => {
+    setCurrentCardIndex(prev => Math.max(0, prev - 1));
+  };
+
+  const goToNextCard = () => {
+    setCurrentCardIndex(prev => Math.min(cards.length - 1, prev + 1));
   };
 
   const handleCardToggle = (cardId: number) => {
@@ -108,6 +108,16 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
     setSelectedCards([]);
     setResult(null);
     setShowResult(false);
+    setCurrentCardIndex(0);
+    setCards(generateCards()); // Regenerate with new randomized order
+  };
+
+  // Get cards to display based on mode
+  const getDisplayCards = () => {
+    if (isOneByOne) {
+      return cards.length > 0 ? [cards[currentCardIndex]] : [];
+    }
+    return cards;
   };
 
   return (
@@ -192,10 +202,37 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
         </CardContent>
       </Card>
 
+      {/* Navigation controls for one-by-one mode */}
+      {isOneByOne && cards.length > 0 && (
+        <div className="flex items-center justify-center gap-4 py-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={goToPreviousCard}
+            disabled={currentCardIndex === 0}
+          >
+            <ChevronLeft className="w-4 h-4 mr-1" />
+            Previous
+          </Button>
+          
+          <span className="text-sm text-muted-foreground px-4">
+            Card {currentCardIndex + 1} of {cards.length}
+          </span>
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={goToNextCard}
+            disabled={currentCardIndex === cards.length - 1}
+          >
+            Next
+            <ChevronRight className="w-4 h-4 ml-1" />
+          </Button>
+        </div>
+      )}
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
-        {cards
-          .filter(card => visibleCards.includes(card.id))
-          .map((card) => (
+        {getDisplayCards().map((card) => (
           <Card 
             key={card.id} 
             className={`cursor-pointer transition-all duration-500 hover:shadow-lg animate-fade-in ${