billy/clicker-clicker2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor App layout and enhance ResourceDisplay with click multiplier. Updated UI structure for better organization and added click multiplier display in ResourceDisplay.

Browse Source
This commit is contained in:
billy 2025-03-30 03:09:18 -04:00
parent 9fdcc2d99e
commit 55edd3b349
2 changed files with 101 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.tsx
View File

@ -101,7 +101,8 @@ function App() {
points, points,
playerLevel, playerLevel,
getAvailableBuildings, getAvailableBuildings,
tick tick,
clickPower
} = useGameStore() } = useGameStore()
const availableBuildings = getAvailableBuildings() const availableBuildings = getAvailableBuildings()
@ -114,13 +115,14 @@ function App() {
return ( return (
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<Box minH="100vh" bg="gray.900" color="white" py={8}> <Box minH="100vh" bg="gray.900" color="white">
<ResourceDisplay />
<Box pt="180px">
<Container maxW="container.xl"> <Container maxW="container.xl">
<VStack spacing={8}> <VStack spacing={8}>
<Box textAlign="center"> <Box textAlign="center">
<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>
<ResourceDisplay />
</Box> </Box>
<Mouse /> <Mouse />
@ -154,14 +156,31 @@ function App() {
<Box bg="gray.800" p={6} borderRadius="lg" w="full"> <Box bg="gray.800" p={6} borderRadius="lg" w="full">
<Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading> <Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}> <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
<Box
bg="gray.700"
p={4}
borderRadius="lg"
border="1px"
borderColor="gray.600"
>
<VStack align="stretch" spacing={2}>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Text fontWeight="bold">Click Power</Text>
<Text>Level {clickPower}</Text>
</Box>
<Text fontSize="sm" color="gray.400">
Each click generates {clickPower} points
</Text>
<Button <Button
onClick={() => useGameStore.getState().buyUpgrade('clickPower')} onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
isDisabled={points < 20} isDisabled={points < 20}
bg="gray.700" bg="gray.600"
_hover={{ bg: 'gray.600' }} _hover={{ bg: 'gray.500' }}
> >
Upgrade Click Power (20 points) Upgrade (20 points)
</Button> </Button>
</VStack>
</Box>
</SimpleGrid> </SimpleGrid>
</Box> </Box>
</VStack> </VStack>
@ -170,6 +189,7 @@ function App() {
</VStack> </VStack>
</Container> </Container>
</Box> </Box>
</Box>
</ChakraProvider> </ChakraProvider>
) )
} }

18
src/components/ResourceDisplay.tsx
View File

@ -2,14 +2,29 @@ import { Box, HStack, Text } from '@chakra-ui/react'
import { useGameStore } from '../store/gameStore' import { useGameStore } from '../store/gameStore'
export function ResourceDisplay() { export function ResourceDisplay() {
const { points, techParts, pointsPerSecond, techPartsPerSecond } = useGameStore() const { points, techParts, pointsPerSecond, techPartsPerSecond, clickMultiplier } = useGameStore()
return ( return (
<Box
position="fixed"
top={0}
left={0}
right={0}
zIndex={100}
bg="gray.900"
py={4}
borderBottom="1px"
borderColor="gray.700"
shadow="lg"
>
<HStack spacing={8} justify="center"> <HStack spacing={8} justify="center">
<Box textAlign="center"> <Box textAlign="center">
<Text fontSize="xl" fontWeight="bold">Points</Text> <Text fontSize="xl" fontWeight="bold">Points</Text>
<Text fontSize="2xl">{Math.floor(points)}</Text> <Text fontSize="2xl">{Math.floor(points)}</Text>
<Text fontSize="sm" color="green.400">+{pointsPerSecond}/s</Text> <Text fontSize="sm" color="green.400">+{pointsPerSecond}/s</Text>
{clickMultiplier > 1 && (
<Text fontSize="sm" color="yellow.400">{clickMultiplier}x Click Power</Text>
)}
</Box> </Box>
<Box textAlign="center"> <Box textAlign="center">
<Text fontSize="xl" fontWeight="bold">Tech Parts</Text> <Text fontSize="xl" fontWeight="bold">Tech Parts</Text>
@ -17,5 +32,6 @@ export function ResourceDisplay() {
<Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text> <Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text>
</Box> </Box>
</HStack> </HStack>
</Box>
) )
} }