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

Enhance MultiplierShop component by replacing static buttons with a dynamic SimpleGrid layout for multiplier purchases. Updated UI to include a description for click power multipliers and improved responsiveness.

Browse Source
This commit is contained in:
billy 2025-03-30 03:13:25 -04:00
parent 55edd3b349
commit 07c47f566a
1 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/MultiplierShop.tsx
View File

@ -1,4 +1,4 @@
import { Box, Button, VStack, HStack, Text } from '@chakra-ui/react' import { Box, Button, VStack, HStack, Text, SimpleGrid } from '@chakra-ui/react'
import { useGameStore } from '../store/gameStore' import { useGameStore } from '../store/gameStore'
const MULTIPLIER_PURCHASES = [ const MULTIPLIER_PURCHASES = [
@ -16,25 +16,34 @@ export function MultiplierShop() {
return ( return (
<Box bg="gray.800" p={6} borderRadius="lg"> <Box bg="gray.800" p={6} borderRadius="lg">
<VStack spacing={4} align="stretch"> <VStack spacing={4} align="stretch">
<Text fontSize="xl" fontWeight="bold">Multiplier Shop</Text> <Box>
<HStack spacing={4}> <Text fontSize="xl" fontWeight="bold">Click Power Multiplier</Text>
<Button <Text fontSize="sm" color="gray.400">
onClick={() => buyMultiplier(30, 2)} Temporarily increase the points you get from clicking. Does not affect automatic point generation from buildings.
isDisabled={techParts < 100} </Text>
bg="gray.700" </Box>
_hover={{ bg: 'gray.600' }} <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
> {MULTIPLIER_PURCHASES.map((purchase) => (
Buy Points Multiplier (100 tech parts) <Button
</Button> key={`${purchase.duration}-${purchase.multiplier}`}
<Button onClick={() => buyMultiplier(purchase.duration, purchase.multiplier)}
onClick={() => buyMultiplier(30, 2)} isDisabled={techParts < purchase.cost}
isDisabled={techParts < 100} bg="gray.700"
bg="gray.700" _hover={{ bg: 'gray.600' }}
_hover={{ bg: 'gray.600' }} height="auto"
> py={4}
Buy Tech Parts Multiplier (100 tech parts) px={6}
</Button> >
</HStack> <VStack align="stretch" spacing={2}>
<Text fontSize="xl" fontWeight="bold">{purchase.multiplier}x Click Power</Text>
<Text fontSize="md" color="gray.300">{purchase.duration}s duration</Text>
<Box borderTop="1px" borderColor="gray.600" pt={2}>
<Text fontSize="md" color="yellow.400">Cost: {purchase.cost} tech parts</Text>
</Box>
</VStack>
</Button>
))}
</SimpleGrid>
</VStack> </VStack>
</Box> </Box>
) )