From fb312235f3197ae7274251905c8cd9fed0d00aee 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 13:59:42 +0000
Subject: [PATCH] Add green-screen friendly versions

Create green-screen versions of interactives, accessible via "/gs-dark" and "/gs-lite" paths. Hide layout elements, set green background, and adjust text/element colors for optimal green screen use.
---
 src/App.tsx                                   |  2 +
 src/components/GreenScreenWrapper.tsx         | 43 +++++++++++++++++++
 src/pages/BinaryNumberGameGreenScreen.tsx     | 19 ++++++++
 .../theme-pages/discrete-math/Foundations.tsx | 20 ++++++++-
 4 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/components/GreenScreenWrapper.tsx
 create mode 100644 src/pages/BinaryNumberGameGreenScreen.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 729b1e8..dee5719 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import DataStructures from "./pages/theme-pages/DataStructures";
 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 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";
@@ -54,6 +55,7 @@ const App = () => (
           
           {/* Direct interactive routes */}
           <Route path="/binary-number-game" element={<BinaryNumberGamePage />} />
+          <Route path="/binary-number-game/:mode" element={<BinaryNumberGameGreenScreen />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
diff --git a/src/components/GreenScreenWrapper.tsx b/src/components/GreenScreenWrapper.tsx
new file mode 100644
index 0000000..5cdbe7f
--- /dev/null
+++ b/src/components/GreenScreenWrapper.tsx
@@ -0,0 +1,43 @@
+interface GreenScreenWrapperProps {
+  children: React.ReactNode;
+  mode: 'lite' | 'dark';
+}
+
+const GreenScreenWrapper = ({ children, mode }: GreenScreenWrapperProps) => {
+  const bgColor = 'bg-[#00ff00]'; // Pure green for chroma key
+  const textColor = mode === 'lite' ? 'text-black' : 'text-white';
+  
+  return (
+    <div className={`min-h-screen ${bgColor} ${textColor} p-8`}>
+      <style>
+        {`
+          /* Override all colors for green screen mode */
+          .green-screen * {
+            background-color: transparent !important;
+            border-color: ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
+            color: ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
+          }
+          
+          .green-screen button {
+            background-color: ${mode === 'lite' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'} !important;
+            border: 2px solid ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
+          }
+          
+          .green-screen button:hover {
+            background-color: ${mode === 'lite' ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.2)'} !important;
+          }
+          
+          .green-screen input {
+            background-color: ${mode === 'lite' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)'} !important;
+            border: 2px solid ${mode === 'lite' ? '#000000' : '#ffffff'} !important;
+          }
+        `}
+      </style>
+      <div className="green-screen max-w-4xl mx-auto">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default GreenScreenWrapper;
\ No newline at end of file
diff --git a/src/pages/BinaryNumberGameGreenScreen.tsx b/src/pages/BinaryNumberGameGreenScreen.tsx
new file mode 100644
index 0000000..81b8222
--- /dev/null
+++ b/src/pages/BinaryNumberGameGreenScreen.tsx
@@ -0,0 +1,19 @@
+import { useParams } from 'react-router-dom';
+import BinaryNumberGame from '@/components/BinaryNumberGame';
+import GreenScreenWrapper from '@/components/GreenScreenWrapper';
+
+const BinaryNumberGameGreenScreen = () => {
+  const { mode } = useParams<{ mode: 'gs-lite' | 'gs-dark' }>();
+  const greenScreenMode = mode === 'gs-dark' ? 'dark' : 'lite';
+
+  return (
+    <GreenScreenWrapper mode={greenScreenMode}>
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold text-center">Binary Number Representation</h1>
+        <BinaryNumberGame />
+      </div>
+    </GreenScreenWrapper>
+  );
+};
+
+export default BinaryNumberGameGreenScreen;
\ No newline at end of file
diff --git a/src/pages/theme-pages/discrete-math/Foundations.tsx b/src/pages/theme-pages/discrete-math/Foundations.tsx
index 18c67bc..4582803 100644
--- a/src/pages/theme-pages/discrete-math/Foundations.tsx
+++ b/src/pages/theme-pages/discrete-math/Foundations.tsx
@@ -11,6 +11,7 @@ interface Interactive {
   description: string;
   tags: string[];
   component: React.ComponentType;
+  greenScreenPath: string;
 }
 
 const interactives: Interactive[] = [
@@ -20,6 +21,7 @@ const interactives: Interactive[] = [
     description: "Learn how numbers are represented in binary (base-2) format through an interactive guessing game.",
     tags: ["binary", "numbers", "conversion", "representation"],
     component: BinaryNumberGame,
+    greenScreenPath: "/binary-number-game",
   },
 ];
 
@@ -57,8 +59,22 @@ const Foundations = () => {
                 Back to Discrete Math →
               </Link>
             </div>
-            <div className="bg-background border rounded-lg p-6">
-              <InteractiveComponent />
+            <div className="bg-background border rounded-lg p-6 space-y-4">
+              <BinaryNumberGame />
+              <div className="flex gap-2 pt-4 border-t">
+                <Link
+                  to={`${selectedInteractive.greenScreenPath}/gs-lite`}
+                  className="px-3 py-1 text-sm bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
+                >
+                  Green Screen (Light)
+                </Link>
+                <Link
+                  to={`${selectedInteractive.greenScreenPath}/gs-dark`}
+                  className="px-3 py-1 text-sm bg-green-700 text-white rounded hover:bg-green-800 transition-colors"
+                >
+                  Green Screen (Dark)
+                </Link>
+              </div>
             </div>
             <button
               onClick={() => setSelectedInteractive(null)}