Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changes

Browse source
This commit is contained in:
gpt-engineer-app[bot] 2025-12-01 07:10:55 +00:00
parent b398f4864b
commit 0b89a70805
1 changed files with 37 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/components/FerrersRogersRamanujan.tsx
View file

@ -15,6 +15,7 @@ const FerrersRogersRamanujan = () => {
const [isAnimating, setIsAnimating] = useState(false); const [isAnimating, setIsAnimating] = useState(false);
const [hookColors, setHookColors] = useState<string[]>([]); const [hookColors, setHookColors] = useState<string[]>([]);
const [baseHue, setBaseHue] = useState(0); const [baseHue, setBaseHue] = useState(0);
const [completedHooks, setCompletedHooks] = useState<Array<{ row: number; col: number }>>([]);
useEffect(() => { useEffect(() => {
// Initialize sliders with all zeros // Initialize sliders with all zeros
@ -48,6 +49,7 @@ const FerrersRogersRamanujan = () => {
setAnimationStep(0); setAnimationStep(0);
setIsAnimating(false); setIsAnimating(false);
setHookColors([]); setHookColors([]);
setCompletedHooks([]);
}; };
const generateRRPartition = () => { const generateRRPartition = () => {
@ -60,6 +62,7 @@ const FerrersRogersRamanujan = () => {
const newBaseHue = Math.floor(Math.random() * 360); const newBaseHue = Math.floor(Math.random() * 360);
setBaseHue(newBaseHue); setBaseHue(newBaseHue);
setHookColors([]); setHookColors([]);
setCompletedHooks([]);
setRRPartition([]); setRRPartition([]);
setAnimationStep(0); setAnimationStep(0);
setIsAnimating(true); setIsAnimating(true);
@ -111,8 +114,9 @@ const FerrersRogersRamanujan = () => {
const estimatedTotalHooks = Math.min(partition.length, partition[0] || 0); const estimatedTotalHooks = Math.min(partition.length, partition[0] || 0);
const color = generateHookColor(animationStep, estimatedTotalHooks); const color = generateHookColor(animationStep, estimatedTotalHooks);
// Update colors and RR partition // Update colors, completed hooks, and RR partition
setHookColors(prev => [...prev, color]); setHookColors(prev => [...prev, color]);
setCompletedHooks(prev => [...prev, { row, col }]);
setRRPartition(prev => [...prev, hookSize]); setRRPartition(prev => [...prev, hookSize]);
// Schedule next step // Schedule next step
@ -126,9 +130,6 @@ const FerrersRogersRamanujan = () => {
const renderFerrersDiagram = (partition: number[], highlightHook?: { row: number; col: number }, isOriginal = true) => { const renderFerrersDiagram = (partition: number[], highlightHook?: { row: number; col: number }, isOriginal = true) => {
if (partition.length === 0) return null; if (partition.length === 0) return null;
const boxSize = 30;
const gap = 2;
return ( return (
<div className="inline-block p-4 bg-card rounded-lg border"> <div className="inline-block p-4 bg-card rounded-lg border">
{partition.map((count, rowIdx) => ( {partition.map((count, rowIdx) => (
@ -137,35 +138,41 @@ const FerrersRogersRamanujan = () => {
let backgroundColor = 'bg-secondary'; let backgroundColor = 'bg-secondary';
let borderColor = 'border-border'; let borderColor = 'border-border';
let extraClasses = 'hover:bg-secondary/80'; let extraClasses = 'hover:bg-secondary/80';
let style: React.CSSProperties = {};
if (isOriginal) { if (isOriginal) {
// Original diagram: color completed hooks on diagonal // Check if this box is part of any completed hook
if (rowIdx === colIdx && rowIdx < hookColors.length) { for (let i = 0; i < completedHooks.length; i++) {
const color = hookColors[rowIdx]; const hook = completedHooks[i];
backgroundColor = ''; const isPartOfHook =
borderColor = ''; (rowIdx === hook.row && colIdx >= hook.col) || // boxes to the right
extraClasses = `scale-105 shadow-md`; (colIdx === hook.col && rowIdx >= hook.row); // boxes below
return (
<div if (isPartOfHook) {
key={colIdx} const color = hookColors[i];
className={`w-[30px] h-[30px] border-2 transition-all duration-300 ${extraClasses}`} backgroundColor = '';
style={{ borderColor = '';
backgroundColor: color, extraClasses = 'scale-105 shadow-md';
borderColor: color style = {
}} backgroundColor: color,
/> borderColor: color
); };
break; // Use the first matching hook's color
}
} }
// Highlight current hook being processed // Highlight current hook being processed (override completed hooks)
const isHook = highlightHook && if (highlightHook) {
((rowIdx === highlightHook.row && colIdx >= highlightHook.col) || const isCurrentHook =
(colIdx === highlightHook.col && rowIdx >= highlightHook.row)); (rowIdx === highlightHook.row && colIdx >= highlightHook.col) ||
(colIdx === highlightHook.col && rowIdx >= highlightHook.row);
if (isHook) {
backgroundColor = 'bg-primary'; if (isCurrentHook) {
borderColor = 'border-primary'; backgroundColor = 'bg-primary';
extraClasses = 'scale-110 shadow-lg'; borderColor = 'border-primary';
extraClasses = 'scale-110 shadow-lg animate-pulse';
style = {};
}
} }
} }
@ -173,6 +180,7 @@ const FerrersRogersRamanujan = () => {
<div <div
key={colIdx} key={colIdx}
className={`w-[30px] h-[30px] border-2 transition-all duration-300 ${backgroundColor} ${borderColor} ${extraClasses}`} className={`w-[30px] h-[30px] border-2 transition-all duration-300 ${backgroundColor} ${borderColor} ${extraClasses}`}
style={style}
/> />
); );
})} })}