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

Update instructions to be a toggle

Browse source 
Changed "How to Play:" to "Click here for instructions." and implemented a toggle functionality to show/hide the instructions content.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-22 05:13:22 +00:00
parent 2c8e37eccc
commit dc7d868a8d
1 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/BulgarianSolitaire.tsx
View file

@ -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 */}