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:
parent
60bbda3d85
commit
41ca16d448
26
src/App.tsx
26
src/App.tsx
@ -1,4 +1,3 @@
|
|||||||
import { Mouse } from './components/Mouse'
|
|
||||||
import { ResourceDisplay } from './components/ResourceDisplay'
|
import { ResourceDisplay } from './components/ResourceDisplay'
|
||||||
import { BuildingButton } from './components/BuildingButton'
|
import { BuildingButton } from './components/BuildingButton'
|
||||||
import { MultiplierShop } from './components/MultiplierShop'
|
import { MultiplierShop } from './components/MultiplierShop'
|
||||||
@ -102,7 +101,8 @@ function App() {
|
|||||||
playerLevel,
|
playerLevel,
|
||||||
getAvailableBuildings,
|
getAvailableBuildings,
|
||||||
tick,
|
tick,
|
||||||
clickPower
|
clickPower,
|
||||||
|
click
|
||||||
} = useGameStore()
|
} = useGameStore()
|
||||||
|
|
||||||
const availableBuildings = getAvailableBuildings()
|
const availableBuildings = getAvailableBuildings()
|
||||||
@ -113,9 +113,27 @@ function App() {
|
|||||||
return () => clearInterval(interval)
|
return () => clearInterval(interval)
|
||||||
}, [tick])
|
}, [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 (
|
return (
|
||||||
<ChakraProvider theme={theme}>
|
<ChakraProvider theme={theme}>
|
||||||
<Box minH="100vh" bg="gray.900" color="white">
|
<Box
|
||||||
|
minH="100vh"
|
||||||
|
bg="gray.900"
|
||||||
|
color="white"
|
||||||
|
onClick={handleClick}
|
||||||
|
cursor="pointer"
|
||||||
|
>
|
||||||
<ResourceDisplay />
|
<ResourceDisplay />
|
||||||
<Box pt="180px">
|
<Box pt="180px">
|
||||||
<Container maxW="container.xl">
|
<Container maxW="container.xl">
|
||||||
@ -124,8 +142,6 @@ function App() {
|
|||||||
<Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading>
|
<Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading>
|
||||||
<Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
|
<Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Mouse />
|
|
||||||
|
|
||||||
<VStack spacing={8} w="full">
|
<VStack spacing={8} w="full">
|
||||||
{/* Shop Section */}
|
{/* Shop Section */}
|
||||||
|
|||||||
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user