Start repository

src/components/UpgradeShop.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { UPGRADES } from '../config/upgrades';
+import { GameState } from '../types';
+
+interface UpgradeShopProps {
+  gameState: GameState;
+  userClicks: number;
+  onPurchase: (upgradeId: string) => void;
+}
+
+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">
+      <h2 className="text-3xl font-bold text-yellow-300 mb-6 text-center" style={{ fontFamily: 'Comic Sans MS, cursive' }}>
+        ✨ BOZO SHOP ✨
+      </h2>
+      
+      <div className="space-y-4">
+        {UPGRADES.map((upgrade) => {
+          const owned = gameState.upgrades[upgrade.id]?.owned || 0;
+          const cost = gameState.upgrades[upgrade.id]?.cost || upgrade.baseCost;
+          const canAfford = userClicks >= cost;
+
+          return (
+            <div 
+              key={upgrade.id}
+              className={`bg-gradient-to-r from-pink-500 to-purple-600 p-4 rounded-lg border-2 transition-all duration-300 ${
+                canAfford 
+                  ? 'border-green-400 hover:scale-105 cursor-pointer hover:shadow-lg' 
+                  : 'border-gray-500 opacity-60'
+              }`}
+              onClick={() => canAfford && onPurchase(upgrade.id)}
+            >
+              <div className="flex justify-between items-center">
+                <div className="flex-1">
+                  <div className="flex items-center space-x-2">
+                    <span className="text-2xl">{upgrade.icon}</span>
+                    <h3 className="text-lg font-bold text-white">{upgrade.name}</h3>
+                    {owned > 0 && (
+                      <span className="bg-yellow-400 text-black px-2 py-1 rounded-full text-sm font-bold">
+                        {owned}
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-cyan-200 text-sm mt-1">{upgrade.description}</p>
+                </div>
+                
+                <div className="text-right">
+                  <div className={`text-xl font-bold ${canAfford ? 'text-green-300' : 'text-red-300'}`}>
+                    {cost.toLocaleString()}
+                  </div>
+                  <div className="text-xs text-gray-300">clicks</div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      
+      <div className="mt-6 text-center">
+        <div className="text-2xl font-bold text-yellow-300">
+          Your Clicks: {userClicks.toLocaleString()}
+        </div>
+      </div>
+    </div>
+  );
+}