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

Refactor pebble placement layout

Browse source 
Adjust the layout of the integer circles in the pebble placement game to display them in a single line as much as possible.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-21 10:53:08 +00:00
parent 07be682cb5
commit fc28970659
1 changed files with 25 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/PebblePlacementGame.tsx
View file

@ -174,37 +174,31 @@ const PebblePlacementGame: React.FC<PebblePlacementGameProps> = ({ showSocialSha
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-lg font-semibold">Positions 1-35</h3> <h3 className="text-lg font-semibold">Positions 1-35</h3>
{/* Rows of 7 positions each */} {/* All positions in a flowing line */}
{[0, 1, 2, 3, 4].map((row) => ( <div className="flex flex-wrap gap-2">
<div key={row} className="flex items-center gap-2"> {Array.from({ length: 35 }, (_, i) => {
<span className="text-sm text-muted-foreground w-8"> const position = i + 1;
{row * 7 + 1}-{Math.min((row + 1) * 7, 35)}:
</span> return (
<div className="flex gap-2"> <div
{Array.from({ length: 7 }, (_, i) => { key={position}
const position = row * 7 + i + 1; className={getPositionStyle(position)}
if (position > 35) return null; onClick={() => handlePositionClick(position)}
title={
return ( placedPebbles.has(position)
<div ? canRemovePebble(position)
key={position} ? `Pebble placed on ${position}. Click to remove.`
className={getPositionStyle(position)} : `Pebble on ${position} cannot be removed (no predecessor pebble)`
onClick={() => handlePositionClick(position)} : canPlacePebble(position) && pebblesInHand > 0
title={ ? `Click to place pebble on ${position}`
placedPebbles.has(position) : `Cannot place pebble on ${position}`
? `Pebble placed on ${position}. Click to remove.` }
: canPlacePebble(position) && pebblesInHand > 0 >
? `Click to place pebble on ${position}` {position}
: `Cannot place pebble on ${position}` </div>
} );
> })}
{position} </div>
</div>
);
})}
</div>
</div>
))}
</div> </div>
)} )}