Changes

src/App.tsx

@@ -60,6 +60,7 @@ import NeighborSumAvoidancePage from './pages/NeighborSumAvoidancePage';
 import BurnsidesLemmaPage from './pages/BurnsidesLemmaPage';
 import CubeColoringPage from './pages/CubeColoringPage';
 import PresentsPuzzlePage from './pages/PresentsPuzzlePage';
+import FerrersRogersRamanujanPage from './pages/FerrersRogersRamanujanPage';
 
 const queryClient = new QueryClient();
 
@@ -89,6 +90,7 @@ const App = () => (
            <Route path="/themes/discrete-math/structures/burnsides-lemma" element={<BurnsidesLemmaPage />} />
            <Route path="/themes/discrete-math/structures/cube-coloring" element={<CubeColoringPage />} />
            <Route path="/themes/discrete-math/uncertainty/presents-puzzle" element={<PresentsPuzzlePage />} />
+           <Route path="/themes/discrete-math/counting/ferrers-rogers-ramanujan" element={<FerrersRogersRamanujanPage />} />
           <Route path="/themes/social-choice" element={<SocialChoice />} />
           <Route path="/themes/advanced-algorithms" element={<AdvancedAlgorithms />} />
           <Route path="/themes/data-structures" element={<DataStructures />} />

src/components/FerrersRogersRamanujan.tsx

@@ -0,0 +1,285 @@
+import { useState, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+
+const FerrersRogersRamanujan = () => {
+  const [n, setN] = useState(14);
+  const [partitionSliders, setPartitionSliders] = useState<number[]>([]);
+  const [committedPartition, setCommittedPartition] = useState<number[]>([]);
+  const [rrPartition, setRRPartition] = useState<number[]>([]);
+  const [animatingHook, setAnimatingHook] = useState<{ row: number; col: number } | null>(null);
+  const [animationStep, setAnimationStep] = useState(0);
+
+  useEffect(() => {
+    // Initialize sliders with all zeros
+    setPartitionSliders(new Array(n).fill(0));
+    setCommittedPartition([]);
+    setRRPartition([]);
+  }, [n]);
+
+  const currentSum = partitionSliders.reduce((sum, val) => sum + val, 0);
+  const isValid = currentSum === n;
+
+  const handleCommit = () => {
+    if (!isValid) {
+      toast.error(`Sum must equal ${n}. Current sum: ${currentSum}`);
+      return;
+    }
+    // Filter out zeros and sort in descending order
+    const partition = partitionSliders.filter(v => v > 0).sort((a, b) => b - a);
+    setCommittedPartition(partition);
+    setRRPartition([]);
+    setAnimatingHook(null);
+    setAnimationStep(0);
+    toast.success("Partition committed!");
+  };
+
+  const handleReset = () => {
+    setPartitionSliders(new Array(n).fill(0));
+    setCommittedPartition([]);
+    setRRPartition([]);
+    setAnimatingHook(null);
+    setAnimationStep(0);
+  };
+
+  const generateRRPartition = () => {
+    if (committedPartition.length === 0) {
+      toast.error("Please commit a partition first");
+      return;
+    }
+
+    setRRPartition([]);
+    setAnimationStep(0);
+    
+    // Start animation
+    animateHooks();
+  };
+
+  const animateHooks = () => {
+    const hooks: number[] = [];
+    const partition = committedPartition;
+    
+    // We need to traverse the L-shaped hooks
+    // Start from position (0, 0) and go around the perimeter
+    let step = 0;
+    const maxRow = partition.length;
+    const maxCol = partition[0] || 0;
+
+    const processNextHook = () => {
+      // Determine which hook to process
+      // We traverse diagonally: (0,0), (1,0), (0,1), (2,0), (1,1), (0,2), ...
+      let row = 0, col = 0;
+      let diag = 0;
+      let found = false;
+
+      // Find the step-th valid hook
+      let hookCount = 0;
+      for (let d = 0; d < maxRow + maxCol; d++) {
+        for (let r = 0; r <= d; r++) {
+          const c = d - r;
+          if (r < partition.length && c < partition[r]) {
+            if (hookCount === step) {
+              row = r;
+              col = c;
+              found = true;
+              break;
+            }
+            hookCount++;
+          }
+        }
+        if (found) break;
+      }
+
+      if (!found) {
+        // Animation complete
+        setAnimatingHook(null);
+        return;
+      }
+
+      setAnimatingHook({ row, col });
+
+      // Calculate hook size: boxes to the right + boxes below + 1 (the box itself)
+      const boxesRight = partition[row] - col - 1;
+      let boxesBelow = 0;
+      for (let r = row + 1; r < partition.length; r++) {
+        if (partition[r] > col) {
+          boxesBelow++;
+        } else {
+          break;
+        }
+      }
+      const hookSize = boxesRight + boxesBelow + 1;
+
+      hooks.push(hookSize);
+      setRRPartition([...hooks]);
+
+      setTimeout(() => {
+        setAnimationStep(step + 1);
+      }, 500);
+    };
+
+    const interval = setInterval(() => {
+      processNextHook();
+      if (animatingHook === null && step > 0) {
+        clearInterval(interval);
+      }
+    }, 500);
+
+    processNextHook();
+  };
+
+  const renderFerrersDiagram = (partition: number[], highlightHook?: { row: number; col: number }) => {
+    if (partition.length === 0) return null;
+
+    const boxSize = 30;
+    const gap = 2;
+
+    return (
+      <div className="inline-block p-4 bg-card rounded-lg border">
+        {partition.map((count, rowIdx) => (
+          <div key={rowIdx} className="flex gap-[2px] mb-[2px]">
+            {Array.from({ length: count }).map((_, colIdx) => {
+              const isHook = highlightHook && 
+                ((rowIdx === highlightHook.row && colIdx >= highlightHook.col) ||
+                 (colIdx === highlightHook.col && rowIdx >= highlightHook.row));
+              
+              return (
+                <div
+                  key={colIdx}
+                  className={`w-[30px] h-[30px] border-2 transition-all duration-300 ${
+                    isHook 
+                      ? 'bg-primary border-primary scale-110 shadow-lg' 
+                      : 'bg-secondary border-border hover:bg-secondary/80'
+                  }`}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Card className="p-6 max-w-6xl mx-auto">
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-2xl font-bold mb-2">Ferrers Diagram & Rogers-Ramanujan Partition</h2>
+          <p className="text-muted-foreground">
+            Create a partition of a number and visualize its transformation using L-shaped hooks.
+          </p>
+        </div>
+
+        {/* Number Input */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Target Number (n)</label>
+          <Input
+            type="number"
+            min={1}
+            max={30}
+            value={n}
+            onChange={(e) => setN(Math.max(1, Math.min(30, parseInt(e.target.value) || 1)))}
+            className="w-32"
+            disabled={committedPartition.length > 0}
+          />
+        </div>
+
+        {/* Partition Sliders */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold">Create Partition</h3>
+            <div className="text-sm">
+              Sum: <span className={isValid ? "text-green-600 font-bold" : "text-destructive font-bold"}>{currentSum}</span> / {n}
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {partitionSliders.map((value, idx) => (
+              <div key={idx} className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm">Part {idx + 1}</label>
+                  <span className="text-sm font-mono">{value}</span>
+                </div>
+                <Slider
+                  value={[value]}
+                  onValueChange={([newVal]) => {
+                    const newSliders = [...partitionSliders];
+                    newSliders[idx] = newVal;
+                    setPartitionSliders(newSliders);
+                  }}
+                  max={n}
+                  step={1}
+                  disabled={committedPartition.length > 0}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-2">
+            <Button 
+              onClick={handleCommit} 
+              disabled={!isValid || committedPartition.length > 0}
+            >
+              Commit Partition
+            </Button>
+            <Button 
+              onClick={handleReset} 
+              variant="outline"
+            >
+              Reset
+            </Button>
+          </div>
+        </div>
+
+        {/* Display Partitions */}
+        {committedPartition.length > 0 && (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-lg font-semibold mb-2">Your Partition</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                {committedPartition.join(" + ")} = {n}
+              </p>
+              {renderFerrersDiagram(committedPartition, animatingHook || undefined)}
+            </div>
+
+            <Button 
+              onClick={generateRRPartition}
+              disabled={rrPartition.length > 0}
+              className="w-full md:w-auto"
+            >
+              Generate Rogers-Ramanujan Partition
+            </Button>
+
+            {/* RR Partition Display */}
+            {rrPartition.length > 0 && (
+              <div className="pt-6 border-t">
+                <h3 className="text-lg font-semibold mb-2">Rogers-Ramanujan Partition</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  {rrPartition.join(" + ")} = {n} (parts differ by ≥ 2)
+                </p>
+                {renderFerrersDiagram(rrPartition)}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Explanation */}
+        <div className="pt-6 border-t space-y-2 text-sm text-muted-foreground">
+          <p>
+            <strong>Ferrers Diagram:</strong> A visual representation of an integer partition using boxes arranged in rows.
+          </p>
+          <p>
+            <strong>Rogers-Ramanujan Partition:</strong> Traverse the L-shaped hooks of the Ferrers diagram. 
+            Each hook consists of all boxes to the right and below (including the corner box). 
+            The hook sizes form a new partition where parts differ by at least 2.
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default FerrersRogersRamanujan;

src/pages/FerrersRogersRamanujanPage.tsx

@@ -0,0 +1,28 @@
+import Layout from "@/components/Layout";
+import FerrersRogersRamanujan from "@/components/FerrersRogersRamanujan";
+import SocialShare from "@/components/SocialShare";
+
+const FerrersRogersRamanujanPage = () => {
+  return (
+    <Layout>
+      <div className="container mx-auto py-8 px-4 space-y-8">
+        <div className="space-y-2">
+          <h1 className="text-4xl font-bold">Ferrers Diagram & Rogers-Ramanujan Partition</h1>
+          <p className="text-muted-foreground text-lg">
+            Explore integer partitions through visual Ferrers diagrams and discover the elegant Rogers-Ramanujan transformation.
+          </p>
+        </div>
+
+        <FerrersRogersRamanujan />
+
+        <SocialShare
+          title="Ferrers Diagram & Rogers-Ramanujan Partition"
+          description="Explore integer partitions through visual Ferrers diagrams and discover the elegant Rogers-Ramanujan transformation."
+          url="https://lovable.dev/themes/discrete-math/counting/ferrers-rogers-ramanujan"
+        />
+      </div>
+    </Layout>
+  );
+};
+
+export default FerrersRogersRamanujanPage;

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

@@ -1,11 +1,38 @@
-import ComingSoon from "@/components/ComingSoon";
+import Layout from "@/components/Layout";
+import InteractiveCard from "@/components/InteractiveCard";
+import { Grid } from "lucide-react";
 
 const Counting = () => {
+  const interactives = [
+    {
+      id: "ferrers-rogers-ramanujan",
+      title: "Ferrers Diagram & Rogers-Ramanujan Partition",
+      description: "Visualize integer partitions as Ferrers diagrams and discover the Rogers-Ramanujan transformation using L-shaped hooks.",
+      tags: ["Partitions", "Visualization", "Combinatorics"],
+      path: "/themes/discrete-math/counting/ferrers-rogers-ramanujan",
+      icon: Grid,
+    }
+  ];
+
   return (
-    <ComingSoon 
+    <Layout>
-      title="Counting"
+      <div className="container mx-auto py-8 px-4">
-      description="Explore combinatorics, permutations, combinations, and advanced counting principles through visual tools and interactive exercises."
+        <div className="max-w-4xl mx-auto space-y-8">
-    />
+          <div className="space-y-2">
+            <h1 className="text-4xl font-bold">Counting</h1>
+            <p className="text-muted-foreground text-lg">
+              Explore combinatorics, permutations, combinations, and advanced counting principles through visual tools and interactive exercises.
+            </p>
+          </div>
+
+          <div className="grid gap-6">
+            {interactives.map((interactive) => (
+              <InteractiveCard key={interactive.id} {...interactive} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
   );
 };