From dda00627f8680c7fe13255eb126703ae9ca7196d Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 19 Jul 2025 14:51:05 +0000 Subject: [PATCH] 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 | 4 + src/components/BinarySearchTrick.tsx | 218 +++++++++++++++++++++ src/components/InteractiveGallery.tsx | 8 + src/pages/BinarySearchTrickGreenScreen.tsx | 18 ++ src/pages/BinarySearchTrickPage.tsx | 13 ++ src/pages/theme-pages/DataStructures.tsx | 22 ++- 6 files changed, 278 insertions(+), 5 deletions(-) create mode 100644 src/components/BinarySearchTrick.tsx create mode 100644 src/pages/BinarySearchTrickGreenScreen.tsx create mode 100644 src/pages/BinarySearchTrickPage.tsx diff --git a/src/App.tsx b/src/App.tsx index dee5719..b8705da 100644 --- a/src/App.tsx +++ b/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 */} } /> } /> + } /> + } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> diff --git a/src/components/BinarySearchTrick.tsx b/src/components/BinarySearchTrick.tsx new file mode 100644 index 0000000..8909738 --- /dev/null +++ b/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([]); + const [result, setResult] = useState(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 ( +
+ + + + Binary Search Magic Trick + +
+ + + + + + + Binary Numbers Magic Trick Explained + +
+

How to perform the trick:

+
    +
  1. Ask someone to pick a secret number between 1 and 31
    2. +
  2. Show them the 5 cards below and ask them to tell you which cards contain their number
    3. +
  3. Add up the first numbers (16, 8, 4, 2, 1) from the cards they selected
    4. +
  4. The sum will be their secret number!
    5. +
+ +

Why does it work?

+

+ 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. +

+

+ Each card contains all numbers that have a "1" in a specific binary position: +

+
    +
  • Card 16: Numbers with 1 in the 16's place (binary position 4)
    • +
  • Card 8: Numbers with 1 in the 8's place (binary position 3)
    • +
  • Card 4: Numbers with 1 in the 4's place (binary position 2)
    • +
  • Card 2: Numbers with 1 in the 2's place (binary position 1)
    • +
  • Card 1: Numbers with 1 in the 1's place (binary position 0)
    • +
+ +
+

Example:

+

The number 19 in binary is 10011, which means 16 + 2 + 1 = 19

+

So 19 appears on cards 16, 2, and 1, but not on cards 8 or 4.

+
+ +

+ When you add up the first numbers from the selected cards, you're reconstructing the binary representation of their secret number! +

+
+ + + + + + {showSocialShare && ( + + )} +
+ + +
+

+ Think of a number between 1 and 31, then select all the cards that contain your number: +

+
+ + + +
+ {cards.map((card) => ( + handleCardToggle(card.id)} + > + +
+ + {card.id} + + {}} // Controlled by card click + /> +
+ + +
+ {card.numbers.map((num) => ( +
+ {num} +
+ ))} +
+ + + ))} +
+ +
+
+ + +
+ + {showResult && result !== null && ( + + +

+ Your number is: {result} +

+

+ {result === 0 ? "Please select at least one card!" : "Amazing, right? ✨"} +

+ + + )} +
+
+ ); +}; + +export default BinarySearchTrick; \ No newline at end of file diff --git a/src/components/InteractiveGallery.tsx b/src/components/InteractiveGallery.tsx index ccd8787..d4bdb35 100644 --- a/src/components/InteractiveGallery.tsx +++ b/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 = () => { diff --git a/src/pages/BinarySearchTrickGreenScreen.tsx b/src/pages/BinarySearchTrickGreenScreen.tsx new file mode 100644 index 0000000..8f96ac9 --- /dev/null +++ b/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 ( + +
+ +
+ + ); +}; + +export default BinarySearchTrickGreenScreen; \ No newline at end of file diff --git a/src/pages/BinarySearchTrickPage.tsx b/src/pages/BinarySearchTrickPage.tsx new file mode 100644 index 0000000..75da09d --- /dev/null +++ b/src/pages/BinarySearchTrickPage.tsx @@ -0,0 +1,13 @@ +import BinarySearchTrick from '@/components/BinarySearchTrick'; + +const BinarySearchTrickPage = () => { + return ( +
+
+ +
+
+ ); +}; + +export default BinarySearchTrickPage; \ No newline at end of file diff --git a/src/pages/theme-pages/DataStructures.tsx b/src/pages/theme-pages/DataStructures.tsx index 6b05598..5dd1c09 100644 --- a/src/pages/theme-pages/DataStructures.tsx +++ b/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 ( - + +
+
+

+ Data Structures +

+

+ Master fundamental and advanced data structures through interactive manipulation and visualization. + Explore trees, graphs, heaps, hash tables, and their real-world applications. +

+
+ + +
+ ); };