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

52
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];
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 = ''; backgroundColor = '';
borderColor = ''; borderColor = '';
extraClasses = `scale-105 shadow-md`; extraClasses = 'scale-105 shadow-md';
return ( style = {
<div
key={colIdx}
className={`w-[30px] h-[30px] border-2 transition-all duration-300 ${extraClasses}`}
style={{
backgroundColor: color, backgroundColor: color,
borderColor: 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) { if (isCurrentHook) {
backgroundColor = 'bg-primary'; backgroundColor = 'bg-primary';
borderColor = 'border-primary'; borderColor = 'border-primary';
extraClasses = 'scale-110 shadow-lg'; 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}
/> />
); );
})} })}