Refactor card options

Replace checkboxes with "Present" and "Absent" options. Disable "Reveal Number" until an option is selected.

src/components/BinarySearchTrick.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-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';
@@ -13,7 +12,7 @@ interface BinarySearchTrickProps {
 }
 
 const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) => {
-  const [selectedCards, setSelectedCards] = useState<number[]>([]);
+  const [cardStates, setCardStates] = useState<Record<number, 'unselected' | 'present' | 'absent'>>({});
   const [result, setResult] = useState<number | null>(null);
   const [showResult, setShowResult] = useState(false);
   const [isOneByOne, setIsOneByOne] = useState(false);
@@ -76,7 +75,7 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
   const handleModeToggle = (checked: boolean) => {
     setIsOneByOne(checked);
     setCurrentCardIndex(0);
-    setSelectedCards([]);
+    setCardStates({});
     setShowResult(false);
   };
 
@@ -89,29 +88,33 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
     setCurrentCardIndex(prev => Math.min(cards.length - 1, prev + 1));
   };
 
-  const handleCardToggle = (cardId: number) => {
-    setSelectedCards(prev => 
-      prev.includes(cardId) 
-        ? prev.filter(id => id !== cardId)
-        : [...prev, cardId]
-    );
+  const handleCardSelection = (cardId: number, state: 'present' | 'absent') => {
+    setCardStates(prev => ({
+      ...prev,
+      [cardId]: state
+    }));
     setShowResult(false);
   };
 
   const calculateResult = () => {
-    const sum = selectedCards.reduce((acc, cardId) => acc + cardId, 0);
+    const sum = Object.entries(cardStates)
+      .filter(([_, state]) => state === 'present')
+      .reduce((acc, [cardId, _]) => acc + parseInt(cardId), 0);
     setResult(sum);
     setShowResult(true);
   };
 
   const reset = () => {
-    setSelectedCards([]);
+    setCardStates({});
     setResult(null);
     setShowResult(false);
     setCurrentCardIndex(0);
     setCards(generateCards()); // Regenerate with new randomized order
   };
 
+  // Check if at least one card has been selected (present or absent)
+  const hasAnySelection = Object.values(cardStates).some(state => state !== 'unselected');
+
   // Get cards to display based on mode
   const getDisplayCards = () => {
     if (isOneByOne) {
@@ -232,25 +235,40 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
       )}
 
       <div className={`grid gap-4 ${isOneByOne ? 'grid-cols-1 justify-items-center' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'}`}>
-        {getDisplayCards().map((card) => (
+        {getDisplayCards().map((card) => {
+          const cardState = cardStates[card.id] || 'unselected';
+          return (
             <Card 
               key={card.id} 
-            className={`cursor-pointer transition-all duration-500 hover:shadow-lg animate-fade-in ${
-              selectedCards.includes(card.id) 
-                ? 'ring-2 ring-primary bg-primary/5' 
+              className={`transition-all duration-500 hover:shadow-lg animate-fade-in ${
+                cardState === 'present' 
+                  ? 'ring-2 ring-green-500 bg-green-50' 
+                  : cardState === 'absent'
+                  ? 'ring-2 ring-red-500 bg-red-50'
                   : 'hover:bg-muted/50'
               } ${isOneByOne ? 'max-w-md w-full' : ''}`}
-            onClick={() => handleCardToggle(card.id)}
             >
               <CardHeader className={`${isOneByOne ? 'pb-4' : 'pb-2'}`}>
                 <div className="flex items-center justify-between">
                   <CardTitle className={`font-bold text-primary ${isOneByOne ? 'text-3xl' : 'text-xl'}`}>
                     {card.id}
                   </CardTitle>
-                <Checkbox 
-                  checked={selectedCards.includes(card.id)}
-                  onChange={() => {}} // Controlled by card click
-                />
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      variant={cardState === 'present' ? 'default' : 'outline'}
+                      onClick={() => handleCardSelection(card.id, 'present')}
+                    >
+                      Present
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant={cardState === 'absent' ? 'destructive' : 'outline'}
+                      onClick={() => handleCardSelection(card.id, 'absent')}
+                    >
+                      Absent
+                    </Button>
+                  </div>
                 </div>
               </CardHeader>
               <CardContent>
@@ -266,14 +284,15 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
                 </div>
               </CardContent>
             </Card>
-        ))}
+          );
+        })}
       </div>
 
       <div className="flex flex-col items-center space-y-4">
         <div className="flex gap-4">
           <Button 
             onClick={calculateResult}
-            disabled={selectedCards.length === 0}
+            disabled={!hasAnySelection}
             size="lg"
             className="min-w-32"
           >