Enhance App layout with logo and updated click handling. Introduced logo image and improved text prompts for user interaction. Refactored BuildingButton to streamline disabled state styling and added tooltip for ResetButton with icon representation.

src/App.tsx

@@ -13,10 +13,13 @@ import {
   VStack,
   SimpleGrid,
   Button,
-  Flex
+  Flex,
+  Image,
+  Center
 } from '@chakra-ui/react'
 import theme from './theme'
 import { useEffect } from 'react'
+import logoImg from './assets/logo.png'
 
 type BuildingId = 'mouseFarms' | 'keyboardFactories' | 'monitorDisplays' | 'officeSpace' | 'serverRooms' | 'dataCenters' | 
                   'dataCities' | 'dataCountries' | 'dataContinents' | 'dataWorlds' | 'dataMoons' | 
@@ -117,13 +120,7 @@ function App() {
 
   // Handle clicks anywhere in the game
   const handleClick = (e: React.MouseEvent) => {
-    // Don't count clicks on buttons or interactive elements
-    if (e.target instanceof HTMLElement && 
-        (e.target.tagName === 'BUTTON' || 
-         e.target.closest('button') || 
-         e.target.closest('[role="button"]'))) {
-      return
-    }
+    // All clicks count now!
     click()
   }
 
@@ -140,18 +137,29 @@ function App() {
         <Box pt="100px">
           <Container maxW="container.xl">
             <VStack spacing={8}>
-              <Box textAlign="center" w="full">
-                <Flex justify="space-between" align="center" mb={4}>
-                  <Heading as="h1" size="2xl">Clicker Clicker 2</Heading>
-                  <ResetButton />
+              <Box textAlign="center" w="full" position="relative">
+                <Flex direction="column" align="center" mb={4}>
+                  <Box maxW="400px" mb={2}>
+                    <Image src={logoImg} alt="Clicker Clicker 2" />
+                  </Box>
+                  <Text fontSize="xl" color="cyan.400" fontWeight="bold" mt={2}>
+                    Click anywhere to start (and then scroll down)
+                  </Text>
                 </Flex>
-                <Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
+                
+                {/* Reset button positioned in the top right */}
+                <Box position="absolute" top={0} right={0}>
+                  <ResetButton />
+                </Box>
               </Box>
               
               <VStack spacing={8} w="full">
                 {/* Shop Section */}
                 <Box bg="gray.800" p={6} borderRadius="lg" w="full">
-                  <Heading as="h2" size="xl" mb={6} color="blue.400">Shop</Heading>
+                  <Flex justify="space-between" align="center" mb={6}>
+                    <Heading as="h2" size="xl" color="blue.400">Shop</Heading>
+                    <Text fontSize="lg" color="yellow.400">Level {playerLevel}</Text>
+                  </Flex>
                   <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
                     {availableBuildings.map((building) => (
                       <BuildingButton
@@ -194,9 +202,10 @@ function App() {
                         </Text>
                         <Button 
                           onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
-                          isDisabled={points < 20}
+                          opacity={points < 20 ? 0.4 : 1}
+                          _hover={{ bg: 'gray.500', opacity: points < 20 ? 0.4 : 1 }}
                           bg="gray.600"
-                          _hover={{ bg: 'gray.500' }}
+                          cursor={points < 20 ? 'not-allowed' : 'pointer'}
                         >
                           Upgrade (20 points)
                         </Button>

src/components/BuildingButton.tsx

@@ -74,7 +74,7 @@ export function BuildingButton({
   const { points, playerLevel, upgradeBuilding } = useGameStore()
   const canAfford = points >= cost
   const meetsLevelRequirement = playerLevel >= levelRequirement
-  const isDisabled = !canAfford || !meetsLevelRequirement
+  const isDisabledStyle = !canAfford || !meetsLevelRequirement
 
   // Calculate upgrade cost
   const calculateUpgradeCost = (currentLevel: number): number => {
@@ -124,7 +124,7 @@ export function BuildingButton({
             <Text fontWeight="bold" fontSize="md">{title}</Text>
           </Box>
           
-          {/* Overlay for owned and level */}
+          {/* Overlay for owned count */}
           <Box 
             position="absolute" 
             bottom="0" 
@@ -134,10 +134,7 @@ export function BuildingButton({
             borderTopLeftRadius="md"
             borderBottomRightRadius="md"
           >
-            <HStack spacing={3}>
-              <Text fontSize="sm">Owned: {owned}</Text>
-              <Text fontSize="sm">Level: {level}</Text>
-            </HStack>
+            <Text fontSize="sm">Owned: {owned}</Text>
           </Box>
         </Box>
         
@@ -150,7 +147,9 @@ export function BuildingButton({
         <HStack spacing={2}>
           <Button 
             onClick={onClick}
-            isDisabled={points < cost || playerLevel < levelRequirement}
+            opacity={isDisabledStyle ? 0.4 : 1}
+            _hover={{ bg: 'blue.600', opacity: isDisabledStyle ? 0.4 : 1 }}
+            cursor={isDisabledStyle ? 'not-allowed' : 'pointer'}
             colorScheme="blue"
             size="sm"
             flexGrow={1}
@@ -160,7 +159,9 @@ export function BuildingButton({
           <Tooltip label={owned === 0 ? "You need to own this building first" : ""}>
             <Button 
               onClick={() => upgradeBuilding(buildingType as any)}
-              isDisabled={!canUpgrade}
+              opacity={!canUpgrade ? 0.4 : 1}
+              _hover={{ bg: 'green.600', opacity: !canUpgrade ? 0.4 : 1 }}
+              cursor={!canUpgrade ? 'not-allowed' : 'pointer'}
               colorScheme="green"
               size="sm"
               flexGrow={1}

src/components/ResetButton.tsx

@@ -6,7 +6,9 @@ import {
   AlertDialogHeader,
   AlertDialogContent,
   AlertDialogOverlay,
-  useDisclosure
+  useDisclosure,
+  IconButton,
+  Tooltip
 } from '@chakra-ui/react'
 import React, { useRef } from 'react'
 import { useGameStore } from '../store/gameStore'
@@ -23,14 +25,17 @@ export function ResetButton() {
 
   return (
     <>
-      <Button 
-        onClick={onOpen} 
-        colorScheme="red" 
-        size="sm"
-        variant="outline"
-      >
-        Reset Game
-      </Button>
+      <Tooltip label="Reset Game">
+        <IconButton
+          aria-label="Reset Game"
+          icon={<span>🔄</span>}
+          onClick={onOpen}
+          colorScheme="red"
+          size="md"
+          variant="ghost"
+          borderRadius="full"
+        />
+      </Tooltip>
 
       <AlertDialog
         isOpen={isOpen}