Add binary search interactive

Recreate the binary search interactive, add a popup explanation, social sharing, and green screen versions. Place it under Data Structures.

src/App.tsx

@@ -15,6 +15,8 @@ import Games from "./pages/theme-pages/Games";
 import CardsMath from "./pages/theme-pages/CardsMath";
 import BinaryNumberGamePage from "./pages/BinaryNumberGamePage";
 import BinaryNumberGameGreenScreen from "./pages/BinaryNumberGameGreenScreen";
+import BinarySearchTrickPage from "./pages/BinarySearchTrickPage";
+import BinarySearchTrickGreenScreen from "./pages/BinarySearchTrickGreenScreen";
 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";
@@ -56,6 +58,8 @@ const App = () => (
           {/* Direct interactive routes */}
           <Route path="/binary-number-game" element={<BinaryNumberGamePage />} />
           <Route path="/binary-number-game/:mode" element={<BinaryNumberGameGreenScreen />} />
+          <Route path="/binary-search-trick" element={<BinarySearchTrickPage />} />
+          <Route path="/binary-search-trick/:mode" element={<BinarySearchTrickGreenScreen />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />

src/components/BinarySearchTrick.tsx

@@ -0,0 +1,218 @@
+import { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { HelpCircle, RefreshCw } from 'lucide-react';
+import SocialShare from '@/components/SocialShare';
+
+interface BinarySearchTrickProps {
+  showSocialShare?: boolean;
+}
+
+const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) => {
+  const [selectedCards, setSelectedCards] = useState<number[]>([]);
+  const [result, setResult] = useState<number | null>(null);
+  const [showResult, setShowResult] = useState(false);
+
+  // Define the 5 binary cards
+  const cards = [
+    {
+      id: 16,
+      title: "Card 16",
+      numbers: [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
+    },
+    {
+      id: 8,
+      title: "Card 8", 
+      numbers: [8, 9, 10, 11, 12, 13, 14, 15, 24, 25, 26, 27, 28, 29, 30, 31]
+    },
+    {
+      id: 4,
+      title: "Card 4",
+      numbers: [4, 5, 6, 7, 12, 13, 14, 15, 20, 21, 22, 23, 28, 29, 30, 31]
+    },
+    {
+      id: 2,
+      title: "Card 2",
+      numbers: [2, 3, 6, 7, 10, 11, 14, 15, 18, 19, 22, 23, 26, 27, 30, 31]
+    },
+    {
+      id: 1,
+      title: "Card 1",
+      numbers: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31]
+    }
+  ];
+
+  const handleCardToggle = (cardId: number) => {
+    setSelectedCards(prev => 
+      prev.includes(cardId) 
+        ? prev.filter(id => id !== cardId)
+        : [...prev, cardId]
+    );
+    setShowResult(false);
+  };
+
+  const calculateResult = () => {
+    const sum = selectedCards.reduce((acc, cardId) => acc + cardId, 0);
+    setResult(sum);
+    setShowResult(true);
+  };
+
+  const reset = () => {
+    setSelectedCards([]);
+    setResult(null);
+    setShowResult(false);
+  };
+
+  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">
+            Binary Search Magic Trick
+          </CardTitle>
+          <div className="flex items-center justify-center gap-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>Binary Numbers 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 31</li>
+                        <li>Show them the 5 cards below and ask them to tell you which cards contain their number</li>
+                        <li>Add up the first numbers (16, 8, 4, 2, 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 binary number representation. Every number from 1 to 31 can be expressed as a sum of powers of 2: 16, 8, 4, 2, and 1.
+                      </p>
+                      <p>
+                        Each card contains all numbers that have a "1" in a specific binary position:
+                      </p>
+                      <ul className="list-disc list-inside space-y-1 ml-4">
+                        <li><strong>Card 16:</strong> Numbers with 1 in the 16's place (binary position 4)</li>
+                        <li><strong>Card 8:</strong> Numbers with 1 in the 8's place (binary position 3)</li>
+                        <li><strong>Card 4:</strong> Numbers with 1 in the 4's place (binary position 2)</li>
+                        <li><strong>Card 2:</strong> Numbers with 1 in the 2's place (binary position 1)</li>
+                        <li><strong>Card 1:</strong> Numbers with 1 in the 1's place (binary position 0)</li>
+                      </ul>
+                      
+                      <div className="bg-muted p-4 rounded-lg mt-4">
+                        <p className="font-semibold">Example:</p>
+                        <p>The number 19 in binary is 10011, which means 16 + 2 + 1 = 19</p>
+                        <p>So 19 appears on cards 16, 2, and 1, but not on cards 8 or 4.</p>
+                      </div>
+                      
+                      <p>
+                        When you add up the first numbers from the selected cards, you're reconstructing the binary representation of their secret number!
+                      </p>
+                    </div>
+                  </DialogDescription>
+                </DialogHeader>
+              </DialogContent>
+            </Dialog>
+            
+            {showSocialShare && (
+              <SocialShare 
+                title="Binary Search Magic Trick"
+                description="Learn how binary numbers work through this amazing magic trick! Can you figure out how it works?"
+              />
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center space-y-4">
+            <p className="text-lg text-muted-foreground">
+              Think of a number between 1 and 31, then select all the cards that contain your number:
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+        {cards.map((card) => (
+          <Card 
+            key={card.id} 
+            className={`cursor-pointer transition-all duration-200 hover:shadow-lg ${
+              selectedCards.includes(card.id) 
+                ? 'ring-2 ring-primary bg-primary/5' 
+                : 'hover:bg-muted/50'
+            }`}
+            onClick={() => handleCardToggle(card.id)}
+          >
+            <CardHeader className="pb-2">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-xl font-bold text-primary">
+                  {card.id}
+                </CardTitle>
+                <Checkbox 
+                  checked={selectedCards.includes(card.id)}
+                  onChange={() => {}} // Controlled by card click
+                />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-4 gap-1 text-sm">
+                {card.numbers.map((num) => (
+                  <div 
+                    key={num} 
+                    className="p-1 text-center bg-muted/30 rounded border"
+                  >
+                    {num}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="flex flex-col items-center space-y-4">
+        <div className="flex gap-4">
+          <Button 
+            onClick={calculateResult}
+            disabled={selectedCards.length === 0}
+            size="lg"
+            className="min-w-32"
+          >
+            Reveal Number
+          </Button>
+          <Button 
+            onClick={reset}
+            variant="outline"
+            size="lg"
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Reset
+          </Button>
+        </div>
+
+        {showResult && result !== null && (
+          <Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 animate-scale-in">
+            <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-green-600">
+                {result === 0 ? "Please select at least one card!" : "Amazing, right? ✨"}
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BinarySearchTrick;

src/components/InteractiveGallery.tsx

@@ -4,6 +4,7 @@ import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Search } from 'lucide-react';
 import BinaryNumberGame from '@/components/BinaryNumberGame';
+import BinarySearchTrick from '@/components/BinarySearchTrick';
 
 interface Interactive {
   id: string;
@@ -21,6 +22,13 @@ const interactives: Interactive[] = [
     tags: ['binary', 'math', 'numbers', 'representation', 'powers-of-two'],
     component: BinaryNumberGame,
   },
+  {
+    id: 'binary-search-trick',
+    title: 'Binary Search Magic Trick',
+    description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
+    tags: ['binary', 'magic', 'numbers', 'trick', 'data-structures'],
+    component: BinarySearchTrick,
+  },
 ];
 
 const InteractiveGallery = () => {

src/pages/BinarySearchTrickGreenScreen.tsx

@@ -0,0 +1,18 @@
+import { useParams } from 'react-router-dom';
+import BinarySearchTrick from '@/components/BinarySearchTrick';
+import GreenScreenWrapper from '@/components/GreenScreenWrapper';
+
+const BinarySearchTrickGreenScreen = () => {
+  const { mode } = useParams<{ mode: 'gs-lite' | 'gs-dark' }>();
+  const greenScreenMode = mode === 'gs-dark' ? 'dark' : 'lite';
+
+  return (
+    <GreenScreenWrapper mode={greenScreenMode}>
+      <div className="space-y-6">
+        <BinarySearchTrick showSocialShare={false} />
+      </div>
+    </GreenScreenWrapper>
+  );
+};
+
+export default BinarySearchTrickGreenScreen;

src/pages/BinarySearchTrickPage.tsx

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

src/pages/theme-pages/DataStructures.tsx

@@ -1,11 +1,23 @@
-import ComingSoon from "@/components/ComingSoon";
+import Layout from "@/components/Layout";
+import InteractiveGallery from "@/components/InteractiveGallery";
 
 const DataStructures = () => {
   return (
-    <ComingSoon 
-      title="Data Structures"
-      description="Master fundamental and advanced data structures through interactive manipulation and visualization. Explore trees, graphs, heaps, hash tables, and their real-world applications."
-    />
+    <Layout>
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
+            Data Structures
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            Master fundamental and advanced data structures through interactive manipulation and visualization. 
+            Explore trees, graphs, heaps, hash tables, and their real-world applications.
+          </p>
+        </div>
+        
+        <InteractiveGallery />
+      </div>
+    </Layout>
   );
 };