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

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.

Browse Source
This commit is contained in:
billy 2025-03-30 03:26:57 -04:00
parent a9636d9969
commit 60bbda3d85
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/ResourceDisplay.tsx
View File

@ -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>
)
}