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

Smooth column sorting animation

Browse source 
Added smooth animation for column rearrangement in Bulgarian Solitaire, transitioning from the current abrupt sorting to a more fluid visual update.
-edited src/components/BulgarianSolitaire.tsx
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 11:00:52 +00:00
parent 5f22a2f578
commit 106f4f0659
1 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/BulgarianSolitaire.tsx
View file

@ -24,7 +24,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
const [isComplete, setIsComplete] = useState(false); const [isComplete, setIsComplete] = useState(false);
const [highlightedBoxes, setHighlightedBoxes] = useState<Set<number>>(new Set()); const [highlightedBoxes, setHighlightedBoxes] = useState<Set<number>>(new Set());
const [isAnimating, setIsAnimating] = useState(false); const [isAnimating, setIsAnimating] = useState(false);
const [animationPhase, setAnimationPhase] = useState<'idle' | 'fade-to-red' | 'red-pause' | 'moving' | 'fade-from-red'>('idle'); const [animationPhase, setAnimationPhase] = useState<'idle' | 'fade-to-red' | 'red-pause' | 'moving' | 'fade-from-red' | 'sorting'>('idle');
const [lastUsedColumn, setLastUsedColumn] = useState<number | null>(null); const [lastUsedColumn, setLastUsedColumn] = useState<number | null>(null);
const [selectedBoxForMove, setSelectedBoxForMove] = useState<number | null>(null); const [selectedBoxForMove, setSelectedBoxForMove] = useState<number | null>(null);
const [showInstructions, setShowInstructions] = useState(false); const [showInstructions, setShowInstructions] = useState(false);
@ -293,9 +293,9 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
// Clear highlighting and animation // Clear highlighting and animation
setHighlightedBoxes(new Set()); setHighlightedBoxes(new Set());
setIsAnimating(false); setIsAnimating(false);
setAnimationPhase('idle'); setAnimationPhase('sorting');
// Sort columns by height (tallest to left) // Sort columns by height (tallest to left) with smooth transition
const columnData = currentColumns.map((col, index) => ({ col, originalIndex: index })) const columnData = currentColumns.map((col, index) => ({ col, originalIndex: index }))
.filter(item => item.col.length > 0) .filter(item => item.col.length > 0)
.sort((a, b) => b.col.length - a.col.length); .sort((a, b) => b.col.length - a.col.length);
@ -318,7 +318,8 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
return box; return box;
})); }));
await sleep(800); // Wait to see the sorted result await sleep(800); // Wait for sorting animation to complete
setAnimationPhase('idle');
await waitForUnpause(); // Check for pause again await waitForUnpause(); // Check for pause again
} }
@ -460,9 +461,9 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, index)} onDrop={(e) => handleDrop(e, index)}
onClick={(e) => handleColumnClick(e, index)} onClick={(e) => handleColumnClick(e, index)}
className={`border rounded-lg min-h-[100px] w-12 p-1 bg-background/50 flex flex-col-reverse gap-1 transition-all duration-500 ${ className={`border rounded-lg min-h-[100px] w-12 p-1 bg-background/50 flex flex-col-reverse gap-1 transition-all duration-700 ease-in-out ${
selectedBoxForMove !== null ? 'border-blue-500 border-2 cursor-pointer hover:bg-blue-50' : 'border-muted-foreground' selectedBoxForMove !== null ? 'border-blue-500 border-2 cursor-pointer hover:bg-blue-50' : 'border-muted-foreground'
}`} } ${animationPhase === 'sorting' ? 'transform-gpu' : ''}`}
style={{ flexBasis: `calc(${100/15}% - 0.25rem)`, minWidth: '48px' }} style={{ flexBasis: `calc(${100/15}% - 0.25rem)`, minWidth: '48px' }}
> >
<div className="text-xs text-center text-muted-foreground mb-1 transform rotate-0"> <div className="text-xs text-center text-muted-foreground mb-1 transform rotate-0">