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

Adjust box sizing for red boxes

Browse source 
Ensure red boxes do not exceed the size of black boxes during the animation sequence.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 10:59:17 +00:00
parent dc0872c3a8
commit 5f22a2f578
1 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/BulgarianSolitaire.tsx
View file

@ -476,11 +476,11 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
onDoubleClick={() => handleDoubleClick(boxId)} onDoubleClick={() => handleDoubleClick(boxId)}
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 scale-110 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')
? 'bg-red-500 text-white shadow-lg scale-110' ? '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 scale-110' ? 'animate-fade-from-red shadow-lg'
: 'bg-primary text-primary-foreground hover:bg-primary/80' : 'bg-primary text-primary-foreground hover:bg-primary/80'
}`} }`}
title="Drag to move or double-click to move to last-used column" title="Drag to move or double-click to move to last-used column"