From 07be682cb5b4b97ec4c1c08cc5e3d9d9a33bd3da Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 21 Aug 2025 10:52:02 +0000
Subject: [PATCH] Add visual feedback to pebble game

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
---
 src/components/PebblePlacementGame.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/PebblePlacementGame.tsx b/src/components/PebblePlacementGame.tsx
index 5a740f0..24fee15 100644
--- a/src/components/PebblePlacementGame.tsx
+++ b/src/components/PebblePlacementGame.tsx
@@ -85,8 +85,10 @@ const PebblePlacementGame: React.FC<PebblePlacementGameProps> = ({ showSocialSha
     }
   };
 
-  const getPositionState = (position: number): 'placed' | 'available' | 'blocked' => {
-    if (placedPebbles.has(position)) return 'placed';
+  const getPositionState = (position: number): 'placed-removable' | 'placed-fixed' | 'available' | 'blocked' => {
+    if (placedPebbles.has(position)) {
+      return canRemovePebble(position) ? 'placed-removable' : 'placed-fixed';
+    }
     if (canPlacePebble(position) && pebblesInHand > 0) return 'available';
     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";
     
     switch (state) {
-      case 'placed':
-        return `${baseClasses} bg-primary text-primary-foreground border-primary hover:bg-primary/90`;
+      case 'placed-removable':
+        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':
-        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':
         return `${baseClasses} bg-muted text-muted-foreground border-muted cursor-not-allowed opacity-50`;
     }