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

41
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,30 +308,14 @@ 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">
</CardHeader> <CardTitle className="text-xl">{isSpoiler ? card.id : card.title.replace('Card ', '')}</CardTitle>
<CardContent className="pt-0 flex flex-col h-full"> <div className="flex gap-2">
<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'
}`}
>
{num}
</div>
))}
</div>
<div className="flex gap-2 mt-4 mt-auto">
<Button <Button
onClick={() => handleCardSelection(card.id, 'present')} onClick={() => handleCardSelection(card.id, 'present')}
variant={cardStates[card.id] === 'present' ? 'default' : 'outline'} variant={cardStates[card.id] === 'present' ? 'default' : 'outline'}
size="sm" size="sm"
className="flex-1 aspect-square flex items-center justify-center" className="aspect-square flex items-center justify-center"
> >
✅ ✅
</Button> </Button>
@ -339,11 +323,24 @@ const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrick
onClick={() => handleCardSelection(card.id, 'absent')} onClick={() => handleCardSelection(card.id, 'absent')}
variant={cardStates[card.id] === 'absent' ? 'default' : 'outline'} variant={cardStates[card.id] === 'absent' ? 'default' : 'outline'}
size="sm" size="sm"
className="flex-1 aspect-square flex items-center justify-center" className="aspect-square flex items-center justify-center"
> >
❌ ❌
</Button> </Button>
</div> </div>
</div>
</CardHeader>
<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 h-6 flex items-center justify-center bg-muted"
>
{num}
</div>
))}
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}