From 41ca16d448b8671bb5218f2d988c30438d45557b Mon Sep 17 00:00:00 2001
From: billy <billy@shuttle>
Date: Sun, 30 Mar 2025 03:31:58 -0400
Subject: [PATCH] Remove Mouse component and implement global click handling in
 App. Updated App layout to trigger click actions on background clicks while
 preserving button interactions.

---
 src/App.tsx              | 26 +++++++++++++++++++++-----
 src/components/Mouse.tsx | 28 ----------------------------
 2 files changed, 21 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/Mouse.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 47a3f82..7bb5c0b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import { Mouse } from './components/Mouse'
 import { ResourceDisplay } from './components/ResourceDisplay'
 import { BuildingButton } from './components/BuildingButton'
 import { MultiplierShop } from './components/MultiplierShop'
@@ -102,7 +101,8 @@ function App() {
     playerLevel,
     getAvailableBuildings,
     tick,
-    clickPower
+    clickPower,
+    click
   } = useGameStore()
 
   const availableBuildings = getAvailableBuildings()
@@ -113,9 +113,27 @@ function App() {
     return () => clearInterval(interval)
   }, [tick])
 
+  // 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
+    }
+    click()
+  }
+
   return (
     <ChakraProvider theme={theme}>
-      <Box minH="100vh" bg="gray.900" color="white">
+      <Box 
+        minH="100vh" 
+        bg="gray.900" 
+        color="white"
+        onClick={handleClick}
+        cursor="pointer"
+      >
         <ResourceDisplay />
         <Box pt="180px">
           <Container maxW="container.xl">
@@ -124,8 +142,6 @@ function App() {
                 <Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading>
                 <Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
               </Box>
-
-              <Mouse />
               
               <VStack spacing={8} w="full">
                 {/* Shop Section */}
diff --git a/src/components/Mouse.tsx b/src/components/Mouse.tsx
deleted file mode 100644
index 8afc7f6..0000000
--- a/src/components/Mouse.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Box, Image } from '@chakra-ui/react'
-import { useGameStore } from '../store/gameStore'
-
-export function Mouse() {
-  const { click } = useGameStore()
-
-  return (
-    <Box
-      as="button"
-      onClick={click}
-      bg="gray.800"
-      _hover={{ bg: 'gray.700' }}
-      p={4}
-      borderRadius="lg"
-      cursor="pointer"
-      transition="all 0.2s"
-      _active={{ transform: 'scale(0.95)' }}
-    >
-      <Image
-        src="/mouse.png"
-        alt="Click me!"
-        width="100px"
-        height="100px"
-        objectFit="contain"
-      />
-    </Box>
-  )
-} 
\ No newline at end of file