From 8c76523f1239aa4a079295a6db97d1403a5dd5f5 Mon Sep 17 00:00:00 2001
From: billy <billy@shuttle>
Date: Sun, 30 Mar 2025 05:50:24 -0400
Subject: [PATCH] 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                       | 41 +++++++++++++++++++------------
 src/components/BuildingButton.tsx | 17 +++++++------
 src/components/ResetButton.tsx    | 23 ++++++++++-------
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f9733a5..6553b51 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/BuildingButton.tsx b/src/components/BuildingButton.tsx
index 7f72b00..045b7ab 100644
--- a/src/components/BuildingButton.tsx
+++ b/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}
diff --git a/src/components/ResetButton.tsx b/src/components/ResetButton.tsx
index 818140d..9178f4f 100644
--- a/src/components/ResetButton.tsx
+++ b/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}