From dc7d868a8d5036c17f7b34ff4041da133d49f86d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 22 Aug 2025 05:13:22 +0000
Subject: [PATCH] Update instructions to be a toggle

Changed "How to Play:" to "Click here for instructions." and implemented a toggle functionality to show/hide the instructions content.
---
 src/components/BulgarianSolitaire.tsx | 28 +++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/BulgarianSolitaire.tsx b/src/components/BulgarianSolitaire.tsx
index beeddcd..bebf40b 100644
--- a/src/components/BulgarianSolitaire.tsx
+++ b/src/components/BulgarianSolitaire.tsx
@@ -25,6 +25,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
   const [isAnimating, setIsAnimating] = useState(false);
   const [lastUsedColumn, setLastUsedColumn] = useState<number | null>(null);
   const [selectedBoxForMove, setSelectedBoxForMove] = useState<number | null>(null);
+  const [showInstructions, setShowInstructions] = useState(false);
 
   const totalBoxes = (n * (n + 1)) / 2;
 
@@ -416,16 +417,23 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
 
       {/* Instructions */}
       <div className="bg-muted/30 rounded-lg p-6 space-y-4">
-        <h3 className="text-lg font-semibold">How to Play:</h3>
-        <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>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>
-        </ul>
+        <button 
+          onClick={() => setShowInstructions(!showInstructions)}
+          className="text-lg font-semibold text-primary hover:underline cursor-pointer text-left"
+        >
+          Click here for instructions.
+        </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>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>
+          </ul>
+        )}
       </div>
 
       {/* Credits */}