From 07c47f566a191db4e551b6f5ec489ea583e9fd19 Mon Sep 17 00:00:00 2001
From: billy <billy@shuttle>
Date: Sun, 30 Mar 2025 03:13:25 -0400
Subject: [PATCH] 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.

---
 src/components/MultiplierShop.tsx | 49 ++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/MultiplierShop.tsx b/src/components/MultiplierShop.tsx
index 3ff6c0e..13b5d54 100644
--- a/src/components/MultiplierShop.tsx
+++ b/src/components/MultiplierShop.tsx
@@ -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}>
-          <Button
-            onClick={() => buyMultiplier(30, 2)}
-            isDisabled={techParts < 100}
-            bg="gray.700"
-            _hover={{ bg: 'gray.600' }}
-          >
-            Buy Points Multiplier (100 tech parts)
-          </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>
+        <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
+              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}
+            >
+              <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>
     </Box>
   )