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,
playerLevel,
getAvailableBuildings,
tick
tick,
clickPower
} = useGameStore()
const availableBuildings = getAvailableBuildings()
@ -114,13 +115,14 @@ function App() {
return (
<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">
<VStack spacing={8}>
<Box textAlign="center">
<Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading>
<Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
<ResourceDisplay />
</Box>
<Mouse />
@ -154,14 +156,31 @@ function App() {
<Box bg="gray.800" p={6} borderRadius="lg" w="full">
<Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading>
<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
onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
isDisabled={points < 20}
bg="gray.700"
_hover={{ bg: 'gray.600' }}
bg="gray.600"
_hover={{ bg: 'gray.500' }}
>
Upgrade Click Power (20 points)
Upgrade (20 points)
</Button>
</VStack>
</Box>
</SimpleGrid>
</Box>
</VStack>
@ -170,6 +189,7 @@ function App() {
</VStack>
</Container>
</Box>
</Box>
</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'
export function ResourceDisplay() {
const { points, techParts, pointsPerSecond, techPartsPerSecond } = useGameStore()
const { points, techParts, pointsPerSecond, techPartsPerSecond, clickMultiplier } = useGameStore()
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">
<Box textAlign="center">
<Text fontSize="xl" fontWeight="bold">Points</Text>
<Text fontSize="2xl">{Math.floor(points)}</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 textAlign="center">
<Text fontSize="xl" fontWeight="bold">Tech Parts</Text>
@ -17,5 +32,6 @@ export function ResourceDisplay() {
<Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text>
</Box>
</HStack>
</Box>
)
}