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

24
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' import { useGameStore } from '../store/gameStore'
export function ResourceDisplay() { 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 totalMultiplier = getTotalMultiplier()
const actualClickPower = clickPower * totalMultiplier 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 ( return (
<Box <Box
position="fixed" position="fixed"
@ -20,6 +25,7 @@ export function ResourceDisplay() {
borderColor="gray.700" borderColor="gray.700"
shadow="lg" shadow="lg"
> >
<VStack spacing={2}>
<HStack spacing={8} justify="center"> <HStack spacing={8} justify="center">
<Box textAlign="center"> <Box textAlign="center">
<Text fontSize="xl" fontWeight="bold">Points</Text> <Text fontSize="xl" fontWeight="bold">Points</Text>
@ -36,6 +42,20 @@ export function ResourceDisplay() {
<Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text> <Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text>
</Box> </Box>
</HStack> </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>
</VStack>
</Box> </Box>
) )
} }