Implement dynamic click power upgrade cost in App and gameStore. Refactor upgrade logic to calculate cost based on current upgrades, enhancing user experience and game mechanics. Update UI to reflect variable upgrade cost in button display.

src/App.tsx

@@ -41,13 +41,15 @@ function App() {
     getAvailableBuildings,
     tick,
     clickPower,
-    click
+    click,
+    getClickPowerUpgradeCost
   } = useGameStore()
 
   const [agreedToTerms, setAgreedToTerms] = useState(false)
   const [hasStarted, setHasStarted] = useState(false)
   const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })
   const availableBuildings = getAvailableBuildings()
+  const clickPowerUpgradeCost = getClickPowerUpgradeCost()
 
   // Set up game tick interval
   useEffect(() => {
@@ -140,12 +142,12 @@ function App() {
                         </Text>
                         <Button 
                           onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
-                          opacity={points < 20 ? 0.4 : 1}
+                          opacity={points < clickPowerUpgradeCost ? 0.4 : 1}
-                          _hover={{ bg: 'gray.500', opacity: points < 20 ? 0.4 : 1 }}
+                          _hover={{ bg: 'gray.500', opacity: points < clickPowerUpgradeCost ? 0.4 : 1 }}
                           bg="gray.600"
-                          cursor={points < 20 ? 'not-allowed' : 'pointer'}
+                          cursor={points < clickPowerUpgradeCost ? 'not-allowed' : 'pointer'}
                         >
-                          Upgrade (20 points)
+                          Upgrade ({clickPowerUpgradeCost} points)
                         </Button>
                       </VStack>
                     </Box>

src/store/gameStore.ts

@@ -55,6 +55,7 @@ interface GameState {
   // Upgrades
   autoClickers: number
   clickPower: number
+  clickPowerUpgrades: number
   
   // Production rates
   pointsPerSecond: number
@@ -69,6 +70,7 @@ interface GameState {
   resetGame: () => void
   tick: () => void
   upgradeBuilding: (buildingType: BuildingType) => void
+  getClickPowerUpgradeCost: () => number
 
   // New getter for available buildings
   getAvailableBuildings: () => BuildingInfo[]
@@ -210,6 +212,7 @@ const initialState = {
   dataGodsLevel: 1,
   autoClickers: 0,
   clickPower: 1,
+  clickPowerUpgrades: 0,
   pointsPerSecond: 0,
   playerLevel: 1,
 }
@@ -277,6 +280,11 @@ const calculateUpgradeCost = (buildingType: BuildingType, currentLevel: number):
   return Math.floor(baseCost * Math.pow(1.5, currentLevel - 1))
 }
 
+// Helper function to calculate click power upgrade cost
+const calculateClickPowerUpgradeCost = (upgrades: number): number => {
+  return Math.floor(20 * Math.pow(1.5, upgrades));
+}
+
 type BuildingType = keyof typeof BUILDING_COSTS
 type UpgradeType = 'autoClickers' | 'clickPower'
 
@@ -326,14 +334,24 @@ export const useGameStore = create<GameState>()(
         const state = get()
         
         // Handle upgrade purchase
-        if (upgradeType === 'clickPower' && state.points >= 20) {
+        if (upgradeType === 'clickPower') {
-          set((state) => ({
+          const cost = calculateClickPowerUpgradeCost(state.clickPowerUpgrades)
-            points: state.points - 20,
+          
-            clickPower: state.clickPower + 1
+          if (state.points >= cost) {
-          }))
+            set((state) => ({
+              points: state.points - cost,
+              clickPower: state.clickPower + 1,
+              clickPowerUpgrades: state.clickPowerUpgrades + 1
+            }))
+          }
         }
       },
 
+      getClickPowerUpgradeCost: () => {
+        const { clickPowerUpgrades } = get()
+        return calculateClickPowerUpgradeCost(clickPowerUpgrades)
+      },
+
       upgradeBuilding: (buildingType: BuildingType) => {
         const state = get()
         const currentLevel = state[`${buildingType}Level` as keyof GameState] as number