From 60bbda3d853f8cff39db6a338c115f1d211697a5 Mon Sep 17 00:00:00 2001
From: billy <billy@shuttle>
Date: Sun, 30 Mar 2025 03:26:57 -0400
Subject: [PATCH] Enhance ResourceDisplay to include player level and progress
 to next level. Updated UI to show level indicators and a progress bar,
 improving user feedback on advancement.

---
 src/components/ResourceDisplay.tsx | 54 ++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/components/ResourceDisplay.tsx b/src/components/ResourceDisplay.tsx
index c7c75a9..f4ffb42 100644
--- a/src/components/ResourceDisplay.tsx
+++ b/src/components/ResourceDisplay.tsx
@@ -1,12 +1,17 @@
-import { Box, HStack, Text } from '@chakra-ui/react'
+import { Box, HStack, Text, Progress, VStack } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
 
 export function ResourceDisplay() {
-  const { points, techParts, pointsPerSecond, techPartsPerSecond, clickPower, getTotalMultiplier, activeMultipliers } = useGameStore()
+  const { points, techParts, pointsPerSecond, techPartsPerSecond, clickPower, getTotalMultiplier, activeMultipliers, playerLevel } = useGameStore()
 
   const totalMultiplier = getTotalMultiplier()
   const actualClickPower = clickPower * totalMultiplier
 
+  // Calculate progress to next level
+  const currentLevelPPS = Math.pow(10, playerLevel - 1)
+  const nextLevelPPS = Math.pow(10, playerLevel)
+  const progress = ((pointsPerSecond - currentLevelPPS) / (nextLevelPPS - currentLevelPPS)) * 100
+
   return (
     <Box
       position="fixed"
@@ -20,22 +25,37 @@ export function ResourceDisplay() {
       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>
-          <Text fontSize="sm" color="green.400">Click Power: {actualClickPower}</Text>
-          {activeMultipliers.length > 0 && (
-            <Text fontSize="sm" color="yellow.400">{totalMultiplier}x Active</Text>
-          )}
+      <VStack spacing={2}>
+        <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>
+            <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">
+            <Text fontSize="xl" fontWeight="bold">Tech Parts</Text>
+            <Text fontSize="2xl">{Math.floor(techParts)}</Text>
+            <Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text>
+          </Box>
+        </HStack>
+        <Box w="full" maxW="600px" px={4}>
+          <HStack justify="space-between" mb={1}>
+            <Text fontSize="sm" color="gray.400">Level {playerLevel}</Text>
+            <Text fontSize="sm" color="gray.400">Level {playerLevel + 1}</Text>
+          </HStack>
+          <Progress 
+            value={progress} 
+            colorScheme="green"
+            size="sm"
+            borderRadius="full"
+            bg="gray.700"
+          />
         </Box>
-        <Box textAlign="center">
-          <Text fontSize="xl" fontWeight="bold">Tech Parts</Text>
-          <Text fontSize="2xl">{Math.floor(techParts)}</Text>
-          <Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text>
-        </Box>
-      </HStack>
+      </VStack>
     </Box>
   )
 } 
\ No newline at end of file