Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Zeckendorf Search Magic Trick with improved layout and card numbering

Browse source
This commit is contained in:
Neeldhara Misra 2025-07-22 11:38:05 +05:30
parent a7a026f87c
commit e37f3ed884
1 changed files with 24 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/ZeckendorfSearchTrick.tsx
View file

@ -12,7 +12,7 @@ interface ZeckendorfSearchTrickProps {
} }
// First 8 Fibonacci numbers: 1, 1, 2, 3, 5, 8, 13, 21 // 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 // Function to get Zeckendorf representation of a number
const getZeckendorfRepresentation = (n: number): number[] => { const getZeckendorfRepresentation = (n: number): number[] => {
@ -308,42 +308,39 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
{getDisplayCards().map(card => ( {getDisplayCards().map(card => (
<Card key={card.id} className="relative"> <Card key={card.id} className="relative">
<CardHeader className="pb-2"> <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> </CardHeader>
<CardContent className="pt-0 flex flex-col h-full"> <CardContent className="pt-0">
<div className="grid grid-cols-4 gap-1 text-xs"> <div className="grid grid-cols-4 gap-1 text-xs">
{card.numbers.map(num => ( {card.numbers.map(num => (
<div <div
key={num} key={num}
className={`p-1 text-center rounded ${ className="p-1 text-center rounded h-6 flex items-center justify-center bg-muted"
isSpoiler && num === card.id
? 'bg-yellow-200 font-bold'
: 'bg-muted'
}`}
> >
{num} {num}
</div> </div>
))} ))}
</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> </CardContent>
</Card> </Card>
))} ))}