Add Zeckendorf Search Magic Trick - Fibonacci-based magic trick using Zeckendorf representation

src/App.tsx

@@ -35,6 +35,7 @@ import GoldCoinGamePage from "./pages/GoldCoinGamePage";
 import PlateSwapPuzzlePage from "./pages/PlateSwapPuzzlePage";
 import ChessboardRepaintPuzzlePage from "./pages/ChessboardRepaintPuzzlePage";
 import ZeckendorfGamePage from "./pages/ZeckendorfGamePage";
+import ZeckendorfSearchTrickPage from "./pages/ZeckendorfSearchTrickPage";
 import Foundations from "./pages/theme-pages/discrete-math/Foundations";
 import Proofs from "./pages/theme-pages/discrete-math/Proofs";
 import Counting from "./pages/theme-pages/discrete-math/Counting";
@@ -96,6 +97,7 @@ const App = () => (
         <Route path="/puzzles/plate-swap" element={<PlateSwapPuzzlePage />} />
         <Route path="/puzzles/chessboard-repaint" element={<ChessboardRepaintPuzzlePage />} />
         <Route path="/discrete-math/foundations/zeckendorf" element={<ZeckendorfGamePage />} />
+        <Route path="/discrete-math/foundations/zeckendorf-search" element={<ZeckendorfSearchTrickPage />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />

src/components/InteractiveIndex.tsx

@@ -55,6 +55,15 @@ const allInteractives: Interactive[] = [
     theme: 'Discrete Math',
     dateAdded: '2024-12-22'
   },
+  {
+    id: 'zeckendorf-search-trick',
+    title: 'Zeckendorf Search Magic Trick',
+    description: 'Experience the magic of Zeckendorf representation! Think of a number and watch as the cards reveal it through Fibonacci numbers.',
+    tags: ['fibonacci', 'magic', 'numbers', 'trick', 'zeckendorf', 'representation'],
+    path: '/discrete-math/foundations/zeckendorf-search',
+    theme: 'Discrete Math',
+    dateAdded: '2024-12-22'
+  },
   {
     id: 'binary-search-trick',
     title: 'Binary Search Magic Trick',

src/components/ZeckendorfSearchTrick.tsx

@@ -0,0 +1,367 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { HelpCircle, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react';
+import SocialShare from '@/components/SocialShare';
+
+interface ZeckendorfSearchTrickProps {
+  showSocialShare?: boolean;
+}
+
+// First 8 Fibonacci numbers: 1, 1, 2, 3, 5, 8, 13, 21
+const FIBONACCI_NUMBERS = [21, 13, 8, 5, 3, 2, 1, 1];
+
+// Function to get Zeckendorf representation of a number
+const getZeckendorfRepresentation = (n: number): number[] => {
+  if (n === 0) return [];
+  
+  // Find the largest Fibonacci number less than or equal to n
+  let largestFib = 0;
+  let largestFibIndex = 0;
+  
+  for (let i = 0; i < FIBONACCI_NUMBERS.length; i++) {
+    if (FIBONACCI_NUMBERS[i] <= n) {
+      largestFib = FIBONACCI_NUMBERS[i];
+      largestFibIndex = i;
+      break;
+    }
+  }
+  
+  if (largestFib === 0) return [];
+  
+  // Recursively get representation for the remainder
+  const remainder = n - largestFib;
+  const remainderRep = getZeckendorfRepresentation(remainder);
+  
+  // Check if adding this Fibonacci number would create consecutive numbers
+  if (remainderRep.length > 0 && remainderRep[0] === FIBONACCI_NUMBERS[largestFibIndex + 1]) {
+    // If it would create consecutive, try the next smaller Fibonacci number
+    return getZeckendorfRepresentation(n);
+  }
+  
+  return [largestFib, ...remainderRep];
+};
+
+// Function to check if a number contains a specific Fibonacci number in its Zeckendorf representation
+const containsFibonacciInZeckendorf = (number: number, fibonacci: number): boolean => {
+  const representation = getZeckendorfRepresentation(number);
+  return representation.includes(fibonacci);
+};
+
+const ZeckendorfSearchTrick = ({ showSocialShare = true }: ZeckendorfSearchTrickProps) => {
+  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);
+  const [isRandomized, setIsRandomized] = useState(true);
+  const [currentCardIndex, setCurrentCardIndex] = useState(0);
+  const [cards, setCards] = useState<Array<{id: number; title: string; numbers: number[]}>>([]);
+
+  // Function to shuffle array
+  const shuffleArray = <T,>(array: T[]): T[] => {
+    const shuffled = [...array];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+  };
+
+  // Generate cards with optional randomization
+  const generateCards = () => {
+    const baseCards = FIBONACCI_NUMBERS.map(fib => {
+      const numbers: number[] = [];
+      // Check numbers from 1 to 33 to see which ones contain this Fibonacci number
+      for (let i = 1; i <= 33; i++) {
+        if (containsFibonacciInZeckendorf(i, fib)) {
+          numbers.push(i);
+        }
+      }
+      
+      return {
+        id: fib,
+        title: `Card ${fib}`,
+        numbers: numbers
+      };
+    });
+
+    // Apply randomization based on toggle state
+    return baseCards.map(card => ({
+      ...card,
+      numbers: isRandomized ? shuffleArray(card.numbers) : card.numbers
+    }));
+  };
+
+  // Initialize cards on component mount
+  useEffect(() => {
+    setCards(generateCards());
+  }, [isRandomized]);
+
+  // Handle mode toggle
+  const handleModeToggle = (checked: boolean) => {
+    setIsOneByOne(checked);
+    setCurrentCardIndex(0);
+    setCardStates({});
+    setShowResult(false);
+  };
+
+  // Handle randomization toggle
+  const handleRandomizationToggle = (checked: boolean) => {
+    setIsRandomized(checked);
+    setCardStates({});
+    setShowResult(false);
+    setCurrentCardIndex(0);
+  };
+
+  // Navigation functions for one-by-one mode
+  const goToPreviousCard = () => {
+    setCurrentCardIndex(prev => Math.max(0, prev - 1));
+  };
+
+  const goToNextCard = () => {
+    setCurrentCardIndex(prev => Math.min(cards.length - 1, prev + 1));
+  };
+
+  const handleCardSelection = (cardId: number, state: 'present' | 'absent') => {
+    setCardStates(prev => ({
+      ...prev,
+      [cardId]: state
+    }));
+    setShowResult(false);
+  };
+
+  const calculateResult = () => {
+    const sum = Object.entries(cardStates)
+      .filter(([_, state]) => state === 'present')
+      .reduce((acc, [cardId, _]) => acc + parseInt(cardId), 0);
+    setResult(sum);
+    setShowResult(true);
+  };
+
+  const reset = () => {
+    setCardStates({});
+    setResult(null);
+    setShowResult(false);
+    setCurrentCardIndex(0);
+    setCards(generateCards()); // Regenerate with current randomization setting
+  };
+
+  // Check if at least one card has been selected (present or absent)
+  const hasAnySelection = Object.values(cardStates).some(state => state !== 'unselected');
+  
+  // Check if all cards have been committed to in one-by-one mode
+  const allCardsCommitted = isOneByOne 
+    ? cards.every(card => cardStates[card.id] && cardStates[card.id] !== 'unselected')
+    : hasAnySelection;
+
+  // Get cards to display based on mode
+  const getDisplayCards = () => {
+    if (isOneByOne) {
+      return cards.length > 0 ? [cards[currentCardIndex]] : [];
+    }
+    return cards;
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <Card className="bg-gradient-to-r from-primary/10 to-secondary/10 border-primary/20">
+        <CardHeader className="text-center">
+          <CardTitle className="text-3xl font-bold bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
+            Zeckendorf Search Magic Trick
+          </CardTitle>
+          <div className="flex justify-center mt-4">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <HelpCircle className="w-4 h-4 mr-2" />
+                  How it works
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Zeckendorf Representation Magic Trick Explained</DialogTitle>
+                  <DialogDescription asChild>
+                    <div className="space-y-4 text-left">
+                      <h3 className="font-semibold text-lg">How to perform the trick:</h3>
+                      <ol className="list-decimal list-inside space-y-2">
+                        <li>Ask someone to pick a secret number between 1 and 33</li>
+                        <li>Show them the 8 cards below and ask them to tell you which cards contain their number</li>
+                        <li>Add up the first numbers (21, 13, 8, 5, 3, 2, 1, 1) from the cards they selected</li>
+                        <li>The sum will be their secret number!</li>
+                      </ol>
+                      
+                      <h3 className="font-semibold text-lg mt-6">Why does it work?</h3>
+                      <p>
+                        This trick is based on Zeckendorf representation. Every positive integer can be uniquely represented as a sum of Fibonacci numbers, where no two consecutive Fibonacci numbers are used.
+                      </p>
+                      <p>
+                        Each card contains all numbers that have a specific Fibonacci number in their Zeckendorf representation:
+                      </p>
+                      <ul className="list-disc list-inside space-y-1 ml-4">
+                        <li><strong>Card 21:</strong> Numbers that have 21 in their Zeckendorf representation</li>
+                        <li><strong>Card 13:</strong> Numbers that have 13 in their Zeckendorf representation</li>
+                        <li><strong>Card 8:</strong> Numbers that have 8 in their Zeckendorf representation</li>
+                        <li><strong>Card 5:</strong> Numbers that have 5 in their Zeckendorf representation</li>
+                        <li><strong>Card 3:</strong> Numbers that have 3 in their Zeckendorf representation</li>
+                        <li><strong>Card 2:</strong> Numbers that have 2 in their Zeckendorf representation</li>
+                        <li><strong>Card 1:</strong> Numbers that have 1 in their Zeckendorf representation</li>
+                      </ul>
+                      
+                      <div className="bg-muted p-4 rounded-lg mt-4">
+                        <p className="font-semibold">Example:</p>
+                        <p>The number 19 in Zeckendorf representation is 13 + 5 + 1 = 19</p>
+                        <p>So 19 appears on cards 13, 5, and 1, but not on cards 21, 8, 3, or 2.</p>
+                      </div>
+                      
+                      <p>
+                        When you add up the first numbers from the selected cards, you're reconstructing the Zeckendorf representation of their secret number!
+                      </p>
+                    </div>
+                  </DialogDescription>
+                </DialogHeader>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center space-y-4">
+            <p className="text-lg text-muted-foreground">
+              Think of a number between 1 and 33, then tell me which cards contain your number!
+            </p>
+            
+            {/* Controls */}
+            <div className="flex flex-wrap justify-center gap-4 items-center">
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="one-by-one"
+                  checked={isOneByOne}
+                  onCheckedChange={handleModeToggle}
+                />
+                <Label htmlFor="one-by-one">One by one mode</Label>
+              </div>
+              
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="randomized"
+                  checked={isRandomized}
+                  onCheckedChange={handleRandomizationToggle}
+                />
+                <Label htmlFor="randomized">Randomized order</Label>
+              </div>
+              
+              <Button onClick={reset} variant="outline" size="sm">
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Reset
+              </Button>
+            </div>
+
+            {/* Navigation for one-by-one mode */}
+            {isOneByOne && cards.length > 0 && (
+              <div className="flex justify-center items-center gap-4">
+                <Button
+                  onClick={goToPreviousCard}
+                  disabled={currentCardIndex === 0}
+                  variant="outline"
+                  size="sm"
+                >
+                  <ChevronLeft className="w-4 h-4 mr-2" />
+                  Previous
+                </Button>
+                <span className="text-sm text-muted-foreground">
+                  Card {currentCardIndex + 1} of {cards.length}
+                </span>
+                <Button
+                  onClick={goToNextCard}
+                  disabled={currentCardIndex === cards.length - 1}
+                  variant="outline"
+                  size="sm"
+                >
+                  Next
+                  <ChevronRight className="w-4 h-4 ml-2" />
+                </Button>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {getDisplayCards().map(card => (
+          <Card key={card.id} className="relative">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-xl text-center">{card.title}</CardTitle>
+            </CardHeader>
+            <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">
+                    {num}
+                  </div>
+                ))}
+              </div>
+              
+              <div className="flex gap-2 mt-4">
+                <Button
+                  onClick={() => handleCardSelection(card.id, 'present')}
+                  variant={cardStates[card.id] === 'present' ? 'default' : 'outline'}
+                  size="sm"
+                  className="flex-1"
+                >
+                  Contains my number
+                </Button>
+                <Button
+                  onClick={() => handleCardSelection(card.id, 'absent')}
+                  variant={cardStates[card.id] === 'absent' ? 'default' : 'outline'}
+                  size="sm"
+                  className="flex-1"
+                >
+                  Does not contain
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Reveal button */}
+      <div className="text-center">
+        <Button
+          onClick={calculateResult}
+          disabled={!allCardsCommitted}
+          size="lg"
+          className="px-8"
+        >
+          Reveal My Number
+        </Button>
+      </div>
+
+      {/* Result */}
+      {showResult && result !== null && (
+        <Card className="bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
+          <CardContent className="p-6 text-center">
+            <h3 className="text-2xl font-bold text-green-800 mb-2">
+              Your number is: {result}
+            </h3>
+            <p className="text-muted-foreground">
+              Magic! 🎩✨
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {showSocialShare && (
+        <SocialShare
+          title="Zeckendorf Search Magic Trick"
+          description="Experience the magic of Zeckendorf representation! Think of a number and watch as the cards reveal it through Fibonacci numbers."
+          url={`${window.location.origin}/discrete-math/foundations/zeckendorf-search`}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ZeckendorfSearchTrick; 

src/pages/ZeckendorfSearchTrickPage.tsx

@@ -0,0 +1,13 @@
+import ZeckendorfSearchTrick from '@/components/ZeckendorfSearchTrick';
+
+const ZeckendorfSearchTrickPage = () => {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="max-w-6xl mx-auto">
+        <ZeckendorfSearchTrick />
+      </div>
+    </div>
+  );
+};
+
+export default ZeckendorfSearchTrickPage; 

src/pages/theme-pages/discrete-math/Foundations.tsx

@@ -7,6 +7,7 @@ import BinaryNumberGame from "@/components/BinaryNumberGame";
 import TernaryNumberGame from "@/components/TernaryNumberGame";
 import BalancedTernaryGame from "@/components/BalancedTernaryGame";
 import ZeckendorfGame from "@/components/ZeckendorfGame";
+import ZeckendorfSearchTrick from "@/components/ZeckendorfSearchTrick";
 interface Interactive {
   id: string;
   title: string;
@@ -43,6 +44,13 @@ const interactives: Interactive[] = [{
   tags: ["fibonacci", "numbers", "representation", "zeckendorf", "combinatorics"],
   component: ZeckendorfGame,
   greenScreenPath: "/discrete-math/foundations/zeckendorf"
+}, {
+  id: "zeckendorf-search-trick",
+  title: "Zeckendorf Search Magic Trick",
+  description: "Experience the magic of Zeckendorf representation! Think of a number and watch as the cards reveal it through Fibonacci numbers.",
+  tags: ["fibonacci", "magic", "numbers", "trick", "zeckendorf", "representation"],
+  component: ZeckendorfSearchTrick,
+  greenScreenPath: "/discrete-math/foundations/zeckendorf-search"
 }];
 const Foundations = () => {
   const [searchTerm, setSearchTerm] = useState("");