Remove Mouse component and implement global click handling in App. Updated App layout to trigger click actions on background clicks while preserving button interactions.

This commit is contained in:
billy 2025-03-30 03:31:58 -04:00
parent 60bbda3d85
commit 41ca16d448
2 changed files with 21 additions and 33 deletions

View File

@ -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 */}

View File

@ -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>
)
}