Add Zeckendorf Representation interactive under Discrete Math > Foundations

src/App.tsx

@@ -34,6 +34,7 @@ import AssistedNimGamePage from "./pages/AssistedNimGamePage";
 import GoldCoinGamePage from "./pages/GoldCoinGamePage";
 import PlateSwapPuzzlePage from "./pages/PlateSwapPuzzlePage";
 import ChessboardRepaintPuzzlePage from "./pages/ChessboardRepaintPuzzlePage";
+import ZeckendorfGamePage from "./pages/ZeckendorfGamePage";
 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";
@@ -94,6 +95,7 @@ const App = () => (
                   <Route path="/games/gold-coin" element={<GoldCoinGamePage />} />
         <Route path="/puzzles/plate-swap" element={<PlateSwapPuzzlePage />} />
         <Route path="/puzzles/chessboard-repaint" element={<ChessboardRepaintPuzzlePage />} />
+        <Route path="/discrete-math/foundations/zeckendorf" element={<ZeckendorfGamePage />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />

src/components/InteractiveIndex.tsx

@@ -46,6 +46,15 @@ const allInteractives: Interactive[] = [
     theme: 'Discrete Math',
     dateAdded: '2024-01-17'
   },
+  {
+    id: 'zeckendorf-game',
+    title: 'Zeckendorf Representation',
+    description: 'Learn how numbers are represented using Fibonacci numbers with the unique Zeckendorf representation (no consecutive Fibonacci numbers).',
+    tags: ['fibonacci', 'numbers', 'representation', 'zeckendorf', 'combinatorics'],
+    path: '/discrete-math/foundations/zeckendorf',
+    theme: 'Discrete Math',
+    dateAdded: '2024-12-22'
+  },
   {
     id: 'binary-search-trick',
     title: 'Binary Search Magic Trick',

src/components/ZeckendorfGame.tsx

@@ -0,0 +1,238 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import SocialShare from '@/components/SocialShare';
+
+// First 8 Fibonacci numbers: 1, 1, 2, 3, 5, 8, 13, 21
+const FIBONACCI_NUMBERS = [21, 13, 8, 5, 3, 2, 1, 1];
+
+interface ZeckendorfGameProps {
+  showSocialShare?: boolean;
+}
+
+const ZeckendorfGame: React.FC<ZeckendorfGameProps> = ({ showSocialShare = true }) => {
+  const [targetNumber, setTargetNumber] = useState<number>(0);
+  const [flippedCards, setFlippedCards] = useState<boolean[]>(new Array(8).fill(false));
+  const [currentSum, setCurrentSum] = useState<number>(0);
+  const [timer, setTimer] = useState<number>(0);
+  const [isGameActive, setIsGameActive] = useState<boolean>(false);
+  const [isGameWon, setIsGameWon] = useState<boolean>(false);
+  const [hasGameStarted, setHasGameStarted] = useState<boolean>(false);
+  const [highScore, setHighScore] = useState<number | null>(null);
+
+  // Load high score from localStorage on component mount
+  useEffect(() => {
+    const savedHighScore = localStorage.getItem('zeckendorf-game-high-score');
+    if (savedHighScore) {
+      setHighScore(parseInt(savedHighScore));
+    }
+  }, []);
+
+  // Generate a valid target number (sum of some Fibonacci numbers)
+  const generateValidTarget = useCallback(() => {
+    // Generate a random combination of Fibonacci numbers
+    const numTerms = Math.floor(Math.random() * 4) + 2; // 2-5 terms
+    let target = 0;
+    let usedIndices = new Set<number>();
+    
+    for (let i = 0; i < numTerms; i++) {
+      let index;
+      do {
+        index = Math.floor(Math.random() * 8);
+      } while (usedIndices.has(index));
+      
+      usedIndices.add(index);
+      target += FIBONACCI_NUMBERS[index];
+    }
+    
+    return target;
+  }, []);
+
+  // Start new game
+  const startNewGame = useCallback(() => {
+    const newTarget = generateValidTarget();
+    setTargetNumber(newTarget);
+    setFlippedCards(new Array(8).fill(false));
+    setCurrentSum(0);
+    setTimer(0);
+    setIsGameActive(true);
+    setIsGameWon(false);
+    setHasGameStarted(true);
+  }, [generateValidTarget]);
+
+  // Start game for the first time
+  const startGame = () => {
+    startNewGame();
+  };
+
+  // Timer effect
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (isGameActive && !isGameWon) {
+      interval = setInterval(() => {
+        setTimer(prev => prev + 0.1);
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [isGameActive, isGameWon]);
+
+  // Check for win condition
+  useEffect(() => {
+    if (currentSum === targetNumber && isGameActive) {
+      setIsGameActive(false);
+      setIsGameWon(true);
+      
+      // Update high score
+      const currentTime = Math.round(timer * 10) / 10;
+      if (highScore === null || currentTime < highScore) {
+        setHighScore(currentTime);
+        localStorage.setItem('zeckendorf-game-high-score', currentTime.toString());
+      }
+    }
+  }, [currentSum, targetNumber, isGameActive, timer, highScore]);
+
+  // Calculate current sum
+  useEffect(() => {
+    const sum = flippedCards.reduce((acc, isFlipped, index) => {
+      return isFlipped ? acc + FIBONACCI_NUMBERS[index] : acc;
+    }, 0);
+    setCurrentSum(sum);
+  }, [flippedCards]);
+
+  // Check if current selection violates Zeckendorf rule (no consecutive Fibonacci numbers)
+  const hasConsecutiveFibonacci = () => {
+    for (let i = 0; i < flippedCards.length - 1; i++) {
+      if (flippedCards[i] && flippedCards[i + 1]) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const toggleCard = (index: number) => {
+    if (!isGameActive || isGameWon) return;
+    
+    setFlippedCards(prev => {
+      const newFlipped = [...prev];
+      newFlipped[index] = !newFlipped[index];
+      return newFlipped;
+    });
+  };
+
+  const isInvalidSelection = hasConsecutiveFibonacci();
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      <div className="text-center space-y-2">
+        <h2 className="text-2xl font-bold text-foreground">Zeckendorf Representation</h2>
+        <p className="text-muted-foreground">Click the cards to represent the target number as a sum of Fibonacci numbers (no consecutive numbers allowed)!</p>
+        {highScore !== null && (
+          <Badge variant="secondary" className="text-sm">
+            Best Time: {highScore}s
+          </Badge>
+        )}
+      </div>
+
+      {/* Cards representing Fibonacci numbers */}
+      <div className="grid grid-cols-8 gap-3">
+        {FIBONACCI_NUMBERS.map((fib, index) => (
+          <div key={fib} className="flex flex-col items-center space-y-2">
+            <Card 
+              className={`cursor-pointer transition-all duration-200 hover:scale-105 aspect-square w-full ${
+                flippedCards[index] 
+                  ? 'bg-green-100 border-green-300 shadow-md' 
+                  : 'bg-gradient-to-br from-orange-100 to-red-100 border-orange-200'
+              }`}
+              onClick={() => toggleCard(index)}
+            >
+              <CardContent className="p-0 h-full flex items-center justify-center">
+                {flippedCards[index] ? (
+                  <span className="text-2xl font-bold text-green-800">{fib}</span>
+                ) : (
+                  <div className="w-full h-full bg-gradient-to-br from-orange-200 via-red-200 to-pink-200 rounded-lg opacity-80 flex items-center justify-center">
+                    <div className="w-8 h-8 bg-white rounded-full opacity-60"></div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+            <span className="text-xs text-muted-foreground font-medium">{fib}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Warning for invalid selection */}
+      {isInvalidSelection && (
+        <div className="text-center">
+          <Badge variant="destructive" className="text-sm">
+            ⚠️ Invalid: Cannot use consecutive Fibonacci numbers!
+          </Badge>
+        </div>
+      )}
+
+      {/* Sum display boxes */}
+      <div className="grid grid-cols-2 gap-4">
+        <Card className="bg-secondary">
+          <CardContent className="p-6 text-center">
+            <h3 className="text-lg font-semibold text-muted-foreground mb-2">Current Sum</h3>
+            <div className={`text-4xl font-bold ${currentSum > targetNumber ? "text-red-600" : isInvalidSelection ? "text-orange-600" : "text-foreground"}`}>
+              {currentSum}
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-primary/10 border-primary/20">
+          <CardContent className="p-6 text-center">
+            <h3 className="text-lg font-semibold text-muted-foreground mb-2">Target Sum</h3>
+            <div className={`text-4xl font-bold ${isGameWon ? "text-green-800" : "text-primary"}`}>
+              {!hasGameStarted ? "🎯" : targetNumber}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Timer and controls */}
+      <div className="text-center space-y-4">
+        <div className="text-2xl font-mono text-foreground">
+          Time: {Math.round(timer * 10) / 10}s
+        </div>
+        
+        {isGameWon && (
+          <div className="space-y-2">
+            <div className="text-xl font-bold text-green-600">Congratulations! 🎉</div>
+            <div className="text-lg text-muted-foreground">
+              Your score: {Math.round(timer * 10) / 10} seconds
+            </div>
+            {highScore === Math.round(timer * 10) / 10 && (
+              <Badge variant="default" className="bg-yellow-500 text-yellow-900">
+                New High Score! 🏆
+              </Badge>
+            )}
+          </div>
+        )}
+        
+        <Button onClick={hasGameStarted ? startNewGame : startGame} size="lg" className="px-8">
+          {!hasGameStarted ? 'Start Game' : isGameWon ? 'Play Again' : 'New Game'}
+        </Button>
+      </div>
+
+      {/* Information about Zeckendorf representation */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <h3 className="font-semibold text-blue-900 mb-2">About Zeckendorf Representation</h3>
+        <p className="text-sm text-blue-800">
+          Every positive integer can be uniquely represented as a sum of Fibonacci numbers, 
+          where no two consecutive Fibonacci numbers are used. This is called the Zeckendorf representation.
+        </p>
+      </div>
+
+      {showSocialShare && (
+        <SocialShare
+          title="Zeckendorf Representation Game"
+          description="Learn how numbers are represented using Fibonacci numbers with the Zeckendorf representation."
+          url={`${window.location.origin}/discrete-math/foundations/zeckendorf`}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ZeckendorfGame; 

src/pages/ZeckendorfGamePage.tsx

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

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

@@ -6,6 +6,7 @@ import InteractiveCard from "@/components/InteractiveCard";
 import BinaryNumberGame from "@/components/BinaryNumberGame";
 import TernaryNumberGame from "@/components/TernaryNumberGame";
 import BalancedTernaryGame from "@/components/BalancedTernaryGame";
+import ZeckendorfGame from "@/components/ZeckendorfGame";
 interface Interactive {
   id: string;
   title: string;
@@ -35,6 +36,13 @@ const interactives: Interactive[] = [{
   tags: ["balanced-ternary", "numbers", "conversion", "representation", "base-3", "signed-digits"],
   component: BalancedTernaryGame,
   greenScreenPath: "/balanced-ternary-game"
+}, {
+  id: "zeckendorf-game",
+  title: "Zeckendorf Representation",
+  description: "Learn how numbers are represented using Fibonacci numbers with the unique Zeckendorf representation (no consecutive Fibonacci numbers).",
+  tags: ["fibonacci", "numbers", "representation", "zeckendorf", "combinatorics"],
+  component: ZeckendorfGame,
+  greenScreenPath: "/discrete-math/foundations/zeckendorf"
 }];
 const Foundations = () => {
   const [searchTerm, setSearchTerm] = useState("");