Fix Stacking Blocks base cases

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

src/components/StackingBlocks.tsx

@@ -39,20 +39,22 @@ const StackingBlocks: React.FC<StackingBlocksProps> = ({ showSocialShare = false
     setHoveredSplitPoint(null);
   }, []);
 
-  const handleStackClick = useCallback((stackIndex: number, splitPoint: number) => {
+  const handleStackClick = useCallback((stackIndex: number, bottomSize: number) => {
-    if (hoveredStack !== stackIndex || hoveredSplitPoint !== splitPoint) return;
+    if (hoveredStack !== stackIndex || hoveredSplitPoint !== bottomSize) return;
     
     const stackSize = stacks[stackIndex];
-    const size1 = splitPoint;
+    const topSize = stackSize - bottomSize;
-    const size2 = stackSize - splitPoint;
+    
+    // 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
+            // Split happens ABOVE the hovered block
-            const bottomSize = blockIndex + 1; // How many blocks would be in the bottom stack
+            // Bottom stack gets blocks 0 to blockIndex (inclusive)
-            const pointsGained = canSplit && splitPoint > 0 && bottomSize > 0 ? splitPoint * bottomSize : 0;
+            // Top stack gets blocks blockIndex+1 to size-1 (inclusive)
-            const isHovered = hoveredStack === stackIndex && hoveredSplitPoint === splitPoint;
+            const bottomSize = blockIndex + 1;
-            const showSplitLine = canSplit && splitPoint > 0 && bottomSize > 0 && isHovered;
+            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) {
+                        if (canSplitHere) {
-                          handleStackClick(stackIndex, splitPoint);
+                          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>