Update Bulgarian Solitaire
Modify the Bulgarian Solitaire component to send double-clicked boxes to the last-used column.
This commit is contained in:
parent
1aeba0b861
commit
23637eb547
1 changed files with 23 additions and 7 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue