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

Refine animation sequence

Browse source 
Adjusted the animation sequence to first sort the columns, and then fade the all-red tower to black.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 11:03:14 +00:00
parent 106f4f0659
commit de1ee42956
1 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/BulgarianSolitaire.tsx
View file

@ -285,14 +285,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
await sleep(500); // Show move await sleep(500); // Show move
await waitForUnpause(); await waitForUnpause();
// Phase 4: Fade from red to normal // Phase 4: Sort columns while boxes are still red
setAnimationPhase('fade-from-red');
await sleep(500); // Fade from red animation
await waitForUnpause();
// Clear highlighting and animation
setHighlightedBoxes(new Set());
setIsAnimating(false);
setAnimationPhase('sorting'); setAnimationPhase('sorting');
// Sort columns by height (tallest to left) with smooth transition // Sort columns by height (tallest to left) with smooth transition
@ -319,7 +312,18 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
})); }));
await sleep(800); // Wait for sorting animation to complete await sleep(800); // Wait for sorting animation to complete
await waitForUnpause();
// Phase 5: Fade from red to normal
setAnimationPhase('fade-from-red');
await sleep(500); // Fade from red animation
await waitForUnpause();
// Clear highlighting and animation
setHighlightedBoxes(new Set());
setIsAnimating(false);
setAnimationPhase('idle'); setAnimationPhase('idle');
await waitForUnpause(); // Check for pause again await waitForUnpause(); // Check for pause again
} }
@ -478,7 +482,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
className={`w-8 h-8 rounded cursor-move transition-all duration-300 flex items-center justify-center text-xs font-medium mx-auto ${ className={`w-8 h-8 rounded cursor-move transition-all duration-300 flex items-center justify-center text-xs font-medium mx-auto ${
highlightedBoxes.has(boxId) && animationPhase === 'fade-to-red' highlightedBoxes.has(boxId) && animationPhase === 'fade-to-red'
? 'animate-fade-to-red shadow-lg text-white' ? 'animate-fade-to-red shadow-lg text-white'
: highlightedBoxes.has(boxId) && (animationPhase === 'red-pause' || animationPhase === 'moving') : highlightedBoxes.has(boxId) && (animationPhase === 'red-pause' || animationPhase === 'moving' || animationPhase === 'sorting')
? 'bg-red-500 text-white shadow-lg' ? 'bg-red-500 text-white shadow-lg'
: highlightedBoxes.has(boxId) && animationPhase === 'fade-from-red' : highlightedBoxes.has(boxId) && animationPhase === 'fade-from-red'
? 'animate-fade-from-red shadow-lg' ? 'animate-fade-from-red shadow-lg'