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

Add visual feedback to pebble game

Browse source 
Update the pebble placement game to provide visual cues for pebble removability and valid placement locations. Pebbles that cannot be picked up will be colored muted red, while those that can be picked up will be muted green. Valid placement spots will be highlighted with a 1px border.
- edited `src/components/PebblePlacementGame.tsx
This commit is contained in:
gpt-engineer-app[bot] 2025-08-21 10:52:02 +00:00
parent 3b66a78800
commit 07be682cb5
1 changed files with 9 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/PebblePlacementGame.tsx
View file

@ -85,8 +85,10 @@ const PebblePlacementGame: React.FC<PebblePlacementGameProps> = ({ showSocialSha
} }
}; };
const getPositionState = (position: number): 'placed' | 'available' | 'blocked' => { const getPositionState = (position: number): 'placed-removable' | 'placed-fixed' | 'available' | 'blocked' => {
if (placedPebbles.has(position)) return 'placed'; if (placedPebbles.has(position)) {
return canRemovePebble(position) ? 'placed-removable' : 'placed-fixed';
}
if (canPlacePebble(position) && pebblesInHand > 0) return 'available'; if (canPlacePebble(position) && pebblesInHand > 0) return 'available';
return 'blocked'; return 'blocked';
}; };
@ -96,10 +98,12 @@ const PebblePlacementGame: React.FC<PebblePlacementGameProps> = ({ showSocialSha
const baseClasses = "w-8 h-8 border-2 rounded-full flex items-center justify-center text-sm font-medium cursor-pointer transition-all duration-200"; const baseClasses = "w-8 h-8 border-2 rounded-full flex items-center justify-center text-sm font-medium cursor-pointer transition-all duration-200";
switch (state) { switch (state) {
case 'placed': case 'placed-removable':
return `${baseClasses} bg-primary text-primary-foreground border-primary hover:bg-primary/90`; return `${baseClasses} bg-green-100 text-green-800 border-green-200 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700`;
case 'placed-fixed':
return `${baseClasses} bg-red-100 text-red-800 border-red-200 cursor-not-allowed dark:bg-red-900/30 dark:text-red-300 dark:border-red-700`;
case 'available': case 'available':
return `${baseClasses} bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 hover:scale-110`; return `${baseClasses} bg-secondary text-secondary-foreground border-primary border-2 hover:bg-secondary/80 hover:scale-110 shadow-sm`;
case 'blocked': case 'blocked':
return `${baseClasses} bg-muted text-muted-foreground border-muted cursor-not-allowed opacity-50`; return `${baseClasses} bg-muted text-muted-foreground border-muted cursor-not-allowed opacity-50`;
} }