added mascot clicking

src/components/UpgradeShop.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UPGRADES } from '../config/upgrades';
-import { GameState } from '../types';
+import { GameState, MascotTier } from '../types'; // Import MascotTier
 
 interface UpgradeShopProps {
   gameState: GameState;
@@ -8,6 +8,16 @@ interface UpgradeShopProps {
   onPurchase: (upgradeId: string) => void;
 }
 
+// Helper function to get mascot name from image source
+const getMascotName = (imageSrc: string): string => {
+  const fileName = imageSrc.split('/').pop() || '';
+  const nameWithoutExtension = fileName.split('.')[0];
+  return nameWithoutExtension
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
 export function UpgradeShop({ gameState, userClicks, onPurchase }: UpgradeShopProps) {
   return (
     <div className="bg-gradient-to-b from-purple-800 to-pink-600 p-6 rounded-xl border-4 border-cyan-400 shadow-2xl">
@@ -21,6 +31,21 @@ export function UpgradeShop({ gameState, userClicks, onPurchase }: UpgradeShopPr
           const cost = gameState.upgrades[upgrade.id]?.cost || upgrade.baseCost;
           const canAfford = userClicks >= cost;
 
+          let description = upgrade.description;
+
+          // Custom description for Friend Boost upgrade
+          if (upgrade.id === 'friendBoost' && upgrade.mascotTiers) {
+            const nextMascotTier = upgrade.mascotTiers.find(
+              (tier: MascotTier) => owned < tier.level
+            );
+
+            if (nextMascotTier) {
+              description = `Spawns various clickable friends. Next: ${getMascotName(nextMascotTier.imageSrc)} at level ${nextMascotTier.level}`;
+            } else {
+              description = 'All mascots unlocked! Spawns various clickable friends.';
+            }
+          }
+
           return (
             <div 
               key={upgrade.id}
@@ -42,7 +67,7 @@ export function UpgradeShop({ gameState, userClicks, onPurchase }: UpgradeShopPr
                       </span>
                     )}
                   </div>
-                  <p className="text-cyan-200 text-sm mt-1">{upgrade.description}</p>
+                  <p className="text-cyan-200 text-sm mt-1">{description}</p>
                 </div>
                 
                 <div className="text-right">
@@ -64,4 +89,4 @@ export function UpgradeShop({ gameState, userClicks, onPurchase }: UpgradeShopPr
       </div>
     </div>
   );
-}
+}