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

Refactor Bulgarian Solitaire layout

Browse source 
Adjusted the layout of Bulgarian Solitaire to display up to 15 columns before wrapping to a new row. Removed labels from the small black boxes as they are unnecessary.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-21 11:25:26 +00:00
parent e92a054f59
commit ddad5ba645
1 changed files with 3 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/BulgarianSolitaire.tsx
View file

@ -269,9 +269,8 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
key={box.id} key={box.id}
draggable={!isPlaying} draggable={!isPlaying}
onDragStart={(e) => handleDragStart(e, box.id)} onDragStart={(e) => handleDragStart(e, box.id)}
className="w-8 h-8 bg-primary rounded cursor-move hover:bg-primary/80 transition-colors flex items-center justify-center text-primary-foreground text-xs font-medium" className="w-8 h-8 bg-primary rounded cursor-move hover:bg-primary/80 transition-colors"
> >
{box.id + 1}
</div> </div>
))} ))}
</div> </div>
@ -287,13 +286,14 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
)} )}
</div> </div>
<div className="flex justify-center gap-1 flex-wrap max-w-2xl mx-auto"> <div className="flex justify-center gap-1 flex-wrap max-w-full mx-auto">
{columns.map((column, index) => ( {columns.map((column, index) => (
<div <div
key={index} key={index}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, index)} onDrop={(e) => handleDrop(e, index)}
className="border border-muted-foreground rounded-lg min-h-[100px] w-12 p-1 bg-background/50 flex flex-col-reverse gap-1 transition-all duration-500" className="border border-muted-foreground rounded-lg min-h-[100px] w-12 p-1 bg-background/50 flex flex-col-reverse gap-1 transition-all duration-500"
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">
{index + 1} {index + 1}
@ -311,7 +311,6 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
} ${isAnimating && highlightedBoxes.has(boxId) ? 'animate-pulse' : ''}`} } ${isAnimating && highlightedBoxes.has(boxId) ? 'animate-pulse' : ''}`}
title="Drag to move or double-click to return to container" title="Drag to move or double-click to return to container"
> >
{boxId + 1}
</div> </div>
))} ))}
</div> </div>