Add Ferrers-RR interactive
Introduce a new interactive under discrete math counting: - plan for Ferrers diagram with partition sliders, commit, and RR partition generation - scaffold components, page, and routing integration - prepare for animated hook-based RR partition generation and visualization X-Lovable-Edit-ID: edt-63dbabbf-9a98-4e18-a83d-f8c0f2d03697
This commit is contained in:
gpt-engineer-app[bot]
commit
a87231ce46
4 changed files with 347 additions and 5 deletions
|
|
@ -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 />} />
|
||||
|
|
|
|||
285
src/components/FerrersRogersRamanujan.tsx
Normal file
285
src/components/FerrersRogersRamanujan.tsx
Normal file
|
|
@ -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;
|
||||
28
src/pages/FerrersRogersRamanujanPage.tsx
Normal file
28
src/pages/FerrersRogersRamanujanPage.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
title="Counting"
|
||||
description="Explore combinatorics, permutations, combinations, and advanced counting principles through visual tools and interactive exercises."
|
||||
/>
|
||||
<Layout>
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue