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

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