Add Burnside's Lemma interactive

src/App.tsx

@@ -57,6 +57,7 @@ import StackingBlocksPage from './pages/StackingBlocksPage';
 import ParityBitsGamePage from './pages/ParityBitsGamePage';
 import CrapsGamePage from './pages/CrapsGamePage';
 import NeighborSumAvoidancePage from './pages/NeighborSumAvoidancePage';
+import BurnsidesLemmaPage from './pages/BurnsidesLemmaPage';
 
 const queryClient = new QueryClient();
 
@@ -83,6 +84,7 @@ const App = () => (
           <Route path="/themes/discrete-math/numbers" element={<Numbers />} />
           <Route path="/themes/discrete-math/graphs" element={<Graphs />} />
           <Route path="/themes/discrete-math/graphs/neighbor-sum-avoidance" element={<NeighborSumAvoidancePage />} />
+          <Route path="/themes/discrete-math/structures/burnsides-lemma" element={<BurnsidesLemmaPage />} />
           <Route path="/themes/social-choice" element={<SocialChoice />} />
           <Route path="/themes/advanced-algorithms" element={<AdvancedAlgorithms />} />
           <Route path="/themes/data-structures" element={<DataStructures />} />

src/components/BurnsidesLemma.tsx

@@ -0,0 +1,359 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import { Badge } from '@/components/ui/badge';
+import SocialShare from './SocialShare';
+import { RotateCw, Palette } from 'lucide-react';
+
+interface BurnsidesLemmaProps {
+  showSocialShare?: boolean;
+  shareUrl?: string;
+}
+
+interface Necklace {
+  colors: number[];
+  id: string;
+}
+
+const BurnsidesLemma = ({ showSocialShare = false, shareUrl }: BurnsidesLemmaProps) => {
+  const [numBeads, setNumBeads] = useState(6);
+  const [numColors, setNumColors] = useState(3);
+  const [allNecklaces, setAllNecklaces] = useState<Necklace[]>([]);
+  const [equivalenceClasses, setEquivalenceClasses] = useState<Necklace[][]>([]);
+  const [showFormula, setShowFormula] = useState(false);
+
+  const colorPalette = [
+    'hsl(var(--primary))',
+    'hsl(var(--accent))',
+    'hsl(220, 90%, 56%)',
+    'hsl(142, 76%, 36%)',
+    'hsl(38, 92%, 50%)',
+    'hsl(280, 70%, 60%)',
+  ];
+
+  // Generate all possible colorings
+  const generateAllColorings = (beads: number, colors: number): Necklace[] => {
+    const total = Math.pow(colors, beads);
+    const necklaces: Necklace[] = [];
+    
+    for (let i = 0; i < total; i++) {
+      const coloring: number[] = [];
+      let num = i;
+      for (let j = 0; j < beads; j++) {
+        coloring.push(num % colors);
+        num = Math.floor(num / colors);
+      }
+      necklaces.push({
+        colors: coloring,
+        id: coloring.join(',')
+      });
+    }
+    
+    return necklaces;
+  };
+
+  // Rotate a necklace by k positions
+  const rotate = (colors: number[], k: number): number[] => {
+    const n = colors.length;
+    const rotated = [...colors];
+    return rotated.slice(k % n).concat(rotated.slice(0, k % n));
+  };
+
+  // Get canonical form (lexicographically smallest rotation)
+  const getCanonical = (colors: number[]): string => {
+    const n = colors.length;
+    let minRotation = colors;
+    
+    for (let i = 1; i < n; i++) {
+      const rotated = rotate(colors, i);
+      if (rotated.join(',') < minRotation.join(',')) {
+        minRotation = rotated;
+      }
+    }
+    
+    return minRotation.join(',');
+  };
+
+  // Group necklaces into equivalence classes
+  const groupByEquivalence = (necklaces: Necklace[]): Necklace[][] => {
+    const canonicalMap = new Map<string, Necklace[]>();
+    
+    for (const necklace of necklaces) {
+      const canonical = getCanonical(necklace.colors);
+      if (!canonicalMap.has(canonical)) {
+        canonicalMap.set(canonical, []);
+      }
+      canonicalMap.get(canonical)!.push(necklace);
+    }
+    
+    return Array.from(canonicalMap.values());
+  };
+
+  // Calculate using Burnside's Lemma
+  const calculateBurnsideLemma = (): number => {
+    let sum = 0;
+    const n = numBeads;
+    const k = numColors;
+    
+    // For each rotation (including identity)
+    for (let r = 0; r < n; r++) {
+      // Count colorings fixed by this rotation
+      const gcd = getGCD(n, r);
+      sum += Math.pow(k, gcd);
+    }
+    
+    return sum / n;
+  };
+
+  const getGCD = (a: number, b: number): number => {
+    return b === 0 ? a : getGCD(b, a % b);
+  };
+
+  useEffect(() => {
+    const necklaces = generateAllColorings(numBeads, numColors);
+    setAllNecklaces(necklaces);
+    const classes = groupByEquivalence(necklaces);
+    setEquivalenceClasses(classes);
+  }, [numBeads, numColors]);
+
+  const renderNecklace = (necklace: Necklace, size: 'small' | 'medium' = 'medium') => {
+    const radius = size === 'small' ? 30 : 50;
+    const beadRadius = size === 'small' ? 8 : 12;
+    const svgSize = size === 'small' ? 80 : 130;
+    const center = svgSize / 2;
+    
+    return (
+      <svg width={svgSize} height={svgSize} className="mx-auto">
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke="hsl(var(--border))"
+          strokeWidth="1"
+          strokeDasharray="2,2"
+        />
+        {necklace.colors.map((color, i) => {
+          const angle = (2 * Math.PI * i) / necklace.colors.length - Math.PI / 2;
+          const x = center + radius * Math.cos(angle);
+          const y = center + radius * Math.sin(angle);
+          
+          return (
+            <g key={i}>
+              <circle
+                cx={x}
+                cy={y}
+                r={beadRadius}
+                fill={colorPalette[color]}
+                stroke="hsl(var(--foreground))"
+                strokeWidth="2"
+              />
+            </g>
+          );
+        })}
+      </svg>
+    );
+  };
+
+  const burnsideResult = calculateBurnsideLemma();
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <RotateCw className="w-6 h-6" />
+            Burnside's Lemma: Necklace Colorings
+          </CardTitle>
+          <CardDescription>
+            How many distinct necklaces can you make with {numBeads} beads using {numColors} colors?
+            Two necklaces are the same if one can be rotated to look like the other.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Controls */}
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-medium">Number of Beads</label>
+                <Badge variant="secondary">{numBeads}</Badge>
+              </div>
+              <Slider
+                value={[numBeads]}
+                onValueChange={(value) => setNumBeads(value[0])}
+                min={3}
+                max={8}
+                step={1}
+                className="w-full"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-medium flex items-center gap-2">
+                  <Palette className="w-4 h-4" />
+                  Number of Colors
+                </label>
+                <Badge variant="secondary">{numColors}</Badge>
+              </div>
+              <Slider
+                value={[numColors]}
+                onValueChange={(value) => setNumColors(value[0])}
+                min={2}
+                max={4}
+                step={1}
+                className="w-full"
+              />
+            </div>
+          </div>
+
+          {/* Results Summary */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Card className="bg-surface/50">
+              <CardContent className="pt-6 text-center">
+                <div className="text-3xl font-bold text-primary">{allNecklaces.length}</div>
+                <div className="text-sm text-muted-foreground mt-1">Total Colorings</div>
+                <div className="text-xs text-muted-foreground mt-1">({numColors}^{numBeads})</div>
+              </CardContent>
+            </Card>
+            
+            <Card className="bg-surface/50">
+              <CardContent className="pt-6 text-center">
+                <div className="text-3xl font-bold text-accent">{equivalenceClasses.length}</div>
+                <div className="text-sm text-muted-foreground mt-1">Distinct Necklaces</div>
+                <div className="text-xs text-muted-foreground mt-1">(under rotation)</div>
+              </CardContent>
+            </Card>
+            
+            <Card className="bg-surface/50">
+              <CardContent className="pt-6 text-center">
+                <div className="text-3xl font-bold text-foreground">{burnsideResult}</div>
+                <div className="text-sm text-muted-foreground mt-1">Burnside's Formula</div>
+                <div className="text-xs text-muted-foreground mt-1">matches exactly!</div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Formula Explanation */}
+          <div className="space-y-3">
+            <Button
+              onClick={() => setShowFormula(!showFormula)}
+              variant="outline"
+              className="w-full"
+            >
+              {showFormula ? 'Hide' : 'Show'} Burnside's Lemma Formula
+            </Button>
+            
+            {showFormula && (
+              <Card className="bg-muted/50">
+                <CardContent className="pt-6 space-y-4">
+                  <div>
+                    <h4 className="font-semibold mb-2">Burnside's Lemma</h4>
+                    <p className="text-sm text-muted-foreground">
+                      The number of distinct objects under group action equals the average number of objects fixed by each symmetry.
+                    </p>
+                  </div>
+                  
+                  <div className="bg-background p-4 rounded-lg space-y-3">
+                    <div className="text-center font-mono text-sm">
+                      |X/G| = (1/|G|) × Σ |Fix(g)|
+                    </div>
+                    <div className="text-xs text-muted-foreground space-y-1">
+                      <div>• |X/G| = number of distinct necklaces</div>
+                      <div>• |G| = number of rotations = {numBeads}</div>
+                      <div>• |Fix(g)| = colorings unchanged by rotation g</div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h4 className="font-semibold mb-2 text-sm">For rotation by k positions:</h4>
+                    <p className="text-xs text-muted-foreground">
+                      A coloring is fixed if beads repeat every gcd(n,k) positions.
+                      Number of such colorings = {numColors}^gcd(n,k)
+                    </p>
+                  </div>
+
+                  <div className="bg-background p-3 rounded-lg">
+                    <div className="text-xs font-mono space-y-1">
+                      {Array.from({ length: numBeads }, (_, i) => {
+                        const gcd = getGCD(numBeads, i);
+                        return (
+                          <div key={i}>
+                            Rotation by {i}: {numColors}^{gcd} = {Math.pow(numColors, gcd)} fixed colorings
+                          </div>
+                        );
+                      })}
+                      <div className="border-t border-border pt-1 mt-2">
+                        Sum = {Array.from({ length: numBeads }, (_, i) => Math.pow(numColors, getGCD(numBeads, i))).reduce((a, b) => a + b, 0)}
+                      </div>
+                      <div className="font-semibold">
+                        Result = {Array.from({ length: numBeads }, (_, i) => Math.pow(numColors, getGCD(numBeads, i))).reduce((a, b) => a + b, 0)} / {numBeads} = {burnsideResult}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* Equivalence Classes Display */}
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-lg font-semibold mb-2">
+                All {equivalenceClasses.length} Distinct Necklaces
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                Each card shows one representative from each equivalence class. 
+                Necklaces in the same class can be rotated to match each other.
+              </p>
+            </div>
+
+            {equivalenceClasses.length <= 20 && (
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                {equivalenceClasses.map((eqClass, idx) => (
+                  <Card key={idx} className="hover:shadow-md transition-shadow">
+                    <CardContent className="pt-4 pb-2">
+                      {renderNecklace(eqClass[0], 'medium')}
+                      <div className="text-center mt-2">
+                        <Badge variant="outline" className="text-xs">
+                          Class {idx + 1}
+                        </Badge>
+                        {eqClass.length > 1 && (
+                          <div className="text-xs text-muted-foreground mt-1">
+                            {eqClass.length} rotations
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            )}
+
+            {equivalenceClasses.length > 20 && (
+              <div className="text-center py-8 space-y-3">
+                <p className="text-muted-foreground">
+                  Too many distinct necklaces to display ({equivalenceClasses.length} total).
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Try reducing the number of beads or colors to see all distinct necklaces.
+                </p>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {showSocialShare && (
+        <SocialShare
+          url={shareUrl || window.location.href}
+          title="Burnside's Lemma - Necklace Colorings"
+          description="Learn about counting distinct objects under symmetry using Burnside's Lemma"
+        />
+      )}
+    </div>
+  );
+};
+
+export default BurnsidesLemma;

src/components/InteractiveIndex.tsx

@@ -252,6 +252,15 @@ const allInteractives: Interactive[] = [
     path: '/themes/discrete-math/graphs/neighbor-sum-avoidance',
     theme: 'Discrete Math',
     dateAdded: '2025-01-22'
+  },
+  {
+    id: 'burnsides-lemma',
+    title: "Burnside's Lemma",
+    description: 'Explore how to count distinct objects under symmetry by creating necklaces with different bead and color combinations.',
+    tags: ['group-theory', 'symmetry', 'combinatorics', 'counting', 'algebra', 'structures'],
+    path: '/themes/discrete-math/structures/burnsides-lemma',
+    theme: 'Discrete Math',
+    dateAdded: '2025-01-22'
   }
 ];
 

src/pages/BurnsidesLemmaPage.tsx

@@ -0,0 +1,14 @@
+import Layout from '@/components/Layout';
+import BurnsidesLemma from '@/components/BurnsidesLemma';
+
+const BurnsidesLemmaPage = () => {
+  return (
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
+        <BurnsidesLemma showSocialShare={true} />
+      </div>
+    </Layout>
+  );
+};
+
+export default BurnsidesLemmaPage;

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

@@ -1,11 +1,118 @@
-import ComingSoon from "@/components/ComingSoon";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import Layout from '@/components/Layout';
+import { useState } from 'react';
+import BurnsidesLemma from '@/components/BurnsidesLemma';
+
+interface Interactive {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  path: string;
+  component: React.ComponentType<{ showSocialShare?: boolean; shareUrl?: string }>;
+}
+
+const interactives: Interactive[] = [
+  {
+    id: 'burnsides-lemma',
+    title: "Burnside's Lemma",
+    description: 'Explore how to count distinct objects under symmetry by creating necklaces with different bead and color combinations. Visualize equivalence classes and verify results using the formula.',
+    tags: ['group-theory', 'symmetry', 'combinatorics', 'counting', 'algebra'],
+    path: '/themes/discrete-math/structures/burnsides-lemma',
+    component: BurnsidesLemma
+  },
+];
 
 const Structures = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedInteractive, setSelectedInteractive] = useState<Interactive | null>(null);
+
+  const filteredInteractives = interactives.filter(interactive =>
+    interactive.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    interactive.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    interactive.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
+
+  if (selectedInteractive) {
+    const InteractiveComponent = selectedInteractive.component;
+    const shareUrl = `${window.location.origin}${selectedInteractive.path}`;
+    return (
+      <div className="min-h-screen bg-background">
+        <div className="container mx-auto px-4 py-8 space-y-6">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => setSelectedInteractive(null)}
+              className="text-primary hover:text-primary/80 font-medium"
+            >
+              ← Back to Structures
+            </button>
+          </div>
+          <InteractiveComponent showSocialShare={true} shareUrl={shareUrl} />
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <ComingSoon 
-      title="Structures"
-      description="Understand algebraic structures, relations, functions, and abstract mathematical systems through interactive visualizations and examples."
-    />
+    <Layout>
+      <div className="max-w-7xl mx-auto p-6">
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <h1 className="text-3xl font-bold text-foreground">Structures</h1>
+            <p className="text-muted-foreground text-lg">
+              Understand algebraic structures, relations, functions, and abstract mathematical systems through interactive visualizations and examples.
+            </p>
+          </div>
+
+          {/* Search bar */}
+          <div className="relative max-w-md">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+            <Input
+              placeholder="Search interactives..."
+              value={searchTerm}
+              onChange={e => setSearchTerm(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+
+          {/* Gallery */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredInteractives.map(interactive => (
+              <Card
+                key={interactive.id}
+                className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105"
+                onClick={() => setSelectedInteractive(interactive)}
+              >
+                <CardHeader className="space-y-3">
+                  <CardTitle className="text-xl text-foreground">{interactive.title}</CardTitle>
+                  <CardDescription className="text-muted-foreground line-clamp-3">
+                    {interactive.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex flex-wrap gap-2">
+                    {interactive.tags.map(tag => (
+                      <Badge key={tag} variant="secondary" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {filteredInteractives.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground text-lg">No interactives found matching your search.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout>
   );
 };