Update Bulgarian Solitaire instructions

Update the slider for n to represent the total number of boxes, with a range of 3 to 45. Modify the instructions to include a spoiler about the convergence to a staircase configuration for triangular numbers.

src/components/BulgarianSolitaire.tsx

@@ -14,7 +14,7 @@ interface Box {
 }
 
 const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare }) => {
-  const [n, setN] = useState(3);
+  const [n, setN] = useState(15);
   const [boxes, setBoxes] = useState<Box[]>([]);
   const [columns, setColumns] = useState<number[][]>([]);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -27,7 +27,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
   const [selectedBoxForMove, setSelectedBoxForMove] = useState<number | null>(null);
   const [showInstructions, setShowInstructions] = useState(false);
 
-  const totalBoxes = (n * (n + 1)) / 2;
+  const totalBoxes = n;
 
   // Initialize boxes and columns when n changes
   useEffect(() => {
@@ -175,9 +175,15 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
 
   const isTriangularConfiguration = (cols: number[][]) => {
     const nonEmptyCols = cols.filter(col => col.length > 0).sort((a, b) => a.length - b.length);
-    if (nonEmptyCols.length !== n) return false;
     
-    for (let i = 0; i < n; i++) {
+    // Check if n is a triangular number and if columns form the staircase pattern
+    // Find k such that k*(k+1)/2 = n
+    const k = Math.floor((-1 + Math.sqrt(1 + 8 * n)) / 2);
+    if (k * (k + 1) / 2 !== n) return false; // n is not a triangular number
+    
+    if (nonEmptyCols.length !== k) return false;
+    
+    for (let i = 0; i < k; i++) {
       if (nonEmptyCols[i].length !== i + 1) return false;
     }
     return true;
@@ -330,12 +336,12 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
       {/* Controls */}
       <div className="flex items-center justify-center gap-8">
         <div className="flex items-center gap-4">
-          <label className="text-sm font-medium">n = {n}</label>
+          <label className="text-sm font-medium">Total boxes = {n}</label>
           <Slider
             value={[n]}
             onValueChange={(value) => setN(value[0])}
-            min={2}
+            min={3}
-            max={6}
+            max={45}
             step={1}
             className="w-32"
             disabled={isPlaying}
@@ -451,13 +457,13 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
         </button>
         {showInstructions && (
           <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>Choose a value for n (3-45) using the slider</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 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>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>Spoiler: For triangular numbers, the process continues until reaching the staircase configuration: columns of sizes 1, 2, 3, ..., n.</li>
           </ul>
         )}
       </div>