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

54
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>
<div className="flex gap-2">
{Array.from({ length: 7 }, (_, i) => {
const position = row * 7 + i + 1;
if (position > 35) return null;
return ( return (
<div <div
key={position} key={position}
className={getPositionStyle(position)} className={getPositionStyle(position)}
onClick={() => handlePositionClick(position)} onClick={() => handlePositionClick(position)}
title={ title={
placedPebbles.has(position) placedPebbles.has(position)
? `Pebble placed on ${position}. Click to remove.` ? canRemovePebble(position)
: canPlacePebble(position) && pebblesInHand > 0 ? `Pebble placed on ${position}. Click to remove.`
? `Click to place pebble on ${position}` : `Pebble on ${position} cannot be removed (no predecessor pebble)`
: `Cannot place pebble on ${position}` : canPlacePebble(position) && pebblesInHand > 0
} ? `Click to place pebble on ${position}`
> : `Cannot place pebble on ${position}`
{position} }
</div> >
); {position}
})} </div>
</div> );
</div> })}
))} </div>
</div> </div>
)} )}