a

package-lock.json

@@ -8,6 +8,7 @@
       "name": "viber",
       "version": "0.0.0",
       "dependencies": {
+        "@chakra-ui/icons": "^2.2.4",
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
@@ -651,6 +652,16 @@
         "react": ">=18"
       }
     },
+    "node_modules/@chakra-ui/icons": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.2.4.tgz",
+      "integrity": "sha512-l5QdBgwrAg3Sc2BRqtNkJpfuLw/pWRDwwT58J6c4PqQT6wzXxyNa8Q0PForu1ltB5qEiFb1kxr/F/HO1EwNa6g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@chakra-ui/react": ">=2.0.0",
+        "react": ">=18"
+      }
+    },
     "node_modules/@chakra-ui/image": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",

src/App.tsx

@@ -41,16 +41,13 @@ function App() {
     playerLevel,
     getAvailableBuildings,
     tick,
-    clickPower,
     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(() => {
@@ -125,32 +122,8 @@ function App() {
                 <Box bg="gray.800" p={6} borderRadius="lg" w="full">
                   <Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading>
                   <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
-                    <Box
-                      bg="gray.700"
-                      p={4}
-                      borderRadius="lg"
-                      border="1px"
-                      borderColor="gray.600"
-                    >
-                      <VStack align="stretch" spacing={2}>
-                        <Box display="flex" justifyContent="space-between" alignItems="center">
-                          <Text fontWeight="bold">Click Power</Text>
-                          <Text>Level {clickPower}</Text>
-                        </Box>
-                        <Text fontSize="sm" color="gray.400">
-                          Each click generates {clickPower} points
-                        </Text>
-                        <Button 
-                          onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
-                          opacity={points < clickPowerUpgradeCost ? 0.4 : 1}
-                          _hover={{ bg: 'gray.500', opacity: points < clickPowerUpgradeCost ? 0.4 : 1 }}
-                          bg="gray.600"
-                          cursor={points < clickPowerUpgradeCost ? 'not-allowed' : 'pointer'}
-                        >
-                          Upgrade ({clickPowerUpgradeCost} points)
-                        </Button>
-                      </VStack>
-                    </Box>
+                    {/* Click Power button has been moved to ResourceDisplay header */}
+                    {/* Add other upgrades here in the future */}
                   </SimpleGrid>
                 </Box>
               </VStack>

src/components/ResourceDisplay.tsx

@@ -1,11 +1,12 @@
-import { Box, HStack, Text, Progress, Flex, Divider, Tooltip, Image } from '@chakra-ui/react'
+import { Box, HStack, Text, Progress, Flex, Divider, Tooltip, Image, Button, Icon } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
 import logoImg from '../assets/logo.png'
 import { ResetButton } from './ResetButton'
 import { SoundToggleButton } from './SoundToggleButton'
+import { AddIcon } from '@chakra-ui/icons'
 
 export function ResourceDisplay() {
-  const { points, pointsPerSecond, clickPower, playerLevel } = useGameStore()
+  const { points, pointsPerSecond, clickPower, playerLevel, getClickPowerUpgradeCost, buyUpgrade } = useGameStore()
 
   // Calculate progress to next level
   const currentLevelPPS = Math.pow(10, playerLevel - 1)
@@ -21,6 +22,9 @@ export function ResourceDisplay() {
     progress = Math.min(Math.max(((pointsPerSecond - currentLevelPPS) / (nextLevelPPS - currentLevelPPS)) * 100, 0), 100);
   }
 
+  const clickPowerUpgradeCost = getClickPowerUpgradeCost();
+  const canAffordUpgrade = points >= clickPowerUpgradeCost;
+
   return (
     <Box
       position="fixed"
@@ -89,10 +93,28 @@ export function ResourceDisplay() {
 
           <Divider orientation="vertical" h="40px" />
 
-          {/* Click Power */}
+          {/* Click Power with Upgrade Button */}
           <Box textAlign="center" minW="120px">
             <Text fontSize="sm" fontWeight="bold">Click Power</Text>
-            <Text fontSize="md">{clickPower}</Text>
+            <Flex justify="center" align="center" gap={1}>
+              <Text fontSize="md">{clickPower}</Text>
+              <Tooltip label={`Upgrade to level ${clickPower + 1} (${clickPowerUpgradeCost} points)`}>
+                <Button
+                  size="xs"
+                  colorScheme="green"
+                  variant="outline"
+                  p={1}
+                  height="20px"
+                  minW="20px"
+                  onClick={() => buyUpgrade('clickPower')}
+                  opacity={canAffordUpgrade ? 1 : 0.4}
+                  cursor={canAffordUpgrade ? 'pointer' : 'not-allowed'}
+                  _hover={{ bg: 'green.800', opacity: canAffordUpgrade ? 1 : 0.4 }}
+                >
+                  <AddIcon boxSize={2} />
+                </Button>
+              </Tooltip>
+            </Flex>
           </Box>
 
           <Divider orientation="vertical" h="40px" />