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 = ({ showSocialShare const [isAnimating, setIsAnimating] = useState(false); const [lastUsedColumn, setLastUsedColumn] = useState(null); const [selectedBoxForMove, setSelectedBoxForMove] = useState(null); + const [showInstructions, setShowInstructions] = useState(false); const totalBoxes = (n * (n + 1)) / 2; @@ -416,16 +417,23 @@ const BulgarianSolitaire: React.FC = ({ showSocialShare {/* Instructions */}
-

How to Play:

-
    -
  • Choose a value for n (2-6) using the slider
  • -
  • Drag the {totalBoxes} boxes from the container into any of the columns
  • -
  • Drag boxes between columns to rearrange them as needed
  • -
  • Drag boxes back to the container or double-click any box in a column to move it to the last-used column
  • -
  • Once all boxes are placed in columns, click "Play" to start the simulation
  • -
  • Watch as the algorithm takes one box from each non-empty column to form a new column
  • -
  • The process continues until reaching the triangular configuration: columns of sizes 1, 2, 3, ..., n
  • -
+ + {showInstructions && ( +
    +
  • Choose a value for n (2-6) using the slider
  • +
  • Drag the {totalBoxes} boxes from the container into any of the columns
  • +
  • Drag boxes between columns to rearrange them as needed
  • +
  • Drag boxes back to the container or double-click any box in a column to move it to the last-used column
  • +
  • Once all boxes are placed in columns, click "Play" to start the simulation
  • +
  • Watch as the algorithm takes one box from each non-empty column to form a new column
  • +
  • The process continues until reaching the triangular configuration: columns of sizes 1, 2, 3, ..., n
  • +
+ )}
{/* Credits */}