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

Fix Stacking Blocks base cases

Browse source 
Addressed bugs in the Stacking Blocks interactive, specifically concerning base cases.
Here are the files that were edited by the AI in that message:
-edited src/components/StackingBlocks.tsx
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 06:55:10 +00:00
parent 8a6fed8078
commit d01d9e8290
1 changed files with 26 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/StackingBlocks.tsx
View file

@ -39,20 +39,22 @@ const StackingBlocks: React.FC<StackingBlocksProps> = ({ showSocialShare = false
setHoveredSplitPoint(null);
}, []);
const handleStackClick = useCallback((stackIndex: number, splitPoint: number) => {
if (hoveredStack !== stackIndex || hoveredSplitPoint !== splitPoint) return;
const handleStackClick = useCallback((stackIndex: number, bottomSize: number) => {
if (hoveredStack !== stackIndex || hoveredSplitPoint !== bottomSize) return;
const stackSize = stacks[stackIndex];
const size1 = splitPoint;
const size2 = stackSize - splitPoint;
const topSize = stackSize - bottomSize;
// Validate the split
if (bottomSize <= 0 || topSize <= 0) return;
// Calculate points gained
const pointsGained = size1 * size2;
const pointsGained = bottomSize * topSize;
// Update stacks
const newStacks = [...stacks];
newStacks.splice(stackIndex, 1); // Remove the original stack
newStacks.push(size1, size2); // Add the two new stacks
newStacks.push(bottomSize, topSize); // Add the two new stacks
newStacks.sort((a, b) => b - a); // Sort in descending order for better visualization
setStacks(newStacks);
@ -87,11 +89,17 @@ const StackingBlocks: React.FC<StackingBlocksProps> = ({ showSocialShare = false
<div className="text-sm font-medium mb-2">Stack {stackIndex + 1}</div>
<div className="flex flex-col-reverse items-center">
{Array.from({ length: size }).map((_, blockIndex) => {
const splitPoint = size - blockIndex; // How many blocks would be in the top stack if we split here
const bottomSize = blockIndex + 1; // How many blocks would be in the bottom stack
const pointsGained = canSplit && splitPoint > 0 && bottomSize > 0 ? splitPoint * bottomSize : 0;
const isHovered = hoveredStack === stackIndex && hoveredSplitPoint === splitPoint;
const showSplitLine = canSplit && splitPoint > 0 && bottomSize > 0 && isHovered;
// Split happens ABOVE the hovered block
// Bottom stack gets blocks 0 to blockIndex (inclusive)
// Top stack gets blocks blockIndex+1 to size-1 (inclusive)
const bottomSize = blockIndex + 1;
const topSize = size - bottomSize;
// Only allow splits that create two non-empty stacks
const canSplitHere = canSplit && topSize > 0 && bottomSize > 0;
const pointsGained = canSplitHere ? topSize * bottomSize : 0;
const isHovered = hoveredStack === stackIndex && hoveredSplitPoint === bottomSize;
const showSplitLine = canSplitHere && isHovered;
return (
<TooltipProvider key={blockIndex}>
@ -99,13 +107,13 @@ const StackingBlocks: React.FC<StackingBlocksProps> = ({ showSocialShare = false
<TooltipTrigger asChild>
<div
className={`w-12 h-6 border border-black ${getStackColor(size)} ${
canSplit && splitPoint > 0 && bottomSize > 0 ? 'cursor-pointer hover:brightness-90' : ''
canSplitHere ? 'cursor-pointer hover:brightness-90' : ''
} ${showSplitLine ? 'border-t-4 border-t-red-500' : ''} relative`}
style={{ marginBottom: '-1px' }}
onMouseEnter={() => {
if (canSplit && splitPoint > 0 && bottomSize > 0) {
if (canSplitHere) {
setHoveredStack(stackIndex);
setHoveredSplitPoint(splitPoint);
setHoveredSplitPoint(bottomSize);
}
}}
onMouseLeave={() => {
@ -113,15 +121,15 @@ const StackingBlocks: React.FC<StackingBlocksProps> = ({ showSocialShare = false
setHoveredSplitPoint(null);
}}
onClick={() => {
if (canSplit && splitPoint > 0 && bottomSize > 0) {
handleStackClick(stackIndex, splitPoint);
if (canSplitHere) {
handleStackClick(stackIndex, bottomSize);
}
}}
/>
</TooltipTrigger>
{canSplit && pointsGained > 0 && (
{canSplitHere && (
<TooltipContent>
<p>Split into {splitPoint} + {bottomSize} = {pointsGained} points</p>
<p>Split into {bottomSize} + {topSize} = {pointsGained} points</p>
</TooltipContent>
)}
</Tooltip>