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