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

Allow dragging blocks across columns

Browse source 
Enabled dragging of blocks between columns before the simulation begins in `src/components/BulgarianSolitaire.tsx`.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-21 11:22:06 +00:00
parent 8944a5e485
commit e92a054f59
1 changed files with 31 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/BulgarianSolitaire.tsx
View file

@ -75,6 +75,26 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
setDraggedBox(null);
};
const handleDropToContainer = (e: React.DragEvent) => {
e.preventDefault();
if (draggedBox === null) return;
const box = boxes.find(b => b.id === draggedBox);
if (!box || box.columnIndex === null) return;
// Remove from column
setColumns(prev => prev.map((col, idx) =>
idx === box.columnIndex ? col.filter(id => id !== draggedBox) : col
));
// Return to container
setBoxes(prev => prev.map(b =>
b.id === draggedBox ? { ...b, columnIndex: null } : b
));
setDraggedBox(null);
};
const handleDoubleClick = (boxId: number) => {
const box = boxes.find(b => b.id === boxId);
if (!box || box.columnIndex === null) return;
@ -237,7 +257,11 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
{/* Container */}
<div className="flex justify-center">
<div className="border-2 border-dashed border-muted-foreground rounded-lg p-4 min-h-[120px] bg-muted/20">
<div
className="border-2 border-dashed border-muted-foreground rounded-lg p-4 min-h-[120px] bg-muted/20"
onDragOver={handleDragOver}
onDrop={handleDropToContainer}
>
<div className="text-center text-sm text-muted-foreground mb-2">Container</div>
<div className="flex flex-wrap gap-2 justify-center max-w-md">
{containerBoxes.map((box) => (
@ -277,13 +301,15 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
{column.map((boxId, boxIndex) => (
<div
key={boxId}
draggable={!isPlaying}
onDragStart={(e) => handleDragStart(e, boxId)}
onDoubleClick={() => handleDoubleClick(boxId)}
className={`w-8 h-8 rounded cursor-pointer 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)
? 'bg-red-500 text-white shadow-lg scale-110'
: 'bg-primary text-primary-foreground hover:bg-primary/80'
} ${isAnimating && highlightedBoxes.has(boxId) ? 'animate-pulse' : ''}`}
title="Double-click to return to container"
title="Drag to move or double-click to return to container"
>
{boxId + 1}
</div>
@ -321,7 +347,8 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
<ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">
<li>Choose a value for n (2-6) using the slider</li>
<li>Drag the {totalBoxes} numbered boxes from the container into any of the columns</li>
<li>Double-click any box in a column to return it to the container</li>
<li>Drag boxes between columns to rearrange them as needed</li>
<li>Drag boxes back to the container or double-click any box in a column to return it</li>
<li>Once all boxes are placed in columns, click "Play" to start the simulation</li>
<li>Watch as the algorithm takes one box from each non-empty column to form a new column</li>
<li>The process continues until reaching the triangular configuration: columns of sizes 1, 2, 3, ..., n</li>