Refactor ResourceDisplay and gameStore to support multiple active multipliers. Updated UI to display actual click power and total multiplier, enhancing gameplay feedback.

src/components/ResourceDisplay.tsx

@@ -2,7 +2,10 @@ import { Box, HStack, Text } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
 
 export function ResourceDisplay() {
-  const { points, techParts, pointsPerSecond, techPartsPerSecond, clickMultiplier } = useGameStore()
+  const { points, techParts, pointsPerSecond, techPartsPerSecond, clickPower, getTotalMultiplier, activeMultipliers } = useGameStore()
+
+  const totalMultiplier = getTotalMultiplier()
+  const actualClickPower = clickPower * totalMultiplier
 
   return (
     <Box
@@ -22,8 +25,9 @@ export function ResourceDisplay() {
           <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>
+          <Text fontSize="sm" color="green.400">Click Power: {actualClickPower}</Text>
+          {activeMultipliers.length > 0 && (
+            <Text fontSize="sm" color="yellow.400">{totalMultiplier}x Active</Text>
           )}
         </Box>
         <Box textAlign="center">

src/store/gameStore.ts

@@ -76,6 +76,15 @@ interface GameState {
 
   // New getter for available buildings
   getAvailableBuildings: () => BuildingInfo[]
+
+  // Replace single multiplier with array of active multipliers
+  activeMultipliers: Array<{
+    multiplier: number
+    endTime: number
+  }>
+
+  // Add getter for total multiplier
+  getTotalMultiplier: () => number
 }
 
 type BuildingType = 
@@ -134,6 +143,7 @@ const initialState = {
   clickMultiplier: 1,
   multiplierEndTime: null,
   playerLevel: 1,
+  activeMultipliers: [],
 }
 
 // Production rates per building
@@ -398,8 +408,13 @@ export const useGameStore = create<GameState>()(
           const now = Date.now()
           set((state) => ({
             techParts: state.techParts - purchase.cost,
-            clickMultiplier: multiplier,
-            multiplierEndTime: now + duration * 1000,
+            activeMultipliers: [
+              ...state.activeMultipliers,
+              {
+                multiplier,
+                endTime: now + duration * 1000
+              }
+            ]
           }))
         }
       },
@@ -408,9 +423,10 @@ export const useGameStore = create<GameState>()(
         const state = get()
         const now = Date.now()
         
-        // Check if multiplier has expired
-        if (state.multiplierEndTime && now >= state.multiplierEndTime) {
-          set({ clickMultiplier: 1, multiplierEndTime: null })
+        // Check for expired multipliers
+        const activeMultipliers = state.activeMultipliers.filter(m => m.endTime > now)
+        if (activeMultipliers.length !== state.activeMultipliers.length) {
+          set({ activeMultipliers })
         }
 
         // Update player level based on points per second
@@ -438,6 +454,15 @@ export const useGameStore = create<GameState>()(
         const state = get()
         return getAvailableBuildings(state.playerLevel)
       },
+
+      // Add getter for total multiplier
+      getTotalMultiplier: () => {
+        const state = get()
+        const now = Date.now()
+        return state.activeMultipliers
+          .filter(m => m.endTime > now)
+          .reduce((total, m) => total + (m.multiplier - 1), 1) // Subtract 1 from each multiplier and add 1 at the end
+      },
     }),
     {
       name: 'game-storage',