Improve Zeckendorf Search Trick: label cards 1-8, add spoiler mode with highlights, use emoji buttons

src/components/ZeckendorfSearchTrick.tsx

@@ -57,6 +57,7 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
   const [showResult, setShowResult] = useState(false);
   const [isOneByOne, setIsOneByOne] = useState(false);
   const [isRandomized, setIsRandomized] = useState(true);
+  const [isSpoiler, setIsSpoiler] = useState(false);
   const [currentCardIndex, setCurrentCardIndex] = useState(0);
   const [cards, setCards] = useState<Array<{id: number; title: string; numbers: number[]}>>([]);
 
@@ -72,7 +73,7 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
 
   // Generate cards with optional randomization
   const generateCards = () => {
-    const baseCards = FIBONACCI_NUMBERS.map(fib => {
+    const baseCards = FIBONACCI_NUMBERS.map((fib, index) => {
       const numbers: number[] = [];
       // Check numbers from 1 to 33 to see which ones contain this Fibonacci number
       for (let i = 1; i <= 33; i++) {
@@ -83,7 +84,7 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
       
       return {
         id: fib,
-        title: `Card ${fib}`,
+        title: `Card ${index + 1}`,
         numbers: numbers
       };
     });
@@ -116,6 +117,11 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
     setCurrentCardIndex(0);
   };
 
+  // Handle spoiler toggle
+  const handleSpoilerToggle = (checked: boolean) => {
+    setIsSpoiler(checked);
+  };
+
   // Navigation functions for one-by-one mode
   const goToPreviousCard = () => {
     setCurrentCardIndex(prev => Math.max(0, prev - 1));
@@ -252,6 +258,15 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
                 <Label htmlFor="randomized">Randomized order</Label>
               </div>
               
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="spoiler"
+                  checked={isSpoiler}
+                  onCheckedChange={handleSpoilerToggle}
+                />
+                <Label htmlFor="spoiler">Spoiler</Label>
+              </div>
+              
               <Button onClick={reset} variant="outline" size="sm">
                 <RefreshCw className="w-4 h-4 mr-2" />
                 Reset
@@ -298,7 +313,14 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
             <CardContent className="pt-0">
               <div className="grid grid-cols-4 gap-1 text-xs">
                 {card.numbers.map(num => (
-                  <div key={num} className="bg-muted p-1 text-center rounded">
+                  <div 
+                    key={num} 
+                    className={`p-1 text-center rounded ${
+                      isSpoiler && num === card.id 
+                        ? 'bg-yellow-200 font-bold' 
+                        : 'bg-muted'
+                    }`}
+                  >
                     {num}
                   </div>
                 ))}
@@ -311,7 +333,7 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
                   size="sm"
                   className="flex-1"
                 >
-                  Contains my number
+                  ✅
                 </Button>
                 <Button
                   onClick={() => handleCardSelection(card.id, 'absent')}
@@ -319,7 +341,7 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
                   size="sm"
                   className="flex-1"
                 >
-                  Does not contain
+                  ❌
                 </Button>
               </div>
             </CardContent>