Update Bulgarian Solitaire

Modify the Bulgarian Solitaire component to send double-clicked boxes to the last-used column.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-21 11:34:27 +00:00
parent 1aeba0b861
commit 23637eb547

View file

@ -23,6 +23,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 [lastUsedColumn, setLastUsedColumn] = useState<number | null>(null);
const totalBoxes = (n * (n + 1)) / 2; const totalBoxes = (n * (n + 1)) / 2;
@ -72,6 +73,8 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
b.id === draggedBox ? { ...b, columnIndex } : b b.id === draggedBox ? { ...b, columnIndex } : b
)); ));
// Track last used column
setLastUsedColumn(columnIndex);
setDraggedBox(null); setDraggedBox(null);
}; };
@ -99,15 +102,28 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
const box = boxes.find(b => b.id === boxId); const box = boxes.find(b => b.id === boxId);
if (!box || box.columnIndex === null) return; if (!box || box.columnIndex === null) return;
// Remove from column // Remove from current column
setColumns(prev => prev.map((col, idx) => setColumns(prev => prev.map((col, idx) =>
idx === box.columnIndex ? col.filter(id => id !== boxId) : col idx === box.columnIndex ? col.filter(id => id !== boxId) : col
)); ));
// Return to container // Move to last used column or container if no last used column
setBoxes(prev => prev.map(b => if (lastUsedColumn !== null && lastUsedColumn !== box.columnIndex) {
b.id === boxId ? { ...b, columnIndex: null } : b // Add to last used column
)); setColumns(prev => prev.map((col, idx) =>
idx === lastUsedColumn ? [...col, boxId] : col
));
// Update box location
setBoxes(prev => prev.map(b =>
b.id === boxId ? { ...b, columnIndex: lastUsedColumn } : b
));
} else {
// Return to container if no last used column or same as current
setBoxes(prev => prev.map(b =>
b.id === boxId ? { ...b, columnIndex: null } : b
));
}
}; };
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
@ -309,7 +325,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
? 'bg-red-500 text-white shadow-lg scale-110' ? 'bg-red-500 text-white shadow-lg scale-110'
: 'bg-primary text-primary-foreground hover:bg-primary/80' : 'bg-primary text-primary-foreground hover:bg-primary/80'
} ${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 move to last-used column"
> >
</div> </div>
))} ))}
@ -347,7 +363,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
<li>Choose a value for n (2-6) using the slider</li> <li>Choose a value for n (2-6) using the slider</li>
<li>Drag the {totalBoxes} boxes from the container into any of the columns</li> <li>Drag the {totalBoxes} boxes from the container into any of the columns</li>
<li>Drag boxes between columns to rearrange them as needed</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>Drag boxes back to the container or double-click any box in a column to move it to the last-used column</li>
<li>Once all boxes are placed in columns, click "Play" to start the simulation</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>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> <li>The process continues until reaching the triangular configuration: columns of sizes 1, 2, 3, ..., n</li>