56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { Box, HStack, Text, Progress, VStack } from '@chakra-ui/react'
|
|
import { useGameStore } from '../store/gameStore'
|
|
|
|
export function ResourceDisplay() {
|
|
const { points, pointsPerSecond, 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"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
zIndex={100}
|
|
bg="gray.900"
|
|
py={4}
|
|
borderBottom="1px"
|
|
borderColor="gray.700"
|
|
shadow="lg"
|
|
>
|
|
<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>
|
|
</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>
|
|
)
|
|
}
|