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

Color full hook segments

Browse source 
Color entire L-shaped hooks in Ferrers-Ramanujan diagram, not just diagonal boxes. Applies colors to all boxes forming each hook (boxes to the right in the same row and below in the same column) with consistent coloring across both diagrams. Updates color generation and rendering accordingly.

X-Lovable-Edit-ID: edt-5dda2f3e-2253-418a-a683-aaa8c065ec76
This commit is contained in:
gpt-engineer-app[bot] 2025-12-01 07:10:55 +00:00
commit fd3e1ac8d7
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 [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}
/>
);
})}