From e37f3ed884aa7d5f9da182b2408a9d8f57266c60 Mon Sep 17 00:00:00 2001
From: Neeldhara Misra <neeldhara.misra@gmail.com>
Date: Tue, 22 Jul 2025 11:38:05 +0530
Subject: [PATCH] Add Zeckendorf Search Magic Trick with improved layout and
 card numbering

---
 src/components/ZeckendorfSearchTrick.tsx | 51 +++++++++++-------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/ZeckendorfSearchTrick.tsx b/src/components/ZeckendorfSearchTrick.tsx
index 8a76c97..d215f31 100644
--- a/src/components/ZeckendorfSearchTrick.tsx
+++ b/src/components/ZeckendorfSearchTrick.tsx
@@ -12,7 +12,7 @@ interface ZeckendorfSearchTrickProps {
 }
 
 // First 8 Fibonacci numbers: 1, 1, 2, 3, 5, 8, 13, 21
-const FIBONACCI_NUMBERS = [21, 13, 8, 5, 3, 2, 1, 1];
+  const FIBONACCI_NUMBERS = [21, 13, 8, 5, 3, 2, 1];
 
 // Function to get Zeckendorf representation of a number
 const getZeckendorfRepresentation = (n: number): number[] => {
@@ -308,42 +308,39 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
         {getDisplayCards().map(card => (
           <Card key={card.id} className="relative">
             <CardHeader className="pb-2">
-              <CardTitle className="text-xl text-center">{card.title}</CardTitle>
+              <div className="flex justify-between items-start">
+                <CardTitle className="text-xl">{isSpoiler ? card.id : card.title.replace('Card ', '')}</CardTitle>
+                <div className="flex gap-2">
+                  <Button
+                    onClick={() => handleCardSelection(card.id, 'present')}
+                    variant={cardStates[card.id] === 'present' ? 'default' : 'outline'}
+                    size="sm"
+                    className="aspect-square flex items-center justify-center"
+                  >
+                    ✅
+                  </Button>
+                  <Button
+                    onClick={() => handleCardSelection(card.id, 'absent')}
+                    variant={cardStates[card.id] === 'absent' ? 'default' : 'outline'}
+                    size="sm"
+                    className="aspect-square flex items-center justify-center"
+                  >
+                    ❌
+                  </Button>
+                </div>
+              </div>
             </CardHeader>
-            <CardContent className="pt-0 flex flex-col h-full">
+            <CardContent className="pt-0">
               <div className="grid grid-cols-4 gap-1 text-xs">
                 {card.numbers.map(num => (
                   <div 
                     key={num} 
-                    className={`p-1 text-center rounded ${
-                      isSpoiler && num === card.id 
-                        ? 'bg-yellow-200 font-bold' 
-                        : 'bg-muted'
-                    }`}
+                    className="p-1 text-center rounded h-6 flex items-center justify-center bg-muted"
                   >
                     {num}
                   </div>
                 ))}
               </div>
-              
-              <div className="flex gap-2 mt-4 mt-auto">
-                <Button
-                  onClick={() => handleCardSelection(card.id, 'present')}
-                  variant={cardStates[card.id] === 'present' ? 'default' : 'outline'}
-                  size="sm"
-                  className="flex-1 aspect-square flex items-center justify-center"
-                >
-                  ✅
-                </Button>
-                <Button
-                  onClick={() => handleCardSelection(card.id, 'absent')}
-                  variant={cardStates[card.id] === 'absent' ? 'default' : 'outline'}
-                  size="sm"
-                  className="flex-1 aspect-square flex items-center justify-center"
-                >
-                  ❌
-                </Button>
-              </div>
             </CardContent>
           </Card>
         ))}