Changes

src/components/FerrersRogersRamanujan.tsx

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